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
開運研修_2020Chrome Developer_Toolsの使い方 / How_to_us...
Search
Cybozu
PRO
August 19, 2020
Technology
5
60k
開運研修_2020Chrome Developer_Toolsの使い方 / How_to_use_Chrome_Developer_Tools_Training_2020
Cybozu
PRO
August 19, 2020
Tweet
Share
More Decks by Cybozu
See All by Cybozu
サイボウズ 開発本部採用ピッチ / Cybozu Engineer Recruit
cybozuinsideout
PRO
9
45k
テクニカルライティング
cybozuinsideout
PRO
4
300
サイボウズのアジャイルクオリティ2024
cybozuinsideout
PRO
3
260
モブに早く慣れたい人のためのガイド2024
cybozuinsideout
PRO
3
360
モバイル
cybozuinsideout
PRO
3
180
ソフトウェアライセンス
cybozuinsideout
PRO
4
160
ソフトウェアテスト
cybozuinsideout
PRO
3
260
自動テスト
cybozuinsideout
PRO
3
270
Docker入門2024
cybozuinsideout
PRO
3
450
Other Decks in Technology
See All in Technology
10XにおけるData Contractの導入について: Data Contract事例共有会
10xinc
5
590
Terraform CI/CD パイプラインにおける AWS CodeCommit の代替手段
hiyanger
1
240
Terraform未経験の御様に対してどの ように導⼊を進めていったか
tkikuchi
2
430
Amplify Gen2 Deep Dive / バックエンドの型をいかにしてフロントエンドへ伝えるか #TSKaigi #TSKaigiKansai #AWSAmplifyJP
tacck
PRO
0
370
【若手エンジニア応援LT会】ソフトウェアを学んできた私がインフラエンジニアを目指した理由
kazushi_ohata
0
150
20241120_JAWS_東京_ランチタイムLT#17_AWS認定全冠の先へ
tsumita
2
240
障害対応指揮の意思決定と情報共有における価値観 / Waroom Meetup #2
arthur1
5
470
Can We Measure Developer Productivity?
ewolff
1
150
スクラム成熟度セルフチェックツールを作って得た学びとその活用法
coincheck_recruit
1
140
AIチャットボット開発への生成AI活用
ryomrt
0
170
SREによる隣接領域への越境とその先の信頼性
shonansurvivors
2
510
Why does continuous profiling matter to developers? #appdevelopercon
salaboy
0
180
Featured
See All Featured
Fontdeck: Realign not Redesign
paulrobertlloyd
82
5.2k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
44
2.2k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
27
840
Put a Button on it: Removing Barriers to Going Fast.
kastner
59
3.5k
RailsConf 2023
tenderlove
29
900
Adopting Sorbet at Scale
ufuk
73
9.1k
The Straight Up "How To Draw Better" Workshop
denniskardys
232
140k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
44
6.8k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
28
2k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
226
22k
Speed Design
sergeychernyshev
24
610
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
27
4.3k
Transcript
開運研修 2020 Chrome Developer Toolsの使い⽅ 2020/5/14 フロントエンドエキスパートチーム 外松 俊尚
この講義について ▌ 【概要】 l Webの開発に関わっていくうえで無くてはならない「Developer Tools」につ いての講義です。Chromeをベースに紹介。 l 全体の使い⽅や今後の開発に役⽴つ機能を紹介します。 l
知っている/知ってないで⼤きく変わるので、知るにフォーカス ▌ 【ターゲット】 l ブラウザで動くものの開発に関わっていく⼈ l Developer ToolsはElementパネルくらいしか知らない⼈ 2
⽬次 ▌Chrome Developer Toolsについて/全体像/各パネルについて ▌困った時は編 ▌UI/デザイン編 ▌Webアプリ開発編 ▌JavaScript編 ▌パフォーマンス編 ▌その他便利な機能編
3
Chrome Developer Toolsについて/全体像 /各パネルについて 4
Chrome Developer Tools ▌Google Chromeに組み込まれた開発者向けツール ▌Web開発を⾏う上で便利な機能がたくさん実装されている ▌使いこなすとDX(Developer Experience)が爆上げする 5
https://cybozu.co.jpにアクセスするとブラウザは︖ ▌HTMLやCSS, JavaScript, 画像などのリソースをサーバーから取 得 ▌取得したリソースのパースから始まりブラウザがWebページを 表⽰する ▌その他にも、StorageやCacheなどWebの技術を使うはず 6
Developer ToolsはブラウザがWebページを表⽰する上での、 様々な情報を確認、変更することができる 7
Developer Toolsを使うタイミング(経験談) ▌JavaScriptのコードをちょっと試してみたい ▌⾃分が書いたJavaScriptコードのデバッグ ▌画⾯のデザインの調整/表⽰が崩れた時の調査 ▌いまどんなCSSが適⽤されているか調べる ▌Webアプリ開発中、いまどんなAPIが叩かれているのか調べる ▌パフォーマンスのボトルネックを探す ▌etc… 8
Developer Toolsを起動してみよう ▌Mac l Command + option + i or
F12 ▌Windows/Linux l Ctrl + Shift + i or F12 ▌右クリック→検証 9
Chrome以外のDeveloper Toolsは︖ ▌もちろんSafariやFirefoxなどのブラウザにもDeveloper Toolsはある ▌各ブラウザによってできることが若⼲違う ▌ChromeのDeveloper Toolsが機能が豊富で⼈気な印象 ▌例) l Firefox
l CSS Flexboxのレイアウトを調べられるFlexBox Inspector l Safari l html Canvasについて調べられるCanvas Debugging 10
細かい機能の差異はあるけど、主に使う機能は、どのブラウザ でも可能。 今⽇知る内容は、Chrome以外のブラウザユーザーでも約に⽴ つはず 11
ChromeのバージョンとCanary ▌開発者向けに毎⽇更新されるChrome Canaryを使えば最新の 機能を使える ▌https://www.google.com/intl/ja/chrome/canary/ Stable v81 Canary v84 12
2020/5/14時点
基本機能はパネルを切り替えて使います パネルを切り替える 13
よく使うパネル ▌Elements l DOMツリーやCSSのスタイルについて知りたい時など主にUI/デザイン 周り ▌Console l JavaScriptコードを試したり、ログを出⼒して情報を収集 ▌Sources l
JavaScriptコードのデバッグ ▌Network l APIやJSや画像ファイルなどのリクエストを知る 14
困った時は編 15
各機能が⾒つけられない ▌「Command Menu」 ▌Cmd/Ctrl+Shift+pでコマンドメニューを表⽰できる ▌以降のスライドで紹介する機能は⼀部デフォルトで表⽰されな いパネルがあるので、コマンドメニューを利⽤すると便利 16
なんかいろいろ編集しちゃって戻したい ▌リロードしてください ▌DevTools上の変更はリロードするとリセットされます 17
UI/デザイン編 18
いま適⽤されているCSSを調べたい ▌Elementsパネル > StylesやCommuted ▌⾒たいUIにフォーカスを当てると適⽤されているCSSがStylesに表⽰ される ▌適⽤されているスタイルを⼀覧で⾒たい場合はComputedを⾒る ▌値を変更すると画⾯に反映される 19
要素をホバーされている状態にしておきたい ▌Elementsパネル > Styles > :hover ▌適⽤したい状態にチェックを⼊れると、要素がその状態になる ▌hover時のスタイルや挙動を確認したい時に便利 20
モバイル・レスポンシブ対応のチェック ▌Elementパネルなどの機能⼀覧にあるDevice Modeボタン ▌モバイル時の表⽰やレスポンシブに画⾯サイズを切り替えれる 21
DOM要素の調整 ▌Elementsパネル > DOMツリー l 表⽰されているDOM要素はドラッグ&ドロップで移動できる ▌Document.designMode l Consoleパネルで「document.designMode =
“on”;」と⼊⼒ l ⽂書全体が編集可能になるので、ちょっとした修正をする ときに便利かも 22
様々な視覚障害の⾒え⽅をエミュレート(v83-) ▌Renderingタブ > Emulate vision deficiencies ▌様々な種類の視覚障害の⾒え⽅をエミュレートできる ▌あくまでエミュレーションなので、視覚的に近似したものを表 ⽰してるという点を注意 23
Webアプリ開発編 24
いまどんなファイルがブラウザに読み込まれてるか知りたい ▌Sourcesパネル > Pageタブ ▌そのページが読み込んでいるリソースのツリーが表⽰される ▌HTMLやCSS、JavaScript、画像ファイルなど読み込んでいる ファイルの中⾝も確認できる 25
あのファイルを開きたい ▌Windows/Linux l Control + o ▌Mac l Command +
o ▌検索窓が表⽰されるので、ファイル名を⼊⼒する ▌ブラウザに読み込まれているファイルにアクセスできる 26
いまどんなリクエストが送られているのか知りたい ▌Networkパネル ▌いまブラウザがリクエストを送信した内容が⼀覧で表⽰される ▌リクエストの種類やキーワードで絞り込みができる ▌どんなAPIが投げられているのか知りたい時によく使う 27
特定のリクエストをブロックした動作を⾒たい ▌Networkパネル > リクエストを右クリック > Block request URL ▌ブロックするリクエストは編集可能で、ワイルドカードも利⽤ 可能
▌特定のリクエストが無い場合に、Webページがどうなるか確認 したい場合など 28
ネットワークリクエストと同等のコードを知りたい ▌ 「Copy as Fetch」 ▌ Networkパネル > リクエストを右クリック >
Copy > Copy as Fetch ▌ ネットワークリクエストと同等のfetch()のコードを⽣成 29
特定のリクエストがあった時のブレイクポイント ▌「 XHR/Fetch Breakpoints 」 ▌Sourcesパネル > XHR/Fetch Breakpoints >
「+」 ▌URLを指定して、そのURLへのリクエストを引き起こすコードに Breakpointsを張れる ▌例えば、誤ったリクエストを実⾏しているコードをすばやく⾒つける事 ができる 30
値を常に監視したい ▌「 Live Expressions」 ▌Consoleパネル > Live Expressions(⽬のアイコン) ▌リアルタイムで指定した値を監視できる ▌スクロールやDOMの状態など画⾯操作中に動的に変わる値を
リアルタイムで確認したい時に便利 31
CookieやLocal Storageにどんなデータが⼊っているか ▌Applicationパネル ▌Local StorageやCookieに値がちゃんと⼊っているか確認 32
デバッグするときにCookieやCacheを⼀括で消したい ▌ 「Clear Site Data」 ▌ 実⾏したページの以下データを⼀括で削除してくれる(個別指定もできる) l Cookies l
WebSQL l Service Workers l Cache Storage l IndexedDB l Local Storage l Application Cache 33
JavaScript編 34
ちょっとJavaScriptのコードを試したい ▌Consoleパネル or SourcesパネルのSnippetsタブ ▌Consoleで複数⾏書く場合はShift + Enterで改⾏ ▌JavaScriptのコードを書くと実⾏結果が取得できる 35
DevToolsのConsoleはちょっと便利 ▌Chrome 80からConsoleでのletは再宣⾔できる ▌consoleでさくっと試してるときに、「already been declared」って怒られるの⾟かったから嬉しい 通常のJavaScriptだと以下のコードはエラーになる let x =
5; let x = 6; 36
console.logしたい ▌Logpoints ▌Sourcesパネル > ⾏番号 > 右クリック > Add logpoint
▌console.log()呼び出しでコードを乱雑にすることなく、 Devtoolsからconsole.logへの出⼒を仕込むことができる 37
JavaScriptコードのデバッグをしたい ▌Sourcesパネル > ⾏番号 > クリック ▌ステップ実⾏などでコードがどのように動くのか、変数の中⾝ などを確認できる ▌JavaScriptのコードはブラウザで実⾏しないと挙動がわからな いので開発中よく使う
38
特定の条件でだけbreakpointを貼りたい ▌Conditional Breakpoint ▌Sourcesパネル > ⾏番号 > 右クリック > Add
conditional breakpoint... ▌毎回⽌めるのは⾯倒で、特定の条件の時だけ⽌めたい場合など 39
JSによるDOMへの参照コードを知りたい ▌ 「Copy JS Path 」 ▌ Elementsパネル > DOM要素を右クリック
> Copy > Copy JS Path ▌ DOMノードへのJSによる参照を取得できる l Shadow DOMも対応 ▌ 例) l document.querySelector ('body > label:nth-child(2)') l document.querySelector('#demo1') .shadowRoot .querySelector('p:nth-child(2)') 40
ブラウザからJavaScriptやCSSを上書きしたい ▌「Local Overrides」 ▌Sourcesパネル > Overrides > Select folder for
overrides ▌Devtools上で変更したJSやCSSをファイルとして保存しておける l リロードしても変更が残る ▌ローカルにファイルを持っていない場合や変更した内容によるリ ロード後の挙動を確認したい場合などに便利 41
JavaScriptやCSSのカバレッジを知りたい ▌「 Code Coverage 」 ▌CSS/JSの使⽤されたコード/使⽤されてないコードが分かる ▌ページ読み込みや特定の操作を⾏った際のコードカバレッジが ⾒れる 42
パフォーマンス編 43
オフライン/低スペックな環境ではどんな⾵に動作するのか ▌オフラインでの動作を確認 l Networkパネル > Offlineにチェック ▌低スペック/遅い回線での動作を確認 l Performanceパネル >
Network/CPUドロップダウン l 低スペック l Slow 3G l 遅い回線 l 6x slowdown 44
とりあえずサイトの品質を計測してみたい ▌Auditパネル(v83からはLighthouceパネル) l LighthouseというWebアプリの品質を計測するツールを使っ て以下の項⽬をチェックできる l Performance l PWA l
Best practices l Accessibility l SEO 45
パフォーマンスのボトルネックを探したい ▌Performanceパネル > Start Profiling ▌⾚くなっている箇所は怪しい l ボトルネックになる原因を教えてくれるものも ▌どの項⽬に時間がかかっている︖ l
Loading l Scripting l Rendering l Painting 46
その他便利な機能編 47
スクリーンショットが撮りたい ▌「Screenshots」 ▌エリア選択 ▌特定の要素 ▌全画⾯ 48
Devtoolsの拡張(ReactやRedux) ▌React Developer Tools ▌Redux DevTools ▌ReactやReduxといったライブラリに特化した機能をDevtoolsに 追加できるChrome拡張があるのでおすすめ ▌拡張機能をインストールするとパネルが追加される 49
さいごに 50
まずは⾊々試してみる ▌機能が豊富過ぎて難しそうに感じるけど、まずは⾊々試してみ るのがおすすめ ▌普段から使うのは数個なので、それは使っていると⾃然に覚え る ▌新しく知ったTipsは是⾮周りの⼈に教えてあげて 51
時間があれば試してみてください(好きなサイト) ⾃分が好きなサイトをブラウザで開いて ▌⾃分が好きなサイトをブラウザで開いて ▌ElementパネルでDOM構造や適⽤されてるStyleを⾒る ▌Networkパネルでページ読み込み時にどんなリクエストが発⽣ しているのか︖特定のリクエストはどんなリクエストで、どん なレスポンスが返ってきてるのか︖ ▌Audits/Lighthouseパネルの「Generate report」ボタンでサイト の品質を確認
52
時間があれば試してみてください(難読化されてないサイト) ⾃分がローカルで開発しているようなソースコードが難読化され ていないサイトを開く ▌DevTools上で特定のJSファイルを開く ▌任意の⾏でブレークポイントを貼って、JSの実⾏を⽌めてみる ▌Step overでJSの実⾏を観察してみたり、変数にどんなデータが ⼊っているのかを確認する 例) https://googlechrome.github.io/devtools-
samples/debug-js/get-started 53
Tools for Web Developers ▌公式の開発者向けドキュメント ▌各種機能についての詳しい説明 ▌Tools for Web Developres
> Chrome DevTools l https://developers.google.com/web/tools/chrome-devtools/ 54
Devtoolsの便利な機能をもっと知りたい What's New In DevTools https://developers.google.com/web/updates /dev tips https://umaar.com/dev-tips/ 55