HTML5 Conference Miyazaki 2013のセッション資料です。

1. DevTools.next
2013/2/10
HTML5カンファレンス宮崎 2013
Toru Yoshikawa ( @yoshikawa_̲t )

2. Who?
吉川 徹 / Toru Yoshikawa
@yoshikawa_̲t
C.A.Mobile Web先端技術フェロー
Google Developer Experts (Chrome)
html5j.org/HTML5とか勉強会スタッフ
allWebクリエイター塾/jQuery Mobile担当講師
Blog: http://d.hatena.ne.jp/pikotea/

3. Agenda
1. ChromeでのWeb開発の基礎知識識
2. 要素・スタイルの確認・編集
3. モバイルのデバッグ
4. JavaScriptのデバッグ
5. パフォーマンスの測定とチューニング
6. Tips

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

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

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

7. Canary ビルド
https://www.google.com/intl/ja/chrome/browser/canary.html
HTML5、Chrome Developer Toolsの最新の機能が利利⽤用できる
$_̲ 最後の評価結果の参照 (Console)
Styled console log (Console)
JPEGのリサイズ・デコード時間の表⽰示(Timeline)
etc...
プロファイルがStableと別になっているので、Stableと同時に利利⽤用
できる

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

9. Chrome Developer Tools 概要

10. 起動⽅方法
右上の設定アイコン＞ツー
ル＞デベロッパーツール
右クリック＞要素を検証
ショートカット
（Windows: Ctl+Shift
+i、Mac: Command
+Option+i）

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

12. 共通部分

13. 表⽰示位置変更更
Dock to right
Dock to bottom
Window
アイコンクリックで切切り替え
アイコン⻑⾧長押しで、リストがポップアップ

14. 設定

15. ショートカット
?キーでショートカット一覧表示

16. 要素やスタイルを確認・編集する

17. Elementsパネル

18. 要素の確認と編集
要素の編集
要素の確認

19. スタイルの確認と編集
Computed Style

20. スタイルの確認と編集
Styles

21. スタイルの確認と編集
編集した結果は、Sourcesパネルで保存可能

22. スタイルの確認と編集
Metrics

23. モバイルのデバッグ

24. Overrides

25. Remote debug
Chrome for Android, iOSで動作
Androidの開発環境をインストール
USBデバッグで接続
コマンド実⾏行行
$> adb forward tcp:9222 localabstract:chrome_devtools_remote
Chromeでlocalhost:9222を表⽰示

26. Remote debug
デバッグするタブを選択

27. JavaScriptのデバッグ

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

45. Timelineパネル

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

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

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

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

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

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

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

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

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

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

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

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

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

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

60. Tips

61. Chrome Devtools Cheatsheet
http://anti-code.com/devtools-cheatsheet/

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

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

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

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

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

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

68. 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でぐぐれば⾊色々⾒見見つかります

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

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

71. 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/ )