開運研修 2021 Chrome Developer Toolsの使い⽅ フロントエンドエキスパートチーム sakito

2 • 【概要】 • Webの開発に関わっていくうえで無くてはならない「Developer Tools」につ いての講義、Chromeをベースに紹介する • 全体の使い方や今後の開発に役立つ機能を紹介する • 知っている/知ってないで大きく変わるので、知ることにフォーカスする • ターゲット • ブラウザで動くものの開発に関わっていく人 • Developer Toolsについて知りたい人 この講義について

3 • sakito(@__sakito__) • 2019年6月にサイボウズに中途入社 • フロントエンドエキスパートチーム所属 • 犬がすき🐕 自己紹介

4 • Chrome Developer Toolsについて • Chrome Developer Toolsとは？ • Chrome以外のDeveloper Tools • ChromeのバージョンとDeveloper Tools • Chrome Developer Toolsを開く • Chrome Developer ToolsのPanel • Elements Panel • Console Panel • Lighthouse Panel • Network Panel • Performance Panel • その他のPanel • その他の便利機能 • さいごに 目次

Chrome Developer Toolsについて

6 • Google Chromeブラウザに組み込まれた開発者向けツール • Web開発を行う上で便利な機能がたくさんある • 知っておくと開発体験が向上する Chrome Developer Toolsとは？

• Safari、Firefox、Microsoft Edgeなどのブラウザにも Developer Toolsはある • 各ブラウザによって実装されている機能や挙動が違う場合があ る • ほかのブラウザを使用する際は覚えておくといい 7 Chrome以外のDeveloper Tools

• Chromeのバージョンが上がるとDeveloper Toolsの機能も変 わったり、増えたりする • Chrome Beta,Chrome Dev,Chrome Canaryなどを使用すると、 新しい機能をいち早く確認することができる • アップデート情報はここで確認できる • What's New In DevTools • https://developer.chrome.com/docs/devtools/updates/ 8 ChromeのバージョンとDeveloper Tools

• 開きたい要素やページ上で右クリック => 検証(Inspect)を選択 • ショートカットキーでも開ける • Command+Option+J(Mac)、Control+Shift+J(Windowsなど) • Elementパネルを表示 • Command+Option+C(Mac)、Control+Shift+C(Windowsなど) • Consoleパネルを表示 • Command+Option+I (Mac)、Control+Shift+I(Windowsなど) • 最後に開いたパネルを表示 • 詳しくはこちら • Open Chrome DevTools • https://developer.chrome.com/docs/devtools/open/ 9 Chrome Developer Toolsを開く

Chrome Developer ToolsのPanel

11 Chrome Developer ToolsのPanel

12 Chrome Developer ToolsのPanel 今日は各パネルの実際によく使う機能を、 デモを交えて紹介していく

Elements Panel

14 要素の確認、変更、削除、追加などができる • 要素がどのような状態かわかる • 編集や要素を追加すると、どのような見た 目になるのかわかる • ドラッグ&ドロップで移動ができる • コピー&ペースト可能 • Scroll into viewでDev Tool上で選択した 要素までスクロールができる • HoverやFocusの状態が作れる • Capture node screenshotで要素のスク ショが取れる

15 CSSを確認、変更、削除、追加などができる • 要素に当たっているCSSを確認でき る • CSSを変更、追加などをするとどの ような見た目になるのかわかる • Computedタブで当たっているCSS を一覧を確認できる • CSSに当たっている色をカラーピッ カーで変えることもできる

16 その他 • アクセシビリティを確認できる • FlexboxやGrid Layoutを可視化でき る • 要素にブレイクポイントを設定でき る • などなど…

17 Elements Panelのまとめ • HTMLやCSSを確認や編集などできる • リロードすると元に戻る • 手軽に変更できるので、開発するときによくお世話になる • さまざな機能があるので触りながら覚えていくのがいい • 気になるサイトの構成を覗くことで勉強にもなる

Console Panel

19 JavaScriptを実行することができる • JavaScriptを実行できる • 手軽に挙動を確認できる • Chromeに実装されている V8(ChromeのJSエンジン)のバー ジョンによって実行できるJSが異な る • V8についてはこちらをチェック • https://v8.dev/

20 consoleを表示したり、エラーを確認する • console.log()に渡した情報を出力し てくれる場所 • console.errorやconsole.tableなどがあ る • ライブラリなどがエラーを表示して くれる場所でもある • 開発中にデバッグする際によく使う

21 その他 • $0で今フォーカスしている要素を取得 することができる • copy()の引数に与えたものがクリップ ボードに反映される • monitorEvents(window,"click")でク リックした箇所の情報を取得できる • Windowなどのグローバル状態を確認で きる • Live Expressions(目のアイコン)で指定 した値を監視できる

