4/2のGoogle Developers Live Japan #3の資料です。

1. Chrome Developer Tools を
使いこなそう！
2013/04/02
Google Developers Live Japan #3
このスライドを使ったセッションはこちら → http://bit.ly/YYtStr
Toru Yoshikawa (@yoshikawa_̲t)

2. Who?
吉川 徹 / Toru Yoshikawa
@yoshikawa_̲t
Google Developer Experts (Chrome)
html5j/HTML5とか勉強会スタッフ
Web先端味⾒見見部 顧問
⽇日本jQuery Mobileユーザー会 管理理⼈人
Sublime Text 2 Japan Users Group 管理理⼈人
allWebクリエイター塾/jQuery Mobile担当講師
Blog: http://d.hatena.ne.jp/pikotea/

3. はじめに
初⼼心者向けの解説はこちらから
Chrome DevTools for beginners (http://
www.slideshare.net/yoshikawa_̲t/chrome-‐‑‒
devtools-‐‑‒for-‐‑‒beginners)
本資料料は、あくまで解説を聞きながらメモを取らな
くて済むようにしたものです。本資料料のみでは、若若
⼲干わかりづらい部分があるかもしれませんので、ご
注意ください。

4. 対象範囲
Elements … 要素・スタイルの確認・編集
Resources … ファイル構成・リソース（Web Storageなど）の確認
Network … ネットワークアクセスの確認・分析
Sources … ソースファイルの確認・保存、JavaScriptのデバッグ
Timeline … パフォーマンスの測定と分析
Profiles … CPU、メモリ状況、CSSセレクターのプロファイル
Audits … ネットワーク、サイトスピードのチェック・推奨事項
Console … エラーログ表⽰示、JavaScript・コンソールコマンドの実⾏行行

5. Agenda
Sourcesパネルの基本とTips
JavaScriptのデバッグ
Timelineパネルを使ったパフォーマンスチューニング
TimelineパネルとProfilesパネルを使ったメモリリーク調査

6. Sourcesパネルの基本とTips

7. Sourcesパネル
ファイルツリー サイドパネル
ソースパネル

8. 各部解説
サイドパネルの
表⽰示・⾮非表⽰示
タブ
※「Content scripts」は
Chrome Extensionsで利利⽤用して
いるスクリプトこと
サイドパネルの固定
ドメインごとの
ファイルツリー

9. ファイルの保存と履履歴管理理
ElementsパネルやSourcesパネルで編集した結
果は、右クリックで保存する
右クリック「Local Modifications...」で履履歴管理理
ができる

10. ファイルの履履歴管理理

11. 便便利利なショートカット
ショートカット
Command+O … ファイル選択
Command+Shift+O … 関数・セレクター選択
Command+L … 指定⾏行行へ移動
Command＋Option＋F … ソースコードの全⽂文検索索

12. 全⽂文検索索

13. MinifyされたJavaScriptコードの整形
MinifyされたJavaScriptコードを整形できる
そのままデバッグ可能

14. JavaScriptのデバッグ

15. JavaScriptのデバッグの基本的な流流れ
1. デバッグの開始（コードの停⽌止）
2. 状態の監視
3. ステップ実⾏行行
4. 「2」に戻る

16. デバッグの開始（コードの停⽌止）
基本的な⽅方法
Breakpoints
debugger句句

17. 状態の監視
Watch Expressions
Call Stack
Scope Variable
Console

18. Watch Expressions

19. Call Stack

20. Scope Variables

21. Console

22. ステップ実⾏行行
Pause/Continue (F8)
Step over (F10)
Step into (F11)
Step out (Shift+F11)

23. 指定箇所まで移動

24. いろいろなコードの停⽌止⽅方法
条件付きBreakpoints
DOM Breakpoints
XHR Breakpoints
Event Listener Breakpoints
Exception発⽣生
Workers

25. 条件付きBreakpoints
ある式がtrueになった際にブレークする
⾏行行番号の右クリックから式を⼊入⼒力力

26. DOM Breakpoints
ある要素が変化した際にブレークする
属性の変化
⼦子要素の追加
要素の削除
Elementsパネルから要素を右クリック
Event Listener BreakpointsのDOM
Mutationでも可能

27. XHR Breakpoints
XHR(Ajax)が投げられた際にブレークする
リクエスト先のURLに含まれる⽂文字列列を指定する
XHR Breakpointsパネルから＋ボタン

28. Event Listener Breakpoints
イベントが発⽣生した際にブレークする
イベント
Animation, Timer
requestAnimationFrameやsetTimeoutなど
Control, Device
resizeやscroll, deviceorientationなど
Clipboard
Touch, Mouse, Keyboard
DOM Mutation
DOM操作

