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.9k
フロントエンドのエコシステム / 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
君はPostScriptなウィンドウシステム 「NeWS」をご存知か?/sunnews
koyhoge
0
720
7日間でハッキングをはじめる本をはじめてみませんか?_ITエンジニア本大賞2025
nomizone
2
1.4k
WAF に頼りすぎない AWS WAF 運用術 meguro sec #1
izzii
0
460
リアルタイム分析データベースで実現する SQLベースのオブザーバビリティ
mikimatsumoto
0
950
まだ間に合う! エンジニアのための生成AIアプリ開発入門 on AWS
minorun365
PRO
4
580
Moved to https://speakerdeck.com/toshihue/presales-engineer-career-bridging-tech-biz-ja
toshihue
2
550
Fintech SREの挑戦 PCI DSS対応をスマートにこなすインフラ戦略/Fintech SRE’s Challenge: Smart Infrastructure Strategies for PCI DSS Compliance
maaaato
0
450
技術的負債解消の取り組みと専門チームのお話 #技術的負債_Findy
bengo4com
1
1.2k
Nekko Cloud、 これまでとこれから ~学生サークルが作る、 小さなクラウド
logica0419
2
730
SCSAから学ぶセキュリティ管理
masakamayama
0
140
技術負債の「予兆検知」と「状況異変」のススメ / Technology Dept
i35_267
1
1k
モノレポ開発のエラー、誰が見る?Datadog で実現する適切なトリアージとエスカレーション
biwashi
6
770
Featured
See All Featured
Why You Should Never Use an ORM
jnunemaker
PRO
55
9.2k
Raft: Consensus for Rubyists
vanstee
137
6.8k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
7
630
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
44
7k
Building a Modern Day E-commerce SEO Strategy
aleyda
38
7.1k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
29
1k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
28
9.3k
Fireside Chat
paigeccino
34
3.2k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
49
2.3k
Visualization
eitanlees
146
15k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
248
1.3M
The Cult of Friendly URLs
andyhume
78
6.2k
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