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

開運研修_2020Chrome Developer_Toolsの使い方 / How_to_us...

Cybozu
August 19, 2020

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

Cybozu

August 19, 2020
Tweet

More Decks by Cybozu

Other Decks in Technology

Transcript

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

    知っている/知ってないで⼤きく変わるので、知るにフォーカス ▌ 【ターゲット】 l ブラウザで動くものの開発に関わっていく⼈ l Developer ToolsはElementパネルくらいしか知らない⼈ 2
  2. Developer Toolsを起動してみよう ▌Mac l Command + option + i or

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

    o ▌検索窓が表⽰されるので、ファイル名を⼊⼒する ▌ブラウザに読み込まれているファイルにアクセスできる 26
  4. ネットワークリクエストと同等のコードを知りたい ▌ 「Copy as Fetch」 ▌ Networkパネル > リクエストを右クリック >

    Copy > Copy as Fetch ▌ ネットワークリクエストと同等のfetch()のコードを⽣成 29
  5. 特定のリクエストがあった時のブレイクポイント ▌「 XHR/Fetch Breakpoints 」 ▌Sourcesパネル > XHR/Fetch Breakpoints >

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

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

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

    overrides ▌Devtools上で変更したJSやCSSをファイルとして保存しておける l リロードしても変更が残る ▌ローカルにファイルを持っていない場合や変更した内容によるリ ロード後の挙動を確認したい場合などに便利 41