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.2k
Service Workerとブラウザでの通知について
10shi10ma
3
320
意外に知らない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
ソフトウェア開発プロジェクトでの品質管理への提案(温故知新)
yohwada
0
100
相互運用可能な学修歴クレデンシャルに向けた標準技術と国際動向
fujie
0
200
Kiroから考える AIコーディングツールの潮流
s4yuba
4
630
AI時代の経営、Bet AI Vision #BetAIDay
layerx
PRO
1
1.6k
多様なニーズに応える Movable Type ラインナップ 全紹介
masakah
0
120
「育てる」サーバーレス 〜チーム開発研修で学んだ、小さく始めて大きく拡張するAWS設計〜
yu_kod
1
240
バクラクによるコーポレート業務の自動運転 #BetAIDay
layerx
PRO
1
800
マルチモーダル基盤モデルに基づく動画と音の解析技術
lycorptech_jp
PRO
4
470
Gemini in Android Studio - Google I/O Bangkok '25
akexorcist
0
180
Kiroでインフラ要件定義~テスト を実施してみた
nagisa53
3
280
OPENLOGI Company Profile for engineer
hr01
1
37k
alecthomas/kong はいいぞ
fujiwara3
6
1.3k
Featured
See All Featured
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
26
3k
The Cult of Friendly URLs
andyhume
79
6.5k
Typedesign – Prime Four
hannesfritz
42
2.7k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
194
16k
Reflections from 52 weeks, 52 projects
jeffersonlam
351
21k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
656
60k
RailsConf 2023
tenderlove
30
1.2k
How To Stay Up To Date on Web Technology
chriscoyier
790
250k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
53
2.9k
The Pragmatic Product Professional
lauravandoore
36
6.8k
Making the Leap to Tech Lead
cromwellryan
134
9.5k
Gamification - CAS2011
davidbonilla
81
5.4k
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