Upgrade to Pro — share decks privately, control downloads, hide ads and more …

JavaScriptersが知って得するChrome DevTools

JavaScriptersが知って得するChrome DevTools

We Are JavaScripters! @28th LT

Toshihisa Tomatsu

January 25, 2019
Tweet

More Decks by Toshihisa Tomatsu

Other Decks in Technology

Transcript

  1. Chrome DevTools • Google Chrome に組み込まれている「Chrome DevTools」のTipsを紹介 • Web開発を行う上で便利な機能がたくさん実装されている •

    使いこなすとDX(Developer Experience)が爆上げする • 開発者向けに毎日更新されるChrome Canaryを使えば最新の機能を使える ◦ Stable: v71(2019/1/25 時点) ◦ Canary: v73(2019/1/25 時点) 3
  2. ② Conditional Breakpoint • Sourcesパネル > 行番号 > 右クリック >

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

    logpoint • console.log()呼び出しでコードを乱雑にすることなく、Devtoolsから console.logへの出力を仕込むことができる • Conditional Breakpointでconsole.logを仕込まなくてよくなる • Chrome v73から利用可能 7
  4. ④ Local Overrides • Sourcesパネル > Overrides > Select folder

    for overrides • Devtools上で変更したJSやCSSをファイルとして保存しておける ◦ リロードしても変更が残る • ローカルにファイルを持っていない場合や変更した内容によるリロード後の挙 動を確認したい場合などに便利 8
  5. ⑥ Live Expressions • Consoleパネル > 目のアイコン • リアルタイムで指定した値を監視できる •

    スクロールやDOMの状態など画面操作中にリアルタイムな値を確認したい時 に便利 10
  6. ⑦ 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
  7. ⑧ 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
  8. ⑨ XHR/Fetch Breakpoints • Sourcesパネル > XHR/Fetch Breakpoints > 「+」

    • URLを指定して、そのURLへのリクエストを引き起こすコードにBreakpointsを 張れる • 例えば、誤ったリクエストを実行しているコードをすばやく見つける事ができる 13
  9. 紹介できなかった機能 • 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
  10. 参考リンク • 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