29. Exception発⽣生
Exceptionが発⽣生した際にブレークする
ステータスバーのポーズボタン
ポーズボタンを１回クリックですべてのExceptionをブレーク
ポーズボタンをもう１回クリックでcatchされていないExceptionを
ブレーク

30. Workers
Web Workers開始時にブレークする
別のウィンドウされ、Web WorkerのJSがデバッ
グできる

31. LiveEdit!
デバッグ中でもJavaScriptを編集できる
編集した結果を保存すると⾃自動的に再実⾏行行される

32. Timelineパネルを使ったパ
フォーマンスチューニング

33. デモ

34. Timelineパネル

35. Timelineパネル
記録ボタンを押して計測開始
記録ボタンをもう⼀一度度押して計測停⽌止
GCの実施
記録開始・終了了
15ms以下のレコードを⾮非表⽰示

36. Timelineパネル
レコードの種類
Loading … 読み込みなどのネットワークに関するレコード
Scripting … イベントや関数呼び出しなどJSの実⾏行行に関するレコード
Rendering … DOMの参照や変更更、レンダリングなどに関するレコード
Painting … 画像の表⽰示やopacity、box-‐‑‒shadowなど画⾯面の表⽰示に関す
るレコード

37. Eventsの⾒見見⽅方
全体的に時間が掛かっているイベントの割合を⾒見見てチューニングすべき
項⽬目をチェックする
Loading > ネットワーク系のチューニング
Scripting > JavaScriptのチューニング
Rendering, Painting > DOM操作、描画系のチューニング
上部のタイムにある⻘青いラインは、DOMContentLoadedイベントを表す
⾚赤いラインは、loadイベントを表す

38. Framesの⾒見見⽅方
スムーズにスクロール、アニメーションなどができているかどうかを
時間別に確認する
30FPSライン、60FPSラインを⾒見見て、ラインを越えているレコードが
ないかどうかを確認する
アニメーションは、30FPS（24FPSぐらいでも良良い）
FPSゲームなどのシビアなものは60FPS

39. チューニングすべき部分
ラインを越えて、突出しているレコードがチュー
ニング対象
ドラッグで表⽰示範囲を調整できる

40. レコードの詳細を確認する
レコードをクリックすれば詳細を表⽰示可能
そのままでソースを表⽰示できるものもあれば、できないものもある

41. Loadingレコード

42. Loadingレコード
レコード名 説明
Send Request リクエストの送信
Receive Response レスポンスの受信
レスポンスデータの受信。⼤大きいデータの場合、複数の
Receive Data
レコードに分かれることがある。
Finish Loading レスポンスデータの受信完了了
HTMLのパース。JavaScriptによるdocument.write()や
Parse HTML
要素のinnerHTML属性への追加でも発⽣生する。

43. Scriptingレコード

44. Scriptingレコード
レコード名 説明
Evaluate Script JavaScriptコードを読み込み・実⾏行行する
Function Call 関数の実⾏行行
Event 各種イベント。イベント名も表⽰示される。
Install Timer タイマーの作成（setInterval、setTimeout）
Timer Fired タイマーの実⾏行行
Remove Timer タイマーの削除
GC Event GCの発⽣生
XHR Ready State Change XMLHttpRequstの状態の更更新
Create WebSocket WebSocketコネクションの作成
Destroy WebSocket WebSocketコネクションの破棄
Request Animation Frame アニメーションフレームの作成（requestAnimationFrame）
Animation Frame Fired アニメーションフレームの実⾏行行

45. Renderingレコード
DOMアクセスによって発⽣生する
キャッシュをうまく利利⽤用したりしてDOMアクセスを最⼩小限に

46. Renderingレコード
レコード名 説明
Recalculate Style 要素（DOM）の参照や変更更、スタイルの変更更など
Layout レイアウトの変更更

47. Renderingレコードの
パフォーマンスボトルネック
リフローが発⽣生する操作を繰り返すと発⽣生する

48. Paintingレコード
もっともパフォーマンスに影響しやすいレコード
過度度な装飾は控える

49. Paintingレコード
レコード名 説明
Composite Layers レイヤーの合成
Paint 画⾯面の描画
Scroll スクロール
Image Decode 画像のデコード処理理
Image Resize 画像のリサイズ処理理

50. TimelineパネルとProfilesパネル
を使ったメモリリーク調査

51. デモ

52. Memoryの⾒見見⽅方
メモリーリークをチェックすることができる
メモリの使⽤用量量が定期的に下降降しているのは、GCが発⽣生して
いるため
GCは、⼀一定以上のメモリを消費するかアイドル時間に⾃自動的
に発⽣生する
グラフが右肩上がりか、徐々に上がっていく場合は注意が必要

