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
290
意外に知らないnpmと便利なCLI
10shi10ma
8
2.3k
歴史から学ぶ現代のフロントエンド
10shi10ma
17
11k
サイボウズ フロントエンドエキスパートチームとOSSの管理について
10shi10ma
0
1.1k
大規模フロントエンドの技術的負債と向き合う。
10shi10ma
5
5.8k
Google I/O ’19から見る新しいJavaScript
10shi10ma
5
3k
React+Storybook ことはじめ
10shi10ma
8
2.5k
Other Decks in Technology
See All in Technology
初めてのPostgreSQLメジャーバージョンアップ
kkato1
0
440
Tirez profit de Messenger pour améliorer votre architecture
tucksaun
1
150
Agile TPIを活用した品質改善事例
tomasagi
0
340
30代エンジニアが考える、エンジニア生存戦略~~セキュリティを添えて~~
masakiokuda
4
2k
どっちの API SHOW?SharePoint 開発における SharePoint REST API Microsoft Graph API の違い / Which API show? Differences between Microsoft Graph API and SharePoint REST API
karamem0
0
110
Multitenant 23ai の全貌 - 機能・設計・実装・運用からマイクロサービスまで
oracle4engineer
PRO
2
120
Amazon GuardDuty Malware Protection for Amazon S3を使おう
ryder472
2
110
Amazon EKS Auto ModeでKubernetesの運用をシンプルにする
sshota0809
0
110
ISUCONにPHPで挑み続けてできるようになっ(てき)たこと / phperkaigi2025
blue_goheimochi
0
140
Go製のマイグレーションツールの git-schemalex の紹介と運用方法
shinnosuke_kishida
1
410
移行できそうでやりきれなかった 10年超えのシステムを葬るための戦略
ryu955
2
490
20250328_OpenAI製DeepResearchは既に一種のAGIだと思う話
doradora09
PRO
0
150
Featured
See All Featured
The Language of Interfaces
destraynor
157
24k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
356
30k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
31
4.8k
Facilitating Awesome Meetings
lara
53
6.3k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
51
2.4k
Building a Modern Day E-commerce SEO Strategy
aleyda
39
7.2k
RailsConf 2023
tenderlove
29
1k
GraphQLとの向き合い方2022年版
quramy
45
14k
Art, The Web, and Tiny UX
lynnandtonic
298
20k
Become a Pro
speakerdeck
PRO
27
5.2k
Statistics for Hackers
jakevdp
798
220k
Mobile First: as difficult as doing things right
swwweet
223
9.5k
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