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

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

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

Cybozu

May 19, 2021
Tweet

More Decks by Cybozu

Other Decks in Programming

Transcript

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

    知っている/知ってないで大きく変わるので、知ることにフォーカスする • ターゲット • ブラウザで動くものの開発に関わっていく人 • Developer Toolsについて知りたい人 この講義について
  2. 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 • その他の便利機能 • さいごに 目次
  3. • 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
  4. • 開きたい要素やページ上で右クリック => 検証(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を開く
  5. 14 要素の確認、変更、削除、追加などができる • 要素がどのような状態かわかる • 編集や要素を追加すると、どのような見た 目になるのかわかる • ドラッグ&ドロップで移動ができる •

    コピー&ペースト可能 • Scroll into viewでDev Tool上で選択した 要素までスクロールができる • HoverやFocusの状態が作れる • Capture node screenshotで要素のスク ショが取れる
  6. 17 Elements Panelのまとめ • HTMLやCSSを確認や編集などできる • リロードすると元に戻る • 手軽に変更できるので、開発するときによくお世話になる •

    さまざな機能があるので触りながら覚えていくのがいい • 気になるサイトの構成を覗くことで勉強にもなる
  7. 21 その他 • $0で今フォーカスしている要素を取得 することができる • copy()の引数に与えたものがクリップ ボードに反映される • monitorEvents(window,"click")でク

    リックした箇所の情報を取得できる • Windowなどのグローバル状態を確認で きる • Live Expressions(目のアイコン)で指定 した値を監視できる
  8. 24 サイトの品質や課題を確認できる • LighthouseはChromeが開発している OSS • https://github.com/GoogleChrome/light house • Developer

    Toolsに組み込まれた • Generate reportをクリックすると計算 を始める • 各項目の点数と課題点が表示される • 表示されている課題を解決すれば品質向 上に繋がる
  9. 28 その他 • Add logpointを指定することで、直接 console.logを仕込める • Snippetを保存して任意のスクリプトを 実行できる •

    Overridesでローカルにあるソースコー ドを上書きできる • 詳しくはこちら • Edit files with Workspaces - Chrome Developers • https://developer.chrome.com/docs/devto ols/workspaces/
  10. 33 その他 • ファイルのフィルタリングや検索ができる • ネットワークの状態を変更することができ る • デフォルトで表示されている以外の情報も 表示できる

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

    どのリクエストに時間がかかってるか計測するときに便利 • 詳しくはここを参照 • Inspect network activity - Chrome Developers • https://developer.chrome.com/docs/devtools/network/
  12. 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/
  13. 39 メモリに関することを可視化できる • Memory Panel • メモリに関することが可視化できる • Application Panel

    • サイトのlocalStorage、cookie、cacheなどが確認できる • Security Panel • セキュリティー状態を知ることができる
  14. 45 さいごに • Developer Toolsはさまざまな機能がある • 覚えることでデバッグの効率がよくなり、開発速度が上がる • 今回紹介した機能以外にも便利な機能はたくさんある •

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