22 Console Panelのまとめ • JSを実行したり、さまざまな状態を確認できる • アプリケーション開発中にうまく動かなかったら、とりあえず エラーが表示されていなか確認する場所 • 表示されているエラーを調べると解決に近づく • デバッグ時に一番使うPanel

Lighthouse Panel

24 サイトの品質や課題を確認できる • LighthouseはChromeが開発している OSS • https://github.com/GoogleChrome/light house • Developer Toolsに組み込まれた • Generate reportをクリックすると計算 を始める • 各項目の点数と課題点が表示される • 表示されている課題を解決すれば品質向 上に繋がる

Source Panel

26 実行されているファイルを確認、編集できる • サイトに使用しているファイルの中 身を確認できる • webpackなどのバンドラーを使用し ている場合は、本番環境だと最適化 されたファイルが表示されるので、 確認する際は開発モードにする • 直接中身を書き換えることもできる • リロードすると元に戻る

27 ソースのデバッグに使用できる • ブレイクポイントを指定すると処理 を追うことができる • 複雑な処理を1つ1つ追うときに便利 • ソースコードに直接debuggerと指定 することで起動可能

28 その他 • Add logpointを指定することで、直接 console.logを仕込める • Snippetを保存して任意のスクリプトを 実行できる • Overridesでローカルにあるソースコー ドを上書きできる • 詳しくはこちら • Edit files with Workspaces - Chrome Developers • https://developer.chrome.com/docs/devto ols/workspaces/

29 Source Panelのまとめ • より詳細なデバッグができる • 処理の流れを追いたいときなどに使用することが多い • ローカルのファイルを書き換えることもできる

Network Panel

31 サイトのリソースの転送状態が見れる • リソースのアップロード、ダウンロードを可視化したもの • リソースのサイズやリクエストにかかった時間などが見れる

32 リクエストやレスポンスの詳細が見れる • リクエストヘッダーの情報、クエリパラメーター、レスポンスの 詳細がわかる

33 その他 • ファイルのフィルタリングや検索ができる • ネットワークの状態を変更することができ る • デフォルトで表示されている以外の情報も 表示できる • さまざまな状態で情報をコピーできる • Preserve logにチェックすると、ページ遷 移してもログが確認できる • Disable cacheにチェックすると、cache がない状態が確認できる

34 Network Panelまとめ • サイトのリソースのリクエスト状態やレスポンス状態を確認で きる • リクエスト情報を確認して、リソースが取得出来てない場合の エラーを確認したりするときに便利 • どのリクエストに時間がかかってるか計測するときに便利 • 詳しくはここを参照 • Inspect network activity - Chrome Developers • https://developer.chrome.com/docs/devtools/network/

Performance Panel

36 パフォーマンスに関するアレコレを可視化できる

37 パフォーマンスに関するアレコレを可視化できる • 左上のStart Profiling後に詳細の状態が表示される • フレーム数(FPS)を確認できる • CPU負荷を確認できる • Loading – リソースのリクエストやHTMLの処理 • Scripting – JavaScriptの処理 • Rendering – スタイルやレイアウトの計算 • Painting – 描画処理にかかった時間 • メインスレッド行われた処理の状態などの確認 • パフォーマンス指標を確認できる • First Paint (FP) – ブラウザになにか表示されたとき • First Contentful Paint (FCP) – なにかしらの要素が表示されたとき • Largest Contentful Paint (LCP) – 最大のコンテンツ要素がビューポートに表示されるまでの時間 • Layout Shift (CLS) – 要素の移動を示す • など… • ほかにも色々確認できる • Analyze runtime performance - Chrome Developers • https://developer.chrome.com/docs/devtools/evaluate-performance/

その他のPanel

39 メモリに関することを可視化できる • Memory Panel • メモリに関することが可視化できる • Application Panel • サイトのlocalStorage、cookie、cacheなどが確認できる • Security Panel • セキュリティー状態を知ることができる

その他の便利機能

41 機能を検索して実行できる • Command + P(Mac), Control+P(Windowsなど)で機能 を検索して、実行できる • ショートカットで実行したい場合 に使える

42 スマホ状態のエミュレート • さまざまなスマホの見た目やUser Agentを再現できる • Settings > Devicesで機種の調整 もできる • スマホレイアウトの確認に使うこ とが多い

43 画面のスクリーンショットを撮る • 機能検索でScreenshotを検索して、 ページのフルサイズや選択エリア などのスクショが撮れる • ページ全体の状態を共有したい場 合などに使うと便利

さいごに

45 さいごに • Developer Toolsはさまざまな機能がある • 覚えることでデバッグの効率がよくなり、開発速度が上がる • 今回紹介した機能以外にも便利な機能はたくさんある • 試して覚えるのが一番よい • 公式のドキュメントはここにあるので、一読するとよい • Chrome DevTools - Chrome Developers • https://developer.chrome.com/docs/devtools/