Upgrade to Pro — share decks privately, control downloads, hide ads and more …

開運研修 2021 Chrome Developer Toolsの使い方 / Chrome Developer Tools

A97eee01397705443a72a48ce29d3e19?s=47 Cybozu
May 19, 2021

開運研修 2021 Chrome Developer Toolsの使い方 / Chrome Developer Tools

A97eee01397705443a72a48ce29d3e19?s=128

Cybozu

May 19, 2021
Tweet

Transcript

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

  2. 2 • 【概要】 • Webの開発に関わっていくうえで無くてはならない「Developer Tools」につ いての講義、Chromeをベースに紹介する • 全体の使い方や今後の開発に役立つ機能を紹介する •

    知っている/知ってないで大きく変わるので、知ることにフォーカスする • ターゲット • ブラウザで動くものの開発に関わっていく人 • Developer Toolsについて知りたい人 この講義について
  3. 3 • sakito(@__sakito__) • 2019年6月にサイボウズに中途入社 • フロントエンドエキスパートチーム所属 • 犬がすき🐕 自己紹介

  4. 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 • その他の便利機能 • さいごに 目次
  5. Chrome Developer Toolsについて

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

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

    7 Chrome以外のDeveloper Tools
  8. • 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
  9. • 開きたい要素やページ上で右クリック => 検証(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を開く
  10. Chrome Developer ToolsのPanel

  11. 11 Chrome Developer ToolsのPanel

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

  13. Elements Panel

  14. 14 要素の確認、変更、削除、追加などができる • 要素がどのような状態かわかる • 編集や要素を追加すると、どのような見た 目になるのかわかる • ドラッグ&ドロップで移動ができる •

    コピー&ペースト可能 • Scroll into viewでDev Tool上で選択した 要素までスクロールができる • HoverやFocusの状態が作れる • Capture node screenshotで要素のスク ショが取れる
  15. 15 CSSを確認、変更、削除、追加などができる • 要素に当たっているCSSを確認でき る • CSSを変更、追加などをするとどの ような見た目になるのかわかる • Computedタブで当たっているCSS

    を一覧を確認できる • CSSに当たっている色をカラーピッ カーで変えることもできる
  16. 16 その他 • アクセシビリティを確認できる • FlexboxやGrid Layoutを可視化でき る • 要素にブレイクポイントを設定でき

    る • などなど…
  17. 17 Elements Panelのまとめ • HTMLやCSSを確認や編集などできる • リロードすると元に戻る • 手軽に変更できるので、開発するときによくお世話になる •

    さまざな機能があるので触りながら覚えていくのがいい • 気になるサイトの構成を覗くことで勉強にもなる
  18. Console Panel

  19. 19 JavaScriptを実行することができる • JavaScriptを実行できる • 手軽に挙動を確認できる • Chromeに実装されている V8(ChromeのJSエンジン)のバー ジョンによって実行できるJSが異な

    る • V8についてはこちらをチェック • https://v8.dev/
  20. 20 consoleを表示したり、エラーを確認する • console.log()に渡した情報を出力し てくれる場所 • console.errorやconsole.tableなどがあ る • ライブラリなどがエラーを表示して

    くれる場所でもある • 開発中にデバッグする際によく使う
  21. 21 その他 • $0で今フォーカスしている要素を取得 することができる • copy()の引数に与えたものがクリップ ボードに反映される • monitorEvents(window,"click")でク

    リックした箇所の情報を取得できる • Windowなどのグローバル状態を確認で きる • Live Expressions(目のアイコン)で指定 した値を監視できる
  22. 22 Console Panelのまとめ • JSを実行したり、さまざまな状態を確認できる • アプリケーション開発中にうまく動かなかったら、とりあえず エラーが表示されていなか確認する場所 • 表示されているエラーを調べると解決に近づく

    • デバッグ時に一番使うPanel
  23. Lighthouse Panel

  24. 24 サイトの品質や課題を確認できる • LighthouseはChromeが開発している OSS • https://github.com/GoogleChrome/light house • Developer

    Toolsに組み込まれた • Generate reportをクリックすると計算 を始める • 各項目の点数と課題点が表示される • 表示されている課題を解決すれば品質向 上に繋がる
  25. Source Panel

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

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

  28. 28 その他 • Add logpointを指定することで、直接 console.logを仕込める • Snippetを保存して任意のスクリプトを 実行できる •

    Overridesでローカルにあるソースコー ドを上書きできる • 詳しくはこちら • Edit files with Workspaces - Chrome Developers • https://developer.chrome.com/docs/devto ols/workspaces/
  29. 29 Source Panelのまとめ • より詳細なデバッグができる • 処理の流れを追いたいときなどに使用することが多い • ローカルのファイルを書き換えることもできる

  30. Network Panel

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

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

  33. 33 その他 • ファイルのフィルタリングや検索ができる • ネットワークの状態を変更することができ る • デフォルトで表示されている以外の情報も 表示できる

    • さまざまな状態で情報をコピーできる • Preserve logにチェックすると、ページ遷 移してもログが確認できる • Disable cacheにチェックすると、cache がない状態が確認できる
  34. 34 Network Panelまとめ • サイトのリソースのリクエスト状態やレスポンス状態を確認で きる • リクエスト情報を確認して、リソースが取得出来てない場合の エラーを確認したりするときに便利 •

    どのリクエストに時間がかかってるか計測するときに便利 • 詳しくはここを参照 • Inspect network activity - Chrome Developers • https://developer.chrome.com/docs/devtools/network/
  35. Performance Panel

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

  37. 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/
  38. その他のPanel

  39. 39 メモリに関することを可視化できる • Memory Panel • メモリに関することが可視化できる • Application Panel

    • サイトのlocalStorage、cookie、cacheなどが確認できる • Security Panel • セキュリティー状態を知ることができる
  40. その他の便利機能

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

    に使える
  42. 42 スマホ状態のエミュレート • さまざまなスマホの見た目やUser Agentを再現できる • Settings > Devicesで機種の調整 もできる

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

  44. さいごに

  45. 45 さいごに • Developer Toolsはさまざまな機能がある • 覚えることでデバッグの効率がよくなり、開発速度が上がる • 今回紹介した機能以外にも便利な機能はたくさんある •

    試して覚えるのが一番よい • 公式のドキュメントはここにあるので、一読するとよい • Chrome DevTools - Chrome Developers • https://developer.chrome.com/docs/devtools/