google chromeを使用したデバッグについての発表資料です。

2. 自己紹介
• 名前：橋本 慎史 shinji.ha@gmail.com
• 所属：株式会社ベーシック
• やっていること：
ここ2年ほどはフロントエンド開発一色
フロントのデバッグはいつもChrome
2

3. フロントエンドデバッグ方法の紹介
• alert
昔いた
• alert + console.log()
フロントエンド開発の経験が少ない人はこれが多い？
• Visual Studio、VS Code
コード中心のデバッグは可能。ブラウザのデバッガほど多機能ではない
• ブラウザの開発者ツール
単体で一通りのデバッグができる。統合デバッグ環境といえる
3

4. Chromeの開発者ツール
4
• F12またはCtrl+Shift+Iで起動
• ESCで下にconsole表示

5. Elementsパネル
利用シーン
1. この要素どうなってるの？
2. 要素を変更してみたい
3. この要素のスタイルは？
4. スタイルを上書きしている犯人は？
5. 要素のイベント処理は？
6. いつの間にかわったの？
7. スマホだとどう見える？
5

6. この要素どうなってるの？
Point
 DOMツリーが見える
 階層がパンくずリストで見れる
 要素の検索ができる(Ctrl + F)
6

7. 要素を変更してみたい
Point
 DOM構造を書き換えられる
 疑似クラスが当たった
状態にできる
7

8. この要素のスタイルは？
Point
 スタイルを追加・削除できる
 スタイルを書き換えできる
 疑似クラスを確認できる
8

9. スタイルを上書きしている犯人は？
Point
 スタイルを上書きしてる犯人が分かる
 最終的に適用されているスタイルが分かる
9

10. 要素のイベント処理は？
Point
 要素についているイベントリスナーの一覧が見える
 関連付けているソースの位置までわかる
10

11. いつのまに変わったの？
Point
 要素の変更時にBreakできる
 値の変更ではBreakしない。残念
subtree modifications 要素のサブツリー変更
attribute modifications 要素の属性変更
node removal 要素の削除
11

12. スマホだとどう見える？
Point
 デバイスが選択できる
 デバイスの向きを変えられる
 スマホ独自のイベントの動作確認ができる（tapなど）
12

13. consoleパネル
利用シーン
1.ログを見たい
2.ログの設定
3.変数の中を見たい
4.consoleはlogだけじゃない
5.実は止まっていなくても操作できる
13

14. ログを見たい
Point
 warn,errorはスタックトレースが見える
 フィルターができる
 表示するログレベルを絞れる
14

15. ログの設定
Point
 設定ボタンを押すとすごい
Hide network 404,500系のエラーを出力しない
Log XMLHttpRequests XMLHttpRequestを出力する
Preserve log ページの更新または操作中にコンソール履歴を保持する
Show Timestamps Timestampを出力する
Selected context only 表示中のコンテキストからのメッセージのみ出力する
Autocomplete from history 履歴からオートコンプリートを有効にする
15

16. 変数の中を見たい
Point
 変数の中身を参照できる
 自動補完が効く
16

17. consoleはlogだけじゃない
Point
 変数の中をテーブル形式で表示できる（console.table）
 処理時間の計測ができる（console.time)
 ログレベルを指定できる（info,warn,error)
17

18. 実は止まっていなくても操作できる
Point
 Breakしていなくてもコンソールは使える
18

19. sourceパネル
利用シーン
1.ソースを開く
2.とまれ～
3.このリクエスト投げたのはだれ？
4.どこかで例外がでるんだけど
5.変数がこの値ならどうなる
6.このコードならどう動く？
7.行き過ぎた～
19

20. ソースを開く
Point
 TypeScriptも開ける
 CSSも開ける
 Minifyされていても整形できる
20
Ctrl + Shit + F 全文検索
Ctrl + O ファイル検索
Ctrl + G 行番号移動
Ctrl + Shift + O メンバ検索(JavaScriptのみ)
Ctrl + M 対応するカッコに移動
Ctrl + D / Ctrl + U オカレンスの選択 / 解除

21. とまれ～
Point
 ソースの任意の個所にBreak Pointを設定可能
 イベント発生時にも止められる
 条件付きでBreakできる（edit breakpoint）
 埋め込みのスクリプトに止める
 ここまで実行(continue to here)
21

22. このリクエスト投げたのはだれ？
Point
 URLを指定して送信したときにBreak
22

23. どこかで例外がでるんだけど
Point
 例外発生時にBreak
Pause on
exceptions
23

24. 変数がこの値ならどうなる？
Point
 ブレイクしている最中に値を書き換えれる
24

25. このコードならどうなる？
Point
 JavaScriptのコードを書き換えて実行できる
 TypeScriptは書き換えられない（反映されない）
 右クリック – Local modificationsで変更履歴確認
書き換えて Ctrl + S
25

26. 行き過ぎた～
Point
 Call Stackをさかのぼって実行できる
26

27. networkパネル
利用シーン
1.なにができるの？
2.もう一度同じ要求を投げたい
27

28. なにができるの？
Point
 キャッシュを残さない（Disable Cache）
 表示列のカスタマイズ
 フィルターできる
 呼び出し元が分かる（Initiator）
 通信の詳細が見える（Header,Preview,Response,Timing)
28

29. もう一度同じ要求を投げたい
Point
 同じ要求を再送できる
29

30. Performanceパネル
利用シーン
1.何ができるの？
30

31. 何ができるの？
Point
 処理を時系列に記録できる
 メソッドの処理時間が分かる
 パフォーマンス分析に使用
参考）パフォーマンス分析の手法
https://developers.google.com/web/tools/chrome-devtools/rendering-tools/
31

32. その他のパネル
Memoryパネル
メモリの使用状況のスナップショットを作成できる
Applicationパネル
ローカルストレージ・セッションストレージや画像、フォント、スタイルシートなど読み込まれた
リソースを管理できる
32

33. その他のパネル
Securityパネル
混合コンテンツの問題・証明書の確認ができる
Auditsパネル
Webページのパフォーマンスに関する診断
33

34. おわり
34