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

2019-09 Chrome Developer Toolsの使い方/2019-09 How to use Chrome DevTools

2019-09 Chrome Developer Toolsの使い方/2019-09 How to use Chrome DevTools

Cybozu
PRO

June 13, 2019
Tweet

More Decks by Cybozu

Other Decks in Technology

Transcript

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

  2. この講義について ▌【概要】 l Webの開発に関わっていくうえで無くてはならない「Chrome Developer Tools」についての講義です。 l 全体の使い⽅や今後の開発に役⽴つ機能を紹介します。 l 知っている/知ってないで⼤きく変わるので、知るにフォーカス

    ▌【ターゲット】 l ブラウザで動くものの開発に関わっていく⼈ l Developer ToolsはElementパネルくらいしか知らない⼈
  3. ⽬次 ▌Chrome Developer Toolsについて/全体像/各パネルについて ▌困った時は編 ▌UI/デザイン編 ▌Webアプリ開発編 ▌JavaScript編 ▌パフォーマンス編 ▌その他便利な機能編

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

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

  6. Developer Tools ▌もちろんSafariやFirefoxなどのブラウザにもDeveloper Toolsはある ▌各ブラウザによってできることが若⼲違う ▌ChromeのDeveloper Toolsが機能が豊富で⼈気 ▌例) l Firefox

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

  8. ChromeのバージョンとCanary ▌開発者向けに毎⽇更新されるChrome Canaryを使えば最新の機 能を使える l https://www.google.com/intl/ja/chrome/canary/ Stable v75 Canary v77

  9. Developer Toolsを起動してみる ▌Mac l Command + option + i or

    F12 ▌Windows/Linux l Ctrl + Shift + i or F12 ▌右クリック→検証
  10. パネル切り替え

  11. まずはいくつかデモを⾒せます ▌DOMの操作やデザイン調整 ▌CSSの確認 ▌モバイルでのデザインチェック ▌JavaScriptを試す ▌ネットワークリクエストの調査 ▌パフォーマンスの計測

  12. よく使うパネル ▌Elements l DOMツリーやCSSのスタイルについて知りたい時など主にUI/デ ザイン周り ▌Console l JavaScriptコードを試したり、Logを出⼒して情報を収集 ▌Sources l

    JavaScriptコードのデバッグ ▌Network l APIやJSや画像ファイルなどのリクエストを知る
  13. 困った時は編

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

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

  16. UI/デザイン編

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

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

  19. モバイル・レスポンシブ対応のチェック ▌Elementsパネル左のDevice Modeボタン ▌モバイル時の表⽰やレスポンシブに画⾯サイズを切り替えれる

  20. DOM要素の調整 ▌Elementsパネル > DOMツリー ▌表⽰されているDOM要素はドラッグ&ドロップで移動できる

  21. Webアプリ開発編

  22. いまどんなファイルがブラウザに読み込まれてるか知りたい ▌Sourcesパネル > Page ▌HTMLやCSS、JavaScript、画像ファイルなど読み込んでいる ファイルを確認できる

  23. あのファイルを開きたい ▌Windows/Linux l Control + o ▌Mac l Command +

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

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

    Copy > Copy as Fetch ▌ ネットワークリクエストと同等のfetch()のコードを⽣成 ▌ 例) l fetch("https://ssl.gstatic.com/gb/images/i1_1967ca6a.png", {"credentials":"omit","referrer":"https://www.google.co.jp/","referrerPolicy":"origin","body":null," method":"GET","mode":"cors"});
  26. 特定のリクエストがあった時のブレイクポイント ▌「 XHR/Fetch Breakpoints 」 ▌Sourcesパネル > XHR/Fetch Breakpoints >

    「+」 ▌URLを指定して、そのURLへのリクエストを引き起こすコードに Breakpointsを張れる ▌例えば、誤ったリクエストを実⾏しているコードをすばやく⾒つける事 ができる
  27. 値を常に監視したい ▌「 Live Expressions」 ▌Consoleパネル > ⽬のアイコン ▌リアルタイムで指定した値を監視できる ▌スクロールやDOMの状態など画⾯操作中に動的に変わる値を リアルタイムで確認したい時に便利

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

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

    Service Workers l Cache Storage l IndexedDB l Local Storage l Application Cache
  30. JavaScript編

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

  32. console.logしたい ▌Logpoints ▌Sourcesパネル > ⾏番号 > 右クリック > Add logpoint

    ▌console.log()呼び出しでコードを乱雑にすることなく、 Devtoolsからconsole.logへの出⼒を仕込むことができる
  33. JavaScriptコードのデバッグをしたい ▌Sourcesパネル > ⾏番号 > クリック ▌ステップ実⾏などでコードがどのように動くのか、変数の中⾝ などを確認できる ▌JavaScriptのコードはブラウザで実⾏しないと挙動がわからな いので開発中よく使う

  34. 特定の条件でだけbreakpointを貼りたい ▌Conditional Breakpoint ▌Sourcesパネル > ⾏番号 > 右クリック > Add

    conditional breakpoint... ▌毎回⽌めるのは⾯倒で、特定の条件の時だけ⽌めたい場合など
  35. 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)')
  36. ブラウザからJavaScriptやCSSを上書きしたい ▌「Local Overrides」 ▌Sourcesパネル > Overrides > Select folder for

    overrides ▌Devtools上で変更したJSやCSSをファイルとして保存しておける l リロードしても変更が残る ▌ローカルにファイルを持っていない場合や変更した内容によるリ ロード後の挙動を確認したい場合などに便利
  37. JavaScriptやCSSのカバレッジを知りたい ▌「 Code Coverage 」 ▌CSS/JSの使⽤されたコード/使⽤されてないコードが分かる ▌ページ読み込みや特定の操作を⾏った際のコードカバレッジが ⾒れる

  38. パフォーマンス編

  39. オフライン/低スペックな環境ではどんな⾵に動作するのか ▌オフラインでの動作を確認 l Networkパネル > Offlineにチェック ▌低スペック/遅い回線での動作を確認 l Performanceパネル >

    Network/CPUドロップダウン l 低スペック l Slow 3G l 遅い回線 l 6x slowdown
  40. とりあえずパフォーマンスを計測してみたい ▌Auditsパネル l LighthouseというWebアプリの品質を計測するツールを使っ て以下の項⽬をチェックできる l Performance l PWA l

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

    Loading l Scripting l Rendering l Painting
  42. その他便利な機能編

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

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

  45. さいごに

  46. まずは⾊々試してみる ▌機能が豊富過ぎて難しそうに感じるけど、まずは⾊々試してみ るのがおすすめ ▌普段から使うのは数個なので、それは使っていると⾃然に覚え る ▌新しく知ったTipsは是⾮周りの⼈に教えてあげて

  47. Tools for Web Developers ▌公式の開発者向けドキュメント ▌Tools for Web Developres >

    Chrome DevTools ▌各種機能についての詳しい説明 ▌https://developers.google.com/web/tools/chrome-devtools/
  48. Devtoolsの便利な機能をもっと知りたい What's New In DevTools /dev tips https://developers.google.com/web/updates/2019/ 01/devtools https://umaar.com/dev-tips/