2012/12/21に行われたサイバーエージェント社内勉強での講演資料です。

1. Chrome DevTools.next
2012/12/21
Cyber Agent
Toru Yoshikawa ( @yoshikawa_̲t )

2. Who?
吉川 徹 / Toru Yoshikawa
@yoshikawa_̲t
C.A.Mobile Web先端技術フェロー
Google API Expert ( Chrome )
コミュニティ活動
html5j.org/HTML5とか勉強会スタッフ
⽇日本jQuery Mobileユーザー会 管理理⼈人
Sublime Text 2 Japan Users Group 管理理⼈人
allWebクリエイター塾/jQuery Mobile担当講師
Blog: http://d.hatena.ne.jp/pikotea/

3. 著書
「HTML5ガイドブック 増補改訂版」（共著） 「jQuery Mobile パーフェクトガイド」
http://www.amazon.co.jp/dp/4844332937 http://www.amazon.co.jp/dp/484433266X

4. Chrome Developer Toolsの概要は
既にこちらで解説していますので参考にしてください！
https://speakerdeck.com/t32k/improve-web-performance-with-chrome-dev-tools

5. Agenda
1. ChromeでのWeb開発の基礎知識識
2. JavaScriptのデバッグ
3. パフォーマンスの測定とチューニング
4. おまけ
1. 便便利利な拡張機能
2. Chrome Developer Toolsのカスタマイズ
5. まとめ

6. ChromeでのWeb開発の
基礎知識識

7. ブラウザの挙動
Safari、Android Browserと同じWebkitベースのブラウザの
ため、ほぼ同様の動作をする
JavaScriptエンジンが上記ブラウザとは違うので若若⼲干注意（互
換性の問題はほとんどなし）
Webkit > JavaScriptCore
Chrome > V8 (Node.jsもV8を利利⽤用している)
Firefox > SpiderMonkey
JavaScript⾼高速化等のTipsは⼤大抵同様に効果がある

8. 特殊URL
chrome:で始まるURLで設定やデバッグ⽤用の有⽤用な情報
を参照することができる
chrome://about でURL⼀一覧を表⽰示
chrome://flags > 各種設定
chrome://appcache-‐‑‒internals > AppCacheの管理理
chrome://net-‐‑‒internals > ネットワーク情報
etc...

9. Canary ビルド
HTML5、Chrome Developer Toolsの最新の機能が利利⽤用できる
$_̲ 最後の評価結果の参照 (Console)
Styled console log (Console)
JPEGのデコード時間の表⽰示(Timeline)
etc...
プロファイルがStableと別になっているので、Stableと同時に
利利⽤用できる

10. Canary ビルド
Chrome Developer Toolsの実験的機能の有効
chrome://flags
Settings

11. Canary ビルド
Chrome Developer Tools の最新情報
Peter Beverloo
Web Inspector commits RSS feed

12. JavaScriptのデバッグ

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

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

15. Sourcesパネル
ショートカット
Command+O … ファイル選択
Command+Shift+O … 関数選択
Command+L … 指定⾏行行へ移動
Command＋Option＋F … ソースコードのGREP検索索

16. JavaScriptのデバッグの基本
console.log！
デバッガ
デバッグの開始
状態の監視
ステップ実⾏行行

17. デバッグの開始
基本的な⽅方法
debugger句句
Breakpoints

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

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

20. いろいろなデバッグの開始⽅方法
条件付きBreakpoints
DOM Breakpoints
XHR Breakpoints
Event Listener Breakpoints
Exception発⽣生
Workers

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

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

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

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

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

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

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

28. その他のTips
Consoleで利利⽤用可能なコマンド
Firebug のコマンドラインは⼤大抵利利⽤用できる
http://ss-‐‑‒o.net/event/20120212/

29. パフォーマンスの測定と
チューニング

30. Timelineパネル

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

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

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

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

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

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

37. Demo
http://www.jankfree.com/jank-‐‑‒busters-‐‑‒io/examples/measuring-‐‑‒fps/smooth.html

38. Demo
http://www.jankfree.com/jank-‐‑‒busters-‐‑‒io/examples/sluggish-‐‑‒scroll/sluggish-‐‑‒scroll.html

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

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

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

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

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

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

45. HTML5を使って⼿手動で計測する
Navigation Timing API
各種イベントの処理理タイミングを取得する
High Resolution Time
ミリ秒以下の精度度で経過時間を計測する
いずれも勧告済み

46. Navigation Timing API
// サンプルコード
console.log ( performance.timing.navigationStart )

47. High Resolution Time
performance.now() // webkitNow()
performance.timing.navigationStartからの経
過を時間をミリ秒以下の精度度で取得する

48. おまけ

49. 便便利利な拡張機能
Page Speed
Accessibility Developer Tools
jQuery Debugger
DevTools autosave

50. Page Speed
Webサイトのスピード測定とサジェスト
Page Speedタブが追加される

51. Accessibility Developer Tools
Auditsでアクセシビリティに関するサジェスト

52. jQuery Debugger
ElementsパネルにjQuery DataとjQuery Eventsパネルを追加
jQuery Selectorのinspectorが追加

53. DevTools autosave
DevToolsで修正したソースの内容をローカルに反映
アドレスごとに保存先を設定可能

54. Chrome Developer Tools
のカスタマイズ
https://github.com/frontdevDE/mnml-‐‑‒devtools-‐‑‒theme

55. Chrome Developer Tools
のカスタマイズ
Custom.cssに任意のスタイルを定義する
Mac
~∼/Library/Application Support/Google/Chrome/Default/User
StyleSheets/Custom.css
Windows
C:UsersYourUsernameAppDataLocalGoogleChromeUser
DataDefaultUser StyleSheetsCustom.css
⼤大本のスタイルの確認（DevToolsをデバッグしても良良い）
chrome-‐‑‒devtools://devtools/devTools.css
devtools themeでぐぐれば⾊色々⾒見見つかります

56. まとめ
DevToolsは使いこなせば様々な分析ができる
が、万能ではない
DevToolsはあくまで情報を提供するもので、デ
バッグやチューニングはトライ＆エラーで
モバイルはRemote Debugで実機チェックを
DevToolsは常に進化しているので、必要な情報
があれば機能要望で追加されるかも？

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

58. Resources
Chrome Developers Live: Chrome ( https://developers.google.com/
live/chrome/ )
Chrome Canary for Developers ( http://paulirish.com/2012/chrome-‐‑‒
canary-‐‑‒for-‐‑‒developers/ )
Improve web performance with chrome dev tools ( https://
speakerdeck.com/t32k/improve-‐‑‒web-‐‑‒performance-‐‑‒with-‐‑‒chrome-‐‑‒dev-‐‑‒
tools )
Jank Busters ( http://www.jankfree.com/jank-‐‑‒busters-‐‑‒io/index.html )
Google Chrome Developer Tools⼊入⾨門 inDevFestX Sapporo ( http://ss-‐‑‒
o.net/event/20120212/ )