2019-09 Chrome Developer Toolsの使い方/2019-09 How to use Chrome DevTools

Transcript

1. 開運研修 2019 Chrome Developer Toolsの使い⽅ 2019/6/13 フロントエンドエキスパートチーム 外松 俊尚
2. この講義について ▌【概要】 l Webの開発に関わっていくうえで無くてはならない「Chrome Developer Tools」についての講義です。 l 全体の使い⽅や今後の開発に役⽴つ機能を紹介します。 l 知っている/知ってないで⼤きく変わるので、知るにフォーカス ▌【ターゲット】 l ブラウザで動くものの開発に関わっていく⼈ l Developer ToolsはElementパネルくらいしか知らない⼈
3. ⽬次 ▌Chrome Developer Toolsについて/全体像/各パネルについて ▌困った時は編 ▌UI/デザイン編 ▌Webアプリ開発編 ▌JavaScript編 ▌パフォーマンス編 ▌その他便利な機能編
4. Chrome Developer Toolsについて/全体像 /各パネルについて
5. Chrome Developer Tools ▌Google Chromeに組み込まれた開発者向けツール ▌Web開発を⾏う上で便利な機能がたくさん実装されている ▌使いこなすとDX(Developer Experience)が爆上げする
6. Developer Tools ▌もちろんSafariやFirefoxなどのブラウザにもDeveloper Toolsはある ▌各ブラウザによってできることが若⼲違う ▌ChromeのDeveloper Toolsが機能が豊富で⼈気 ▌例） l Firefox l CSS Flexboxのレイアウトを調べられるFlexBox Inspector l Safari l html Canvasについて調べられるCanvas Debugging
7. Developer Toolsを使うタイミング(経験談) ▌JavaScriptのコードをちょっと試してみたい ▌⾃分が書いたJavaScriptコードのデバッグ ▌画⾯のデザインの調整/表⽰が崩れた時の調査 ▌いまどんなCSSが適⽤されているか調べる ▌Webアプリ開発中、いまどんなAPIが叩かれているのか調べる ▌パフォーマンスのボトルネックを探す etc…
8. ChromeのバージョンとCanary ▌開発者向けに毎⽇更新されるChrome Canaryを使えば最新の機 能を使える l https://www.google.com/intl/ja/chrome/canary/ Stable v75 Canary v77
9. Developer Toolsを起動してみる ▌Mac l Command + option + i or F12 ▌Windows/Linux l Ctrl + Shift + i or F12 ▌右クリック→検証
10. パネル切り替え
11. まずはいくつかデモを⾒せます ▌DOMの操作やデザイン調整 ▌CSSの確認 ▌モバイルでのデザインチェック ▌JavaScriptを試す ▌ネットワークリクエストの調査 ▌パフォーマンスの計測
12. よく使うパネル ▌Elements l DOMツリーやCSSのスタイルについて知りたい時など主にUI/デ ザイン周り ▌Console l JavaScriptコードを試したり、Logを出⼒して情報を収集 ▌Sources l JavaScriptコードのデバッグ ▌Network l APIやJSや画像ファイルなどのリクエストを知る
13. 困った時は編
14. 各機能が⾒つけられない ▌「Command Menu」 ▌Cmd/Ctrl+Shift+pでコマンドメニューを表⽰できる ▌以降のスライドで紹介する機能は⼀部デフォルトで表⽰されな いパネルがあるので、コマンドメニューを利⽤すると便利
15. なんかいろいろ編集しちゃって戻したい ▌リロードしてください ▌DevTools上の変更はリロードするとリセットされます
16. UI/デザイン編
17. いま適⽤されているCSSを調べたい ▌Elementsパネル > StylesやCommuted ▌⾒たいUIにフォーカスを当てると適⽤されているCSSがStylesに表⽰ される ▌適⽤されているスタイルを⼀覧で⾒たい場合はComputedを⾒る ▌値を変更すると画⾯に反映される
18. 要素をホバーされている状態にしておきたい ▌Elementsパネル > Styles > :hover ▌適⽤したい状態にチェックを⼊れると、要素がその状態になる ▌hover時のスタイルや挙動を確認したい時に便利
19. モバイル・レスポンシブ対応のチェック ▌Elementsパネル左のDevice Modeボタン ▌モバイル時の表⽰やレスポンシブに画⾯サイズを切り替えれる
20. DOM要素の調整 ▌Elementsパネル > DOMツリー ▌表⽰されているDOM要素はドラッグ&ドロップで移動できる
21. Webアプリ開発編
22. いまどんなファイルがブラウザに読み込まれてるか知りたい ▌Sourcesパネル > Page ▌HTMLやCSS、JavaScript、画像ファイルなど読み込んでいる ファイルを確認できる
23. あのファイルを開きたい ▌Windows/Linux l Control + o ▌Mac l Command + o ▌ブラウザに読み込まれているファイルにアクセスできる
24. いまどんなリクエストが送られているのか知りたい ▌Networkパネル ▌いまブラウザがリクエストを送信した内容が⼀覧で表⽰される ▌リクエストの種類やキーワードで絞り込みができる ▌どんなAPIが投げられているのか知りたい時によく使う
25. ネットワークリクエストと同等のコードを知りたい ▌ 「Copy as Fetch」 ▌ Networkパネル > リクエストを右クリック > Copy > Copy as Fetch ▌ ネットワークリクエストと同等のfetch()のコードを⽣成 ▌ 例） l fetch("https://ssl.gstatic.com/gb/images/i1_1967ca6a.png", {"credentials":"omit","referrer":"https://www.google.co.jp/","referrerPolicy":"origin","body":null," method":"GET","mode":"cors"});
26. 特定のリクエストがあった時のブレイクポイント ▌「 XHR/Fetch Breakpoints 」 ▌Sourcesパネル > XHR/Fetch Breakpoints > 「+」 ▌URLを指定して、そのURLへのリクエストを引き起こすコードに Breakpointsを張れる ▌例えば、誤ったリクエストを実⾏しているコードをすばやく⾒つける事 ができる
27. 値を常に監視したい ▌「 Live Expressions」 ▌Consoleパネル > ⽬のアイコン ▌リアルタイムで指定した値を監視できる ▌スクロールやDOMの状態など画⾯操作中に動的に変わる値を リアルタイムで確認したい時に便利
28. CookieやLocal Storageにどんなデータが⼊っているか ▌Applicationパネル ▌Local StorageやCookieに値がちゃんと⼊っているか確認
29. デバッグするときにCookieやCacheを⼀括で消したい ▌「Clear Site Data」 ▌実⾏したページの以下データを⼀括で削除してくれる(個別指定もできる) l Cookies l WebSQL l Service Workers l Cache Storage l IndexedDB l Local Storage l Application Cache
30. JavaScript編
31. ちょっとJavaScriptのコードを試したい ▌Console or Sources/Snippets ▌Consoleで複数⾏書く場合はShift + Enterで改⾏ ▌JavaScriptのコードを書くと実⾏結果が取得できる
32. console.logしたい ▌Logpoints ▌Sourcesパネル > ⾏番号 > 右クリック > Add logpoint ▌console.log()呼び出しでコードを乱雑にすることなく、 Devtoolsからconsole.logへの出⼒を仕込むことができる
33. JavaScriptコードのデバッグをしたい ▌Sourcesパネル > ⾏番号 > クリック ▌ステップ実⾏などでコードがどのように動くのか、変数の中⾝ などを確認できる ▌JavaScriptのコードはブラウザで実⾏しないと挙動がわからな いので開発中よく使う
34. 特定の条件でだけbreakpointを貼りたい ▌Conditional Breakpoint ▌Sourcesパネル > ⾏番号 > 右クリック > Add conditional breakpoint... ▌毎回⽌めるのは⾯倒で、特定の条件の時だけ⽌めたい場合など
35. JSによるDOMへの参照コードを知りたい ▌「Copy JS Path 」 ▌Elementsパネル > DOM要素を右クリック > Copy > Copy JS Path ▌DOMノードへのJSによる参照を取得できる l Shadow DOMも対応 ▌例) l document.querySelector ('body > label:nth-child(2)') l document.querySelector('#demo1') .shadowRoot .querySelector('p:nth-child(2)')
36. ブラウザからJavaScriptやCSSを上書きしたい ▌「Local Overrides」 ▌Sourcesパネル > Overrides > Select folder for overrides ▌Devtools上で変更したJSやCSSをファイルとして保存しておける l リロードしても変更が残る ▌ローカルにファイルを持っていない場合や変更した内容によるリ ロード後の挙動を確認したい場合などに便利
37. JavaScriptやCSSのカバレッジを知りたい ▌「 Code Coverage 」 ▌CSS/JSの使⽤されたコード/使⽤されてないコードが分かる ▌ページ読み込みや特定の操作を⾏った際のコードカバレッジが ⾒れる
38. パフォーマンス編
39. オフライン/低スペックな環境ではどんな⾵に動作するのか ▌オフラインでの動作を確認 l Networkパネル > Offlineにチェック ▌低スペック/遅い回線での動作を確認 l Performanceパネル > Network/CPUドロップダウン l 低スペック l Slow 3G l 遅い回線 l 6x slowdown
40. とりあえずパフォーマンスを計測してみたい ▌Auditsパネル l LighthouseというWebアプリの品質を計測するツールを使っ て以下の項⽬をチェックできる l Performance l PWA l Best practices l Accessibility l SEO
41. パフォーマンスのボトルネックを探したい ▌Performanceパネル > Start Profiling ▌⾚くなっている箇所は怪しい l ボトルネックになる原因を教えてくれるものも ▌どの項⽬に時間がかかっている？ l Loading l Scripting l Rendering l Painting
42. その他便利な機能編
43. スクリーンショットが撮りたい ▌「Screenshots」 ▌エリア選択 ▌特定の要素 ▌全画⾯
44. Devtoolsの拡張(ReactやRedux) ▌React Developer Tools ▌Redux DevTools ▌ReactやReduxといったライブラリに特化した機能をDevtoolsに 追加できるChrome拡張があるのでおすすめ ▌拡張機能をインストールするとパネルが追加される
45. さいごに
46. まずは⾊々試してみる ▌機能が豊富過ぎて難しそうに感じるけど、まずは⾊々試してみ るのがおすすめ ▌普段から使うのは数個なので、それは使っていると⾃然に覚え る ▌新しく知ったTipsは是⾮周りの⼈に教えてあげて
47. Tools for Web Developers ▌公式の開発者向けドキュメント ▌Tools for Web Developres > Chrome DevTools ▌各種機能についての詳しい説明 ▌https://developers.google.com/web/tools/chrome-devtools/
48. Devtoolsの便利な機能をもっと知りたい What's New In DevTools /dev tips https://developers.google.com/web/updates/2019/ 01/devtools https://umaar.com/dev-tips/