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

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