Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
JavaScriptersが知って得するChrome DevTools
Search
Toshihisa Tomatsu
January 25, 2019
Technology
5
1.1k
JavaScriptersが知って得するChrome DevTools
We Are JavaScripters! @28th LT
Toshihisa Tomatsu
January 25, 2019
Tweet
Share
More Decks by Toshihisa Tomatsu
See All by Toshihisa Tomatsu
Service Workerとは、それを使ってできること / what-is-service-worker
10shi10ma
3
1.8k
フロントエンドのエコシステム / Frontend Ecosystem
10shi10ma
8
3.1k
Service Workerとブラウザでの通知について
10shi10ma
3
280
意外に知らないnpmと便利なCLI
10shi10ma
8
2.3k
歴史から学ぶ現代のフロントエンド
10shi10ma
17
11k
サイボウズ フロントエンドエキスパートチームとOSSの管理について
10shi10ma
0
1k
大規模フロントエンドの技術的負債と向き合う。
10shi10ma
5
5.7k
Google I/O ’19から見る新しいJavaScript
10shi10ma
5
3k
React+Storybook ことはじめ
10shi10ma
8
2.4k
Other Decks in Technology
See All in Technology
Server Side Swift 実践レポート: 2024年に案件で採用して見えた課題と可能性
yusuga
2
450
Women in Agile
kawaguti
PRO
3
180
プロダクト価値を引き上げる、「課題の再定義」という習慣
moeka__c
0
220
talk_about_wasmwasi
junkishigaki
0
100
プロダクト観点で考えるデータ基盤の育成戦略 / Growth Strategy of Data Analytics Platforms from a Product Perspective
yamamotoyuta
0
400
The 5 Obstacles to Empowered Teams - Twice the Value in Half the Time
mdalmijn
0
180
20250129 Findy_テスト高活用化
dshirae
0
240
クラウドネイティブ時代を乗り越えるためのオブザーバビリティ(可観測性)ことはじめ_CloudNative-Observability
tkhresk
0
110
カスタムインストラクションでGitHub Copilotをカスタマイズ!
07jp27
8
1.5k
[JAWS-UG栃木]地方だからできたクラウドネイティブ事例大公開! / jawsug_tochigi_tachibana
biatunky
0
170
Amazon Location Serviceを使ってラーメンマップを作る
ryder472
2
170
生成AIの利活用を加速させるための取り組み「prAIrie-dog」/ Shibuya_AI_1
visional_engineering_and_design
1
110
Featured
See All Featured
For a Future-Friendly Web
brad_frost
176
9.5k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
3
290
How GitHub (no longer) Works
holman
313
140k
Side Projects
sachag
452
42k
Writing Fast Ruby
sferik
628
61k
Visualization
eitanlees
146
15k
The World Runs on Bad Software
bkeepers
PRO
67
11k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.4k
Intergalactic Javascript Robots from Outer Space
tanoku
270
27k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
39
1.9k
Automating Front-end Workflow
addyosmani
1367
200k
Become a Pro
speakerdeck
PRO
26
5.1k
Transcript
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