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

Transcript

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

   View Slide

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

   View Slide

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

   View Slide

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
   • その他の便利機能
   • さいごに
   目次
   

   View Slide

5. Chrome Developer Toolsについて
   

   View Slide

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

   View Slide

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

   View Slide

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
   

   View Slide

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を開く
   

   View Slide

10. Chrome Developer ToolsのPanel
    

    View Slide

11. 11
    Chrome Developer ToolsのPanel
    

    View Slide

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

    View Slide

13. Elements Panel
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

18. Console Panel
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

23. Lighthouse Panel
    

    View Slide

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

    View Slide

25. Source Panel
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

30. Network Panel
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

35. Performance Panel
    

    View Slide

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

    View Slide

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/
    

    View Slide

38. その他のPanel
    

    View Slide

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

    View Slide

40. その他の便利機能
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

44. さいごに
    

    View Slide

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

    View Slide