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

2019-09 Chrome Developer Toolsの使い方/2019-09 How ...

Cybozu
June 13, 2019

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

Cybozu

June 13, 2019
Tweet

More Decks by Cybozu

Other Decks in Technology

Transcript

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

    F12 ▌Windows/Linux l Ctrl + Shift + i or F12 ▌右クリック→検証
  2. あのファイルを開きたい ▌Windows/Linux l Control + o ▌Mac l Command +

    o ▌ブラウザに読み込まれているファイルにアクセスできる
  3. ネットワークリクエストと同等のコードを知りたい ▌ 「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"});
  4. 特定のリクエストがあった時のブレイクポイント ▌「 XHR/Fetch Breakpoints 」 ▌Sourcesパネル > XHR/Fetch Breakpoints >

    「+」 ▌URLを指定して、そのURLへのリクエストを引き起こすコードに Breakpointsを張れる ▌例えば、誤ったリクエストを実⾏しているコードをすばやく⾒つける事 ができる
  5. console.logしたい ▌Logpoints ▌Sourcesパネル > ⾏番号 > 右クリック > Add logpoint

    ▌console.log()呼び出しでコードを乱雑にすることなく、 Devtoolsからconsole.logへの出⼒を仕込むことができる
  6. 特定の条件でだけbreakpointを貼りたい ▌Conditional Breakpoint ▌Sourcesパネル > ⾏番号 > 右クリック > Add

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

    overrides ▌Devtools上で変更したJSやCSSをファイルとして保存しておける l リロードしても変更が残る ▌ローカルにファイルを持っていない場合や変更した内容によるリ ロード後の挙動を確認したい場合などに便利
  9. Tools for Web Developers ▌公式の開発者向けドキュメント ▌Tools for Web Developres >

    Chrome DevTools ▌各種機能についての詳しい説明 ▌https://developers.google.com/web/tools/chrome-devtools/