53. Memory (Counters) の⾒見見⽅方
[最⼩小値 -‐‑‒ 最⼤大値]
DOM Node CountやEvent Listener Countが増えて、減らな
い場合はリークしている可能性がある
iframeの内容もカウントされる
問題がありそうな場合には、Profilesで詳細を確認する

54. Profiles
CPU、CSS Selector、Heap Snapshotなどがあるが
今回は、Take Heap Snapshotを簡単に解説します

55. Profiles
記録⽅方法は、Timelineと同じ（Startボタンでも可能）
スナップショットは、定点の記録なので⼀一瞬で終了了
CPU Profileでは、console.profile('プロファイル名')、
console.profileEnd()などのコードで正確な位置で記録す
ることもできる

56. Profiles (Heap Snapshots)
スナップショットを2つ記録して比較

57. Profiles (Heap Snapshots)
差分からGCで回収されていないオブジェクトを⾒見見つける
項⽬目
# New > 新規オブジェクト
# Deleted > 削除オブジェクト
# Delta > 差分カウント
Alloc. Size > 割り当てられたメモリサイズ
Freed Size > 解放されたメモリサイズ
Size Delta > 差分メモリサイズ

58. Object's retaining tree
そのオブジェクトに対してどのような参照が残っ
ているかを確認して、適切切に参照を解放する

59. その他のTips

60. Chrome Developer Tools
の実験的機能の有効
chrome://flags
Settings

61. 便便利利な拡張機能
Page Speed … ページ⾼高速化のための提案をしてくれる
Accessibility Developer Tools … アクセシビリティを確保する
ための提案をAuditsに追加する
jQuery Debugger … jQueryのイベントやデータをElementsパ
ネルで確認できる
DevTools autosave … ElementsパネルやSourcesパネルで編
集した内容を⾃自動的にローカルに保存する
AngularJS Batarang … AngularJSの開発に凄く便便利利
RailsPanel … Ruby on Railsの開発に凄く便便利利

62. DevTools autosave

63. ⾒見見た⽬目のカスタマイズ
MNML Theme (https://github.com/frontdevDE/mnml-‐‑‒devtools-‐‑‒theme)

64. ⾒見見た⽬目のカスタマイズ
Custom.cssに任意のスタイルを定義する
Mac
~∼/Library/Application Support/Google/Chrome/Default/
User StyleSheets/Custom.css
Windows
C:UsersYourUsernameAppDataLocalGoogleChrome
User DataDefaultUser StyleSheetsCustom.css
⼤大本のスタイルの確認（DevToolsをデバッグしても良良い）
chrome-‐‑‒devtools://devtools/devTools.css

65. その他のテーマ
MNML Theme（https://github.com/frontdevDE/mnml-‐‑‒devtools-‐‑‒theme）
Monokai Dark（https://gist.github.com/bc12d6bb85ffb96042e8）
Tomorrow Theme（https://gist.github.com/1163300）
IR_̲Black Theme（https://gist.github.com/1150520）
Solarized Dark（https://gist.github.com/2174604）
Ruby Blue（https://github.com/chrisbateman/ChromeDevToolsTheme-‐‑‒RubyBlue/）
Expresso（https://gist.github.com/1207219）
Inversion（https://github.com/mohsen1/Chrome-‐‑‒Dev-‐‑‒tools-‐‑‒dark-‐‑‒theme）
Dark Theme（https://github.com/xajler/chrome-‐‑‒devtools-‐‑‒dark-‐‑‒theme）
Dark Dev（https://github.com/simonsmith/DarkDev）
WebLight Theme（Theme: https://gist.github.com/1325072）

66. チートシート
http://anti-code.com/devtools-cheatsheet/

67. まとめ
Chrome Developer Toolsは、使いこなせば様々な分析は
できますが、万能ではありません。
Chrome Developer Toolsは、あくまで必要な情報を提供
するというツールです。ツールを使うのは⼈人間なので、う
まく⼯工夫してデバッグやチューニングを⾏行行いましょう。
モバイルはRemote debugで実機チェックをしましょう。
Chrome Developer Toolsは、頻繁にアップデートされて
います。新しい機能を是⾮非試してみて下さい。（要望した
機能も追加されるかも？）

68. Thank you!!
(@yoshikawa_̲t)

69. Resources
https://developers.google.com/chrome-‐‑‒
developer-‐‑‒tools/
https://developers.google.com/live/chrome/
http://anti-‐‑‒code.com/devtools-‐‑‒cheatsheet/