Share
Embed
Slide 1
Slide 1 text
開運研修 2020
Chrome Developer Toolsの使い⽅
2020/5/14
フロントエンドエキスパートチーム
外松 俊尚
Slide 2
Slide 2 text
この講義について
▌ 【概要】
l Webの開発に関わっていくうえで無くてはならない「Developer Tools」につ
いての講義です。Chromeをベースに紹介。
l 全体の使い⽅や今後の開発に役⽴つ機能を紹介します。
l 知っている/知ってないで⼤きく変わるので、知るにフォーカス
▌ 【ターゲット】
l ブラウザで動くものの開発に関わっていく⼈
l Developer ToolsはElementパネルくらいしか知らない⼈
2
Slide 3
Slide 3 text
⽬次
▌Chrome Developer Toolsについて/全体像/各パネルについて
▌困った時は編
▌UI/デザイン編
▌Webアプリ開発編
▌JavaScript編
▌パフォーマンス編
▌その他便利な機能編
3
Slide 4
Slide 4 text
Chrome Developer Toolsについて/全体像
/各パネルについて
4
Slide 5
Slide 5 text
Chrome Developer Tools
▌Google Chromeに組み込まれた開発者向けツール
▌Web開発を⾏う上で便利な機能がたくさん実装されている
▌使いこなすとDX(Developer Experience)が爆上げする
5
Slide 6
Slide 6 text
https://cybozu.co.jpにアクセスするとブラウザは︖
▌HTMLやCSS, JavaScript, 画像などのリソースをサーバーから取
得
▌取得したリソースのパースから始まりブラウザがWebページを
表⽰する
▌その他にも、StorageやCacheなどWebの技術を使うはず
6
Slide 7
Slide 7 text
Developer ToolsはブラウザがWebページを表⽰する上での、
様々な情報を確認、変更することができる
7
Slide 8
Slide 8 text
Developer Toolsを使うタイミング(経験談)
▌JavaScriptのコードをちょっと試してみたい
▌⾃分が書いたJavaScriptコードのデバッグ
▌画⾯のデザインの調整/表⽰が崩れた時の調査
▌いまどんなCSSが適⽤されているか調べる
▌Webアプリ開発中、いまどんなAPIが叩かれているのか調べる
▌パフォーマンスのボトルネックを探す
▌etc…
8
Slide 9
Slide 9 text
Developer Toolsを起動してみよう
▌Mac
l Command + option + i or F12
▌Windows/Linux
l Ctrl + Shift + i or F12
▌右クリック→検証
9
Slide 10
Slide 10 text
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
Slide 11
Slide 11 text
細かい機能の差異はあるけど、主に使う機能は、どのブラウザ
でも可能。
今⽇知る内容は、Chrome以外のブラウザユーザーでも約に⽴
つはず
11
Slide 12
Slide 12 text
ChromeのバージョンとCanary
▌開発者向けに毎⽇更新されるChrome Canaryを使えば最新の
機能を使える
▌https://www.google.com/intl/ja/chrome/canary/
Stable
v81
Canary
v84
12 2020/5/14時点
Slide 13
Slide 13 text
基本機能はパネルを切り替えて使います
パネルを切り替える
13
Slide 14
Slide 14 text
よく使うパネル
▌Elements
l DOMツリーやCSSのスタイルについて知りたい時など主にUI/デザイン
周り
▌Console
l JavaScriptコードを試したり、ログを出⼒して情報を収集
▌Sources
l JavaScriptコードのデバッグ
▌Network
l APIやJSや画像ファイルなどのリクエストを知る
14
Slide 15
Slide 15 text
困った時は編
15
Slide 16
Slide 16 text
各機能が⾒つけられない
▌「Command Menu」
▌Cmd/Ctrl+Shift+pでコマンドメニューを表⽰できる
▌以降のスライドで紹介する機能は⼀部デフォルトで表⽰されな
いパネルがあるので、コマンドメニューを利⽤すると便利
16
Slide 17
Slide 17 text
なんかいろいろ編集しちゃって戻したい
▌リロードしてください
▌DevTools上の変更はリロードするとリセットされます
17
Slide 18
Slide 18 text
UI/デザイン編
18
Slide 19
Slide 19 text
いま適⽤されているCSSを調べたい
▌Elementsパネル > StylesやCommuted
▌⾒たいUIにフォーカスを当てると適⽤されているCSSがStylesに表⽰
される
▌適⽤されているスタイルを⼀覧で⾒たい場合はComputedを⾒る
▌値を変更すると画⾯に反映される
19
Slide 20
Slide 20 text
要素をホバーされている状態にしておきたい
▌Elementsパネル > Styles > :hover
▌適⽤したい状態にチェックを⼊れると、要素がその状態になる
▌hover時のスタイルや挙動を確認したい時に便利
20
Slide 21
Slide 21 text
モバイル・レスポンシブ対応のチェック
▌Elementパネルなどの機能⼀覧にあるDevice Modeボタン
▌モバイル時の表⽰やレスポンシブに画⾯サイズを切り替えれる
21
Slide 22
Slide 22 text
DOM要素の調整
▌Elementsパネル > DOMツリー
l 表⽰されているDOM要素はドラッグ&ドロップで移動できる
▌Document.designMode
l Consoleパネルで「document.designMode = “on”;」と⼊⼒
l ⽂書全体が編集可能になるので、ちょっとした修正をする
ときに便利かも
22
Slide 23
Slide 23 text
様々な視覚障害の⾒え⽅をエミュレート(v83-)
▌Renderingタブ > Emulate vision deficiencies
▌様々な種類の視覚障害の⾒え⽅をエミュレートできる
▌あくまでエミュレーションなので、視覚的に近似したものを表
⽰してるという点を注意
23
Slide 24
Slide 24 text
Webアプリ開発編
24
Slide 25
Slide 25 text
いまどんなファイルがブラウザに読み込まれてるか知りたい
▌Sourcesパネル > Pageタブ
▌そのページが読み込んでいるリソースのツリーが表⽰される
▌HTMLやCSS、JavaScript、画像ファイルなど読み込んでいる
ファイルの中⾝も確認できる
25
Slide 26
Slide 26 text
あのファイルを開きたい
▌Windows/Linux
l Control + o
▌Mac
l Command + o
▌検索窓が表⽰されるので、ファイル名を⼊⼒する
▌ブラウザに読み込まれているファイルにアクセスできる
26
Slide 27
Slide 27 text
いまどんなリクエストが送られているのか知りたい
▌Networkパネル
▌いまブラウザがリクエストを送信した内容が⼀覧で表⽰される
▌リクエストの種類やキーワードで絞り込みができる
▌どんなAPIが投げられているのか知りたい時によく使う
27
Slide 28
Slide 28 text
特定のリクエストをブロックした動作を⾒たい
▌Networkパネル > リクエストを右クリック > Block request
URL
▌ブロックするリクエストは編集可能で、ワイルドカードも利⽤
可能
▌特定のリクエストが無い場合に、Webページがどうなるか確認
したい場合など
28
Slide 29
Slide 29 text
ネットワークリクエストと同等のコードを知りたい
▌ 「Copy as Fetch」
▌ Networkパネル > リクエストを右クリック > Copy > Copy as Fetch
▌ ネットワークリクエストと同等のfetch()のコードを⽣成
29
Slide 30
Slide 30 text
特定のリクエストがあった時のブレイクポイント
▌「 XHR/Fetch Breakpoints 」
▌Sourcesパネル > XHR/Fetch Breakpoints > 「+」
▌URLを指定して、そのURLへのリクエストを引き起こすコードに
Breakpointsを張れる
▌例えば、誤ったリクエストを実⾏しているコードをすばやく⾒つける事
ができる
30
Slide 31
Slide 31 text
値を常に監視したい
▌「 Live Expressions」
▌Consoleパネル > Live Expressions(⽬のアイコン)
▌リアルタイムで指定した値を監視できる
▌スクロールやDOMの状態など画⾯操作中に動的に変わる値を
リアルタイムで確認したい時に便利
31
Slide 32
Slide 32 text
CookieやLocal Storageにどんなデータが⼊っているか
▌Applicationパネル
▌Local StorageやCookieに値がちゃんと⼊っているか確認
32
Slide 33
Slide 33 text
デバッグするときにCookieやCacheを⼀括で消したい
▌ 「Clear Site Data」
▌ 実⾏したページの以下データを⼀括で削除してくれる(個別指定もできる)
l Cookies
l WebSQL
l Service Workers
l Cache Storage
l IndexedDB
l Local Storage
l Application Cache
33
Slide 34
Slide 34 text
JavaScript編
34
Slide 35
Slide 35 text
ちょっとJavaScriptのコードを試したい
▌Consoleパネル or SourcesパネルのSnippetsタブ
▌Consoleで複数⾏書く場合はShift + Enterで改⾏
▌JavaScriptのコードを書くと実⾏結果が取得できる
35
Slide 36
Slide 36 text
DevToolsのConsoleはちょっと便利
▌Chrome 80からConsoleでのletは再宣⾔できる
▌consoleでさくっと試してるときに、「already been
declared」って怒られるの⾟かったから嬉しい
通常のJavaScriptだと以下のコードはエラーになる
let x = 5;
let x = 6;
36
Slide 37
Slide 37 text
console.logしたい
▌Logpoints
▌Sourcesパネル > ⾏番号 > 右クリック > Add logpoint
▌console.log()呼び出しでコードを乱雑にすることなく、
Devtoolsからconsole.logへの出⼒を仕込むことができる
37
Slide 38
Slide 38 text
JavaScriptコードのデバッグをしたい
▌Sourcesパネル > ⾏番号 > クリック
▌ステップ実⾏などでコードがどのように動くのか、変数の中⾝
などを確認できる
▌JavaScriptのコードはブラウザで実⾏しないと挙動がわからな
いので開発中よく使う
38
Slide 39
Slide 39 text
特定の条件でだけbreakpointを貼りたい
▌Conditional Breakpoint
▌Sourcesパネル > ⾏番号 > 右クリック > Add conditional
breakpoint...
▌毎回⽌めるのは⾯倒で、特定の条件の時だけ⽌めたい場合など
39
Slide 40
Slide 40 text
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
Slide 41
Slide 41 text
ブラウザからJavaScriptやCSSを上書きしたい
▌「Local Overrides」
▌Sourcesパネル > Overrides > Select folder for overrides
▌Devtools上で変更したJSやCSSをファイルとして保存しておける
l リロードしても変更が残る
▌ローカルにファイルを持っていない場合や変更した内容によるリ
ロード後の挙動を確認したい場合などに便利
41
Slide 42
Slide 42 text
JavaScriptやCSSのカバレッジを知りたい
▌「 Code Coverage 」
▌CSS/JSの使⽤されたコード/使⽤されてないコードが分かる
▌ページ読み込みや特定の操作を⾏った際のコードカバレッジが
⾒れる
42
Slide 43
Slide 43 text
パフォーマンス編
43
Slide 44
Slide 44 text
オフライン/低スペックな環境ではどんな⾵に動作するのか
▌オフラインでの動作を確認
l Networkパネル > Offlineにチェック
▌低スペック/遅い回線での動作を確認
l Performanceパネル > Network/CPUドロップダウン
l 低スペック
l Slow 3G
l 遅い回線
l 6x slowdown
44
Slide 45
Slide 45 text
とりあえずサイトの品質を計測してみたい
▌Auditパネル(v83からはLighthouceパネル)
l LighthouseというWebアプリの品質を計測するツールを使っ
て以下の項⽬をチェックできる
l Performance
l PWA
l Best practices
l Accessibility
l SEO
45
Slide 46
Slide 46 text
パフォーマンスのボトルネックを探したい
▌Performanceパネル > Start Profiling
▌⾚くなっている箇所は怪しい
l ボトルネックになる原因を教えてくれるものも
▌どの項⽬に時間がかかっている︖
l Loading
l Scripting
l Rendering
l Painting
46
Slide 47
Slide 47 text
その他便利な機能編
47
Slide 48
Slide 48 text
スクリーンショットが撮りたい
▌「Screenshots」
▌エリア選択
▌特定の要素
▌全画⾯
48
Slide 49
Slide 49 text
Devtoolsの拡張(ReactやRedux)
▌React Developer Tools
▌Redux DevTools
▌ReactやReduxといったライブラリに特化した機能をDevtoolsに
追加できるChrome拡張があるのでおすすめ
▌拡張機能をインストールするとパネルが追加される
49
Slide 50
Slide 50 text
さいごに
50
Slide 51
Slide 51 text
まずは⾊々試してみる
▌機能が豊富過ぎて難しそうに感じるけど、まずは⾊々試してみ
るのがおすすめ
▌普段から使うのは数個なので、それは使っていると⾃然に覚え
る
▌新しく知ったTipsは是⾮周りの⼈に教えてあげて
51
Slide 52
Slide 52 text
時間があれば試してみてください(好きなサイト)
⾃分が好きなサイトをブラウザで開いて
▌⾃分が好きなサイトをブラウザで開いて
▌ElementパネルでDOM構造や適⽤されてるStyleを⾒る
▌Networkパネルでページ読み込み時にどんなリクエストが発⽣
しているのか︖特定のリクエストはどんなリクエストで、どん
なレスポンスが返ってきてるのか︖
▌Audits/Lighthouseパネルの「Generate report」ボタンでサイト
の品質を確認
52
Slide 53
Slide 53 text
時間があれば試してみてください(難読化されてないサイト)
⾃分がローカルで開発しているようなソースコードが難読化され
ていないサイトを開く
▌DevTools上で特定のJSファイルを開く
▌任意の⾏でブレークポイントを貼って、JSの実⾏を⽌めてみる
▌Step overでJSの実⾏を観察してみたり、変数にどんなデータが
⼊っているのかを確認する
例) https://googlechrome.github.io/devtools-
samples/debug-js/get-started
53
Slide 54
Slide 54 text
Tools for Web Developers
▌公式の開発者向けドキュメント
▌各種機能についての詳しい説明
▌Tools for Web Developres > Chrome DevTools
l https://developers.google.com/web/tools/chrome-devtools/
54
Slide 55
Slide 55 text
Devtoolsの便利な機能をもっと知りたい
What's New In DevTools
https://developers.google.com/web/updates
/dev tips
https://umaar.com/dev-tips/
55