JavaScriptersが知って得する Chrome DevTools We Are JavaScripters! @28th

About me @toshi-toma @toshi__toma Toshihisa Tomatsu 2

Chrome DevTools ● Google Chrome に組み込まれている「Chrome DevTools」のTipsを紹介 ● Web開発を行う上で便利な機能がたくさん実装されている ● 使いこなすとDX(Developer Experience)が爆上げする ● 開発者向けに毎日更新されるChrome Canaryを使えば最新の機能を使える ○ Stable: v71(2019/1/25 時点) ○ Canary: v73(2019/1/25 時点) 3

で開発をするうえでのTipsをいくつか紹介 Java Script 4

① Command Menu ● Cmd/Ctrl+Shift+P でコマンドメニューを表示できる ● 以降のスライドで紹介する機能は一部デフォルトで表示されないパネルがある ので、コマンドメニューを利用すると便利 5

② Conditional Breakpoint ● Sourcesパネル > 行番号 > 右クリック > Add conditional breakpoint... ● 条件付きのbreakpointが張れる ● 毎回止めるのは面倒で、特定の条件の時だけ止めたい場合など ● この機能を使えば、console.log()をDevtoolsから仕込むことも可能 6

③ Logpoints ● Sourcesパネル > 行番号 > 右クリック > Add logpoint ● console.log()呼び出しでコードを乱雑にすることなく、Devtoolsから console.logへの出力を仕込むことができる ● Conditional Breakpointでconsole.logを仕込まなくてよくなる ● Chrome v73から利用可能 7

④ Local Overrides ● Sourcesパネル > Overrides > Select folder for overrides ● Devtools上で変更したJSやCSSをファイルとして保存しておける ○ リロードしても変更が残る ● ローカルにファイルを持っていない場合や変更した内容によるリロード後の挙 動を確認したい場合などに便利 8

⑤ Code Coverage ● Coverageパネル ● CSS/JSの使用されたコード/使用されてないコードが分かる ● ページ読み込みや特定の操作を行った際のコードカバレッジが見れる 9

⑥ Live Expressions ● Consoleパネル > 目のアイコン ● リアルタイムで指定した値を監視できる ● スクロールやDOMの状態など画面操作中にリアルタイムな値を確認したい時 に便利 10

⑦ Copy JS Path ● Elementsパネル > DOM要素を右クリック > Copy > Copy JS Path ● DOMノードへのJSによる参照を取得できる ○ Shadow DOMも対応 ● 例) ○ document.querySelector ('body > label:nth-child(2)') ○ document.querySelector('#demo1') .shadowRoot .querySelector('p:nth-child(2)') ● Chrome v72から利用可能 11

⑧ Copy as Fetch ● Networkパネル > リクエストを右クリック > Copy > Copy as Fetch ● ネットワークリクエストと同等のfetch()のコードを生成 ● 例） ○ fetch("https://preload.glitch.me/styles.css", { "credentials": "omit", "headers": {}, "referrer": "https://preload.glitch.me/after/", "referrerPolicy": "no-referrer-when-downgrade", "body": null, "method": "GET", "mode": "cors" }); 12

⑨ XHR/Fetch Breakpoints ● Sourcesパネル > XHR/Fetch Breakpoints > 「+」 ● URLを指定して、そのURLへのリクエストを引き起こすコードにBreakpointsを 張れる ● 例えば、誤ったリクエストを実行しているコードをすばやく見つける事ができる 13

紹介できなかった機能 ● Blackbox Chrome Extension Scripts: Chrome拡張のコードでデバックし辛くなるのを防ぐ https://developers.google.com/web/tools/chrome-devtools/javascript/guides/blackbox-chrome-extension-scripts ● Console Utilities API Reference: console: パネルから利用できる便利なAPI https://developers.google.com/web/tools/chrome-devtools/console/utilities ● Chrome DevTools で JavaScript をデバッグする https://developers.google.com/web/tools/chrome-devtools/javascript/ ● Performanceパネルでパフォーマンスのボトルネックを見つける https://developers.google.com/web/tools/chrome-devtools/evaluate-performance/ ● オブジェクト/DOM要素に登録されているイベント リスナーの表示 https://developers.google.com/web/tools/chrome-devtools/console/events ● Watch variables in Sources: デバック時に特定の変数を監視 https://developers.google.com/web/tools/chrome-devtools/javascript/watch-variables 14

https://umaar.com/dev-tips/ /dev tips What's New In DevTools https://developers.google.com/web/updates /2019/01/devtools DevToolsの機能を知る 15

Thanks!! 16

参考リンク ● Chrome DevTools https://developers.google.com/web/tools/chrome-devtools/ ● Chrome DevTools: The five most popular DevTools tips from 2018 https://umaar.com/dev-tips/190-five-popular-2018-tip ● /dev tips https://umaar.com/dev-tips/ ● Web制作にすぐに役立つ、Chrome デベロッパーツールの便利な機能・使い方のまとめ https://coliss.com/articles/build-websites/operation/work/chrome-devtools-tips-and-tricks.html ● Chrome DevToolsを使いこなそう！ Web開発に必須なブラウザ開発ツールによるデバッグの基本 https://employment.en-japan.com/engineerhub/entry/2017/05/30/110000 ● Chrome DevTools の 10 年の歩み https://developers-jp.googleblog.com/2018/11/10-years-of-chrome-devtools.html 17