$30 off During Our Annual Pro Sale. View Details »

開運研修_2020Chrome Developer_Toolsの使い方 / How_to_use_Chrome_Developer_Tools_Training_2020

Cybozu
PRO
August 19, 2020

開運研修_2020Chrome Developer_Toolsの使い方 / How_to_use_Chrome_Developer_Tools_Training_2020

Cybozu
PRO

August 19, 2020
Tweet

More Decks by Cybozu

Other Decks in Technology

Transcript

  1. 開運研修 2020
    Chrome Developer Toolsの使い⽅
    2020/5/14
    フロントエンドエキスパートチーム
    外松 俊尚

    View Slide

  2. この講義について
    ▌ 【概要】
    l Webの開発に関わっていくうえで無くてはならない「Developer Tools」につ
    いての講義です。Chromeをベースに紹介。
    l 全体の使い⽅や今後の開発に役⽴つ機能を紹介します。
    l 知っている/知ってないで⼤きく変わるので、知るにフォーカス
    ▌ 【ターゲット】
    l ブラウザで動くものの開発に関わっていく⼈
    l Developer ToolsはElementパネルくらいしか知らない⼈
    2

    View Slide

  3. ⽬次
    ▌Chrome Developer Toolsについて/全体像/各パネルについて
    ▌困った時は編
    ▌UI/デザイン編
    ▌Webアプリ開発編
    ▌JavaScript編
    ▌パフォーマンス編
    ▌その他便利な機能編
    3

    View Slide

  4. Chrome Developer Toolsについて/全体像
    /各パネルについて
    4

    View Slide

  5. Chrome Developer Tools
    ▌Google Chromeに組み込まれた開発者向けツール
    ▌Web開発を⾏う上で便利な機能がたくさん実装されている
    ▌使いこなすとDX(Developer Experience)が爆上げする
    5

    View Slide

  6. https://cybozu.co.jpにアクセスするとブラウザは︖
    ▌HTMLやCSS, JavaScript, 画像などのリソースをサーバーから取

    ▌取得したリソースのパースから始まりブラウザがWebページを
    表⽰する
    ▌その他にも、StorageやCacheなどWebの技術を使うはず
    6

    View Slide

  7. Developer ToolsはブラウザがWebページを表⽰する上での、
    様々な情報を確認、変更することができる
    7

    View Slide

  8. Developer Toolsを使うタイミング(経験談)
    ▌JavaScriptのコードをちょっと試してみたい
    ▌⾃分が書いたJavaScriptコードのデバッグ
    ▌画⾯のデザインの調整/表⽰が崩れた時の調査
    ▌いまどんなCSSが適⽤されているか調べる
    ▌Webアプリ開発中、いまどんなAPIが叩かれているのか調べる
    ▌パフォーマンスのボトルネックを探す
    ▌etc…
    8

    View Slide

  9. Developer Toolsを起動してみよう
    ▌Mac
    l Command + option + i or F12
    ▌Windows/Linux
    l Ctrl + Shift + i or F12
    ▌右クリック→検証
    9

    View Slide

  10. Chrome以外のDeveloper Toolsは︖
    ▌もちろんSafariやFirefoxなどのブラウザにもDeveloper Toolsはある
    ▌各ブラウザによってできることが若⼲違う
    ▌ChromeのDeveloper Toolsが機能が豊富で⼈気な印象
    ▌例)
    l Firefox
    l CSS Flexboxのレイアウトを調べられるFlexBox Inspector
    l Safari
    l html Canvasについて調べられるCanvas Debugging
    10

    View Slide

  11. 細かい機能の差異はあるけど、主に使う機能は、どのブラウザ
    でも可能。
    今⽇知る内容は、Chrome以外のブラウザユーザーでも約に⽴
    つはず
    11

    View Slide

  12. ChromeのバージョンとCanary
    ▌開発者向けに毎⽇更新されるChrome Canaryを使えば最新の
    機能を使える
    ▌https://www.google.com/intl/ja/chrome/canary/
    Stable
    v81
    Canary
    v84
    12 2020/5/14時点

    View Slide

  13. 基本機能はパネルを切り替えて使います
    パネルを切り替える
    13

    View Slide

  14. よく使うパネル
    ▌Elements
    l DOMツリーやCSSのスタイルについて知りたい時など主にUI/デザイン
    周り
    ▌Console
    l JavaScriptコードを試したり、ログを出⼒して情報を収集
    ▌Sources
    l JavaScriptコードのデバッグ
    ▌Network
    l APIやJSや画像ファイルなどのリクエストを知る
    14

    View Slide

  15. 困った時は編
    15

    View Slide

  16. 各機能が⾒つけられない
    ▌「Command Menu」
    ▌Cmd/Ctrl+Shift+pでコマンドメニューを表⽰できる
    ▌以降のスライドで紹介する機能は⼀部デフォルトで表⽰されな
    いパネルがあるので、コマンドメニューを利⽤すると便利
    16

    View Slide

  17. なんかいろいろ編集しちゃって戻したい
    ▌リロードしてください
    ▌DevTools上の変更はリロードするとリセットされます
    17

    View Slide

  18. UI/デザイン編
    18

    View Slide

  19. いま適⽤されているCSSを調べたい
    ▌Elementsパネル > StylesやCommuted
    ▌⾒たいUIにフォーカスを当てると適⽤されているCSSがStylesに表⽰
    される
    ▌適⽤されているスタイルを⼀覧で⾒たい場合はComputedを⾒る
    ▌値を変更すると画⾯に反映される
    19

    View Slide

  20. 要素をホバーされている状態にしておきたい
    ▌Elementsパネル > Styles > :hover
    ▌適⽤したい状態にチェックを⼊れると、要素がその状態になる
    ▌hover時のスタイルや挙動を確認したい時に便利
    20

    View Slide

  21. モバイル・レスポンシブ対応のチェック
    ▌Elementパネルなどの機能⼀覧にあるDevice Modeボタン
    ▌モバイル時の表⽰やレスポンシブに画⾯サイズを切り替えれる
    21

    View Slide

  22. DOM要素の調整
    ▌Elementsパネル > DOMツリー
    l 表⽰されているDOM要素はドラッグ&ドロップで移動できる
    ▌Document.designMode
    l Consoleパネルで「document.designMode = “on”;」と⼊⼒
    l ⽂書全体が編集可能になるので、ちょっとした修正をする
    ときに便利かも
    22

    View Slide

  23. 様々な視覚障害の⾒え⽅をエミュレート(v83-)
    ▌Renderingタブ > Emulate vision deficiencies
    ▌様々な種類の視覚障害の⾒え⽅をエミュレートできる
    ▌あくまでエミュレーションなので、視覚的に近似したものを表
    ⽰してるという点を注意
    23

    View Slide

  24. Webアプリ開発編
    24

    View Slide

  25. いまどんなファイルがブラウザに読み込まれてるか知りたい
    ▌Sourcesパネル > Pageタブ
    ▌そのページが読み込んでいるリソースのツリーが表⽰される
    ▌HTMLやCSS、JavaScript、画像ファイルなど読み込んでいる
    ファイルの中⾝も確認できる
    25

    View Slide

  26. あのファイルを開きたい
    ▌Windows/Linux
    l Control + o
    ▌Mac
    l Command + o
    ▌検索窓が表⽰されるので、ファイル名を⼊⼒する
    ▌ブラウザに読み込まれているファイルにアクセスできる
    26

    View Slide

  27. いまどんなリクエストが送られているのか知りたい
    ▌Networkパネル
    ▌いまブラウザがリクエストを送信した内容が⼀覧で表⽰される
    ▌リクエストの種類やキーワードで絞り込みができる
    ▌どんなAPIが投げられているのか知りたい時によく使う
    27

    View Slide

  28. 特定のリクエストをブロックした動作を⾒たい
    ▌Networkパネル > リクエストを右クリック > Block request
    URL
    ▌ブロックするリクエストは編集可能で、ワイルドカードも利⽤
    可能
    ▌特定のリクエストが無い場合に、Webページがどうなるか確認
    したい場合など
    28

    View Slide

  29. ネットワークリクエストと同等のコードを知りたい
    ▌ 「Copy as Fetch」
    ▌ Networkパネル > リクエストを右クリック > Copy > Copy as Fetch
    ▌ ネットワークリクエストと同等のfetch()のコードを⽣成
    29

    View Slide

  30. 特定のリクエストがあった時のブレイクポイント
    ▌「 XHR/Fetch Breakpoints 」
    ▌Sourcesパネル > XHR/Fetch Breakpoints > 「+」
    ▌URLを指定して、そのURLへのリクエストを引き起こすコードに
    Breakpointsを張れる
    ▌例えば、誤ったリクエストを実⾏しているコードをすばやく⾒つける事
    ができる
    30

    View Slide

  31. 値を常に監視したい
    ▌「 Live Expressions」
    ▌Consoleパネル > Live Expressions(⽬のアイコン)
    ▌リアルタイムで指定した値を監視できる
    ▌スクロールやDOMの状態など画⾯操作中に動的に変わる値を
    リアルタイムで確認したい時に便利
    31

    View Slide

  32. CookieやLocal Storageにどんなデータが⼊っているか
    ▌Applicationパネル
    ▌Local StorageやCookieに値がちゃんと⼊っているか確認
    32

    View Slide

  33. デバッグするときにCookieやCacheを⼀括で消したい
    ▌ 「Clear Site Data」
    ▌ 実⾏したページの以下データを⼀括で削除してくれる(個別指定もできる)
    l Cookies
    l WebSQL
    l Service Workers
    l Cache Storage
    l IndexedDB
    l Local Storage
    l Application Cache
    33

    View Slide

  34. JavaScript編
    34

    View Slide

  35. ちょっとJavaScriptのコードを試したい
    ▌Consoleパネル or SourcesパネルのSnippetsタブ
    ▌Consoleで複数⾏書く場合はShift + Enterで改⾏
    ▌JavaScriptのコードを書くと実⾏結果が取得できる
    35

    View Slide

  36. DevToolsのConsoleはちょっと便利
    ▌Chrome 80からConsoleでのletは再宣⾔できる
    ▌consoleでさくっと試してるときに、「already been
    declared」って怒られるの⾟かったから嬉しい
    通常のJavaScriptだと以下のコードはエラーになる
    let x = 5;
    let x = 6;
    36

    View Slide

  37. console.logしたい
    ▌Logpoints
    ▌Sourcesパネル > ⾏番号 > 右クリック > Add logpoint
    ▌console.log()呼び出しでコードを乱雑にすることなく、
    Devtoolsからconsole.logへの出⼒を仕込むことができる
    37

    View Slide

  38. JavaScriptコードのデバッグをしたい
    ▌Sourcesパネル > ⾏番号 > クリック
    ▌ステップ実⾏などでコードがどのように動くのか、変数の中⾝
    などを確認できる
    ▌JavaScriptのコードはブラウザで実⾏しないと挙動がわからな
    いので開発中よく使う
    38

    View Slide

  39. 特定の条件でだけbreakpointを貼りたい
    ▌Conditional Breakpoint
    ▌Sourcesパネル > ⾏番号 > 右クリック > Add conditional
    breakpoint...
    ▌毎回⽌めるのは⾯倒で、特定の条件の時だけ⽌めたい場合など
    39

    View Slide

  40. 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)')
    40

    View Slide

  41. ブラウザからJavaScriptやCSSを上書きしたい
    ▌「Local Overrides」
    ▌Sourcesパネル > Overrides > Select folder for overrides
    ▌Devtools上で変更したJSやCSSをファイルとして保存しておける
    l リロードしても変更が残る
    ▌ローカルにファイルを持っていない場合や変更した内容によるリ
    ロード後の挙動を確認したい場合などに便利
    41

    View Slide

  42. JavaScriptやCSSのカバレッジを知りたい
    ▌「 Code Coverage 」
    ▌CSS/JSの使⽤されたコード/使⽤されてないコードが分かる
    ▌ページ読み込みや特定の操作を⾏った際のコードカバレッジが
    ⾒れる
    42

    View Slide

  43. パフォーマンス編
    43

    View Slide

  44. オフライン/低スペックな環境ではどんな⾵に動作するのか
    ▌オフラインでの動作を確認
    l Networkパネル > Offlineにチェック
    ▌低スペック/遅い回線での動作を確認
    l Performanceパネル > Network/CPUドロップダウン
    l 低スペック
    l Slow 3G
    l 遅い回線
    l 6x slowdown
    44

    View Slide

  45. とりあえずサイトの品質を計測してみたい
    ▌Auditパネル(v83からはLighthouceパネル)
    l LighthouseというWebアプリの品質を計測するツールを使っ
    て以下の項⽬をチェックできる
    l Performance
    l PWA
    l Best practices
    l Accessibility
    l SEO
    45

    View Slide

  46. パフォーマンスのボトルネックを探したい
    ▌Performanceパネル > Start Profiling
    ▌⾚くなっている箇所は怪しい
    l ボトルネックになる原因を教えてくれるものも
    ▌どの項⽬に時間がかかっている︖
    l Loading
    l Scripting
    l Rendering
    l Painting
    46

    View Slide

  47. その他便利な機能編
    47

    View Slide

  48. スクリーンショットが撮りたい
    ▌「Screenshots」
    ▌エリア選択
    ▌特定の要素
    ▌全画⾯
    48

    View Slide

  49. Devtoolsの拡張(ReactやRedux)
    ▌React Developer Tools
    ▌Redux DevTools
    ▌ReactやReduxといったライブラリに特化した機能をDevtoolsに
    追加できるChrome拡張があるのでおすすめ
    ▌拡張機能をインストールするとパネルが追加される
    49

    View Slide

  50. さいごに
    50

    View Slide

  51. まずは⾊々試してみる
    ▌機能が豊富過ぎて難しそうに感じるけど、まずは⾊々試してみ
    るのがおすすめ
    ▌普段から使うのは数個なので、それは使っていると⾃然に覚え

    ▌新しく知ったTipsは是⾮周りの⼈に教えてあげて
    51

    View Slide

  52. 時間があれば試してみてください(好きなサイト)
    ⾃分が好きなサイトをブラウザで開いて
    ▌⾃分が好きなサイトをブラウザで開いて
    ▌ElementパネルでDOM構造や適⽤されてるStyleを⾒る
    ▌Networkパネルでページ読み込み時にどんなリクエストが発⽣
    しているのか︖特定のリクエストはどんなリクエストで、どん
    なレスポンスが返ってきてるのか︖
    ▌Audits/Lighthouseパネルの「Generate report」ボタンでサイト
    の品質を確認
    52

    View Slide

  53. 時間があれば試してみてください(難読化されてないサイト)
    ⾃分がローカルで開発しているようなソースコードが難読化され
    ていないサイトを開く
    ▌DevTools上で特定のJSファイルを開く
    ▌任意の⾏でブレークポイントを貼って、JSの実⾏を⽌めてみる
    ▌Step overでJSの実⾏を観察してみたり、変数にどんなデータが
    ⼊っているのかを確認する
    例) https://googlechrome.github.io/devtools-
    samples/debug-js/get-started
    53

    View Slide

  54. Tools for Web Developers
    ▌公式の開発者向けドキュメント
    ▌各種機能についての詳しい説明
    ▌Tools for Web Developres > Chrome DevTools
    l https://developers.google.com/web/tools/chrome-devtools/
    54

    View Slide

  55. Devtoolsの便利な機能をもっと知りたい
    What's New In DevTools
    https://developers.google.com/web/updates
    /dev tips
    https://umaar.com/dev-tips/
    55

    View Slide