Tweet
Tweet

Slide 1

Slide 1 text

Ueni @uenitty DevTools 勉強会

Slide 2

Slide 2 text

（うぅ…） DevTools マスターの皆さん、ようこそ...

Slide 3

Slide 3 text

1. 各パネルの機能を見てみる • Device Mode、Elements、Console、Sources、Network、 Performance、Memory、Application、Security、Audits、
 More tools 2. ランタイムパフォーマンス調査デモ 3. ネットワークパフォーマンス調査デモ アジェンダ 3

Slide 4

Slide 4 text

1. 各パネルの機能を見てみる

Slide 5

Slide 5 text

Device Mode 5 https://developers.google.com/web/tools/chrome-devtools/device-mode/

Slide 6

Slide 6 text

• ビューポートコントロール（Responsive、端末固有） • メディアクエリ、ルーラー表示 • デバイス ピクセル比、デバイスタイプのエミュレート • 様々な形式のスクリーンショット • ネットワークの設定（UA、ネットワーク スロットリング） Device Mode 6 https://developers.google.com/web/tools/chrome-devtools/device-mode/emulate-mobile-viewports

Slide 7

Slide 7 text

「他のツールでもエミュレートしてみることをおすすめします」 • Firefox のレスポンシブ デザイン ビュー • Edge の F12 エミュレーション • Android Emulator • iOS シミュレータ • Modern.IE ※Googleからのアドバイス 7 https://developers.google.com/web/tools/chrome-devtools/device-mode/testing-other-browsers

Slide 8

Slide 8 text

Elements 8 https://developers.google.com/web/tools/chrome-devtools/inspect-styles/

Slide 9

Slide 9 text

• DOM のライブ編集 • 要素の並び替え、削除 • コマンドパレットからノードのスクショ • cmd-shift-P / ‘Capture node screenshot’ Elements 9 https://developers.google.com/web/tools/chrome-devtools/inspect-styles/edit-dom

Slide 10

Slide 10 text

Console 10 https://developers.google.com/web/tools/chrome-devtools/console/

Slide 11

Slide 11 text

• モーダル形式での表示/非表示は Esc キー • [Preserve log] オンで履歴を保持 • cmd-D で複数選択、同時編集 • コンソールに入力できる内容は以下2つ目のページを参照 Console 11 https://developers.google.com/web/tools/chrome-devtools/console/ https://developers.google.com/web/tools/chrome-devtools/console/command-line-reference

Slide 12

Slide 12 text

Sources 12 https://developers.google.com/web/tools/chrome-devtools/javascript/breakpoints

Slide 13

Slide 13 text

• いろんな種類のブレークポイント • `EFCVHHFS` • Snippets 便利 Sources 13 https://developers.google.com/web/tools/chrome-devtools/javascript/breakpoints

Slide 14

Slide 14 text

Network 14 https://developers.google.com/web/tools/chrome-devtools/network-performance/resource-loading

Slide 15

Slide 15 text

• ログのFilterやSort • Capture screenshot • ネットワーク接続のエミュレーション Network 15 https://developers.google.com/web/tools/chrome-devtools/javascript/breakpoints

Slide 16

Slide 16 text

Performance 16 https://developers.google.com/web/tools/chrome-devtools/

Slide 17

Slide 17 text

• リロードして記録、そのまま記録 • CPUやネットワーク接続のエミュレーション • FPS、CPU、NETチャート Performance 17 https://developers.google.com/web/tools/chrome-devtools/javascript/breakpoints

Slide 18

Slide 18 text

Memory 18 https://developers.google.com/web/tools/chrome-devtools/

Slide 19

Slide 19 text

• デタッチされた DOM ツリーのメモリリークの検出 • JS ヒープのメモリリークの特定 • 関数ごとのメモリ割り当て状況の調査 • 頻繁なガベージ コレクションの特定 Memory 19 https://developers.google.com/web/tools/chrome-devtools/memory-problems/

Slide 20

Slide 20 text

Application 20 https://developers.google.com/web/tools/chrome-devtools/

Slide 21

Slide 21 text

• ローカル ストレージ、IndexedDB のデータ参照、削除 • Service Worker のキャッシュ表示 Application 21 https://developers.google.com/web/tools/chrome-devtools/javascript/breakpoints

Slide 22

Slide 22 text

Security 22 https://developers.google.com/web/tools/chrome-devtools/

Slide 23

Slide 23 text

• セキュリティの問題の調査 • HTTPS が正しく実装されているかの確認 • Mixed contentをNetworkパネルで表示 Security 23 https://developers.google.com/web/tools/chrome-devtools/javascript/breakpoints

Slide 24

Slide 24 text

Audits 24 https://developers.google.com/web/tools/chrome-devtools/

Slide 25

Slide 25 text

• Lighthouse Audits 25 https://developers.google.com/web/tools/lighthouse/

Slide 26

Slide 26 text

• Coverage • Rendering • Animation • Setting • Dark Theme More tools 26

Slide 27

Slide 27 text

2. ランタイムパフォーマンス調査デモ

Slide 28

Slide 28 text

DEMO https://developers.google.com/web/tools/chrome-devtools/evaluate-performance/

Slide 29

Slide 29 text

3. ネットワークパフォーマンス調査デモ

Slide 30

Slide 30 text

DEMO https://developers.google.com/web/tools/chrome-devtools/network-performance/