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.4k
歴史から学ぶ現代のフロントエンド
10shi10ma
17
11k
サイボウズ フロントエンドエキスパートチームとOSSの管理について
10shi10ma
0
1.1k
大規模フロントエンドの技術的負債と向き合う。
10shi10ma
5
5.9k
Google I/O ’19から見る新しいJavaScript
10shi10ma
5
3.1k
React+Storybook ことはじめ
10shi10ma
8
2.5k
Other Decks in Technology
See All in Technology
イオン店舗一覧ページのパフォーマンスチューニング事例 / Performance tuning example for AEON store list page
aeonpeople
1
210
AIが住民向けコンシェルジュに?Amazon Connectと生成AIで実現する自治体AIエージェント!
yuyeah
0
260
生成AI利用プログラミング:誰でもプログラムが書けると 世の中どうなる?/opencampus202508
okana2ki
0
190
Autonomous Database Serverless 技術詳細 / adb-s_technical_detail_jp
oracle4engineer
PRO
18
52k
Evolution on AI Agent and Beyond - AGI への道のりと、シンギュラリティの3つのシナリオ
masayamoriofficial
0
130
OCI Bastionサービス
oracle4engineer
PRO
1
130
生成AI活用のROI、どう測る? DMM.com 開発責任者から学ぶ「AI効果検証のノウハウ」 / ROI of AI
i35_267
4
150
Backboneとしてのtimm2025
yu4u
3
1.3k
Claude Code x Androidアプリ 開発
kgmyshin
1
530
Rethinking Incident Response: Context-Aware AI in Practice - Incident Buddy Edition -
rrreeeyyy
0
130
Goss: Faiss向けの新しい本番環境対応 Goバインディング #coefl_go_jp
bengo4com
0
1.1k
OpenAPIから画面生成に挑戦した話
koinunopochi
0
140
Featured
See All Featured
Navigating Team Friction
lara
188
15k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
333
22k
GitHub's CSS Performance
jonrohan
1031
460k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
9
780
Building Flexible Design Systems
yeseniaperezcruz
328
39k
The Cost Of JavaScript in 2023
addyosmani
53
8.8k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
8
890
Become a Pro
speakerdeck
PRO
29
5.5k
Embracing the Ebb and Flow
colly
87
4.8k
Measuring & Analyzing Core Web Vitals
bluesmoon
9
560
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
234
17k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
26
3k
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