社内で行われたDevTools勉強会の資料です
1. DevTools 勉強会 Ueni @uenitty
2. DevTools マスターの皆さん、ようこそ... （うぅ…）
3. アジェンダ 1. 各パネルの機能を見てみる • Device Mode、Elements、Console、Sources、Network、 Performance、Memory、Application、Security、Audits、
More tools 2. ランタイムパフォーマンス調査デモ 3. ネットワークパフォーマンス調査デモ
4. 1. 各パネルの機能を見てみる
5. Device Mode https://developers.google.com/web/tools/chrome-devtools/device-mode/
6. Device Mode • ビューポートコントロール（Responsive、端末固有） • メディアクエリ、ルーラー表示 • デバイス ピクセル比、デバイスタイプのエミュレート • 様々な形式のスクリーンショット • ネットワークの設定（UA、ネットワーク スロットリング） https://developers.google.com/web/tools/chrome-devtools/device-mode/emulate-mobile-viewports
7. ※Googleからのアドバイス 「他のツールでもエミュレートしてみることをおすすめします」 • Firefox のレスポンシブ デザイン ビュー • Edge の F12 エミュレーション • Android Emulator • iOS シミュレータ • Modern.IE https://developers.google.com/web/tools/chrome-devtools/device-mode/testing-other-browsers
8. Elements https://developers.google.com/web/tools/chrome-devtools/inspect-styles/
9. Elements • DOM のライブ編集 • 要素の並び替え、削除 • コマンドパレットからノードのスクショ • cmd-shift-P / ‘Capture node screenshot’ https://developers.google.com/web/tools/chrome-devtools/inspect-styles/edit-dom
10. Console https://developers.google.com/web/tools/chrome-devtools/console/
11. Console • モーダル形式での表示/非表示は Esc キー • [Preserve log] オンで履歴を保持 • cmd-D で複数選択、同時編集 • コンソールに入力できる内容は以下2つ目のページを参照 https://developers.google.com/web/tools/chrome-devtools/console/ https://developers.google.com/web/tools/chrome-devtools/console/command-line-reference
12. Sources https://developers.google.com/web/tools/chrome-devtools/javascript/breakpoints
13. Sources • いろんな種類のブレークポイント • ` ` • Snippets 便利 https://developers.google.com/web/tools/chrome-devtools/javascript/breakpoints
14. Network https://developers.google.com/web/tools/chrome-devtools/network-performance/resource-loading
15. Network • ログのFilterやSort • Capture screenshot • ネットワーク接続のエミュレーション https://developers.google.com/web/tools/chrome-devtools/javascript/breakpoints
16. Performance https://developers.google.com/web/tools/chrome-devtools/
17. Performance • リロードして記録、そのまま記録 • CPUやネットワーク接続のエミュレーション • FPS、CPU、NETチャート https://developers.google.com/web/tools/chrome-devtools/javascript/breakpoints
18. Memory https://developers.google.com/web/tools/chrome-devtools/
19. Memory • デタッチされた DOM ツリーのメモリリークの検出 • JS ヒープのメモリリークの特定 • 関数ごとのメモリ割り当て状況の調査 • 頻繁なガベージ コレクションの特定 https://developers.google.com/web/tools/chrome-devtools/memory-problems/
20. Application https://developers.google.com/web/tools/chrome-devtools/
21. Application • ローカル ストレージ、IndexedDB のデータ参照、削除 • Service Worker のキャッシュ表示 https://developers.google.com/web/tools/chrome-devtools/javascript/breakpoints
22. Security https://developers.google.com/web/tools/chrome-devtools/
23. Security • セキュリティの問題の調査 • HTTPS が正しく実装されているかの確認 • Mixed contentをNetworkパネルで表示 https://developers.google.com/web/tools/chrome-devtools/javascript/breakpoints
24. Audits https://developers.google.com/web/tools/chrome-devtools/
25. Audits • Lighthouse https://developers.google.com/web/tools/lighthouse/
26. More tools • Coverage • Rendering • Animation • Setting • Dark Theme
27. 2. ランタイムパフォーマンス調査デモ
28. DEMO https://developers.google.com/web/tools/chrome-devtools/evaluate-performance/
29. 3. ネットワークパフォーマンス調査デモ
30. DEMO https://developers.google.com/web/tools/chrome-devtools/network-performance/
uenitty
tucksaun
sgash708
tasuku43
chobishiba
soyuka
hiro_ghap1
seike460
lamodatech
dropout009
syumai
yoshifumi_ishikura
bryan
bkeepers
aki_iinuma
quramy
deanohume
destraynor
cromwellryan
garrettdimon
morganepeng
holman
brad_frost
smashingmag
![• モーダル形式での表示/非表示は Esc キー • [Preserve log] オンで履歴を保持 • cmd-D](https://files.speakerdeck.com/presentations/21a07979f80c426a9528e01066e2e3ce/slide_10.jpg){kind=link}
