![Memory (Counters) の⾒見見⽅方
[計測時点 -‐‑‒ 現在]
DOM Node CountやEvent Listener Countが増えて、減らな
い場合はリークしている可能性がある
iframeの内容もカウントされる
問題がありそうな場合には、Profilesで詳細を確認する](https://image.slidesharecdn.com/devtools-next-121221064237-phpapp01/85/Chrome-DevTools-next-40-320.jpg)
Chrome DevTools.next
- 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！ デバッガ デバッグの開始 状態の監視 ステップ実⾏行行
- 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
- 22. DOM Breakpoints ある要素が変化した際にブレークする 属性の変化 ⼦子要素の追加 要素の削除 Elementsパネルから要素を右クリック Event Listener BreakpointsのDOM Mutationでも可能
- 24. Event Listener Breakpoints イベントが発⽣生した際にブレークする イベント Animation, Timer requestAnimationFrameやsetTimeoutなど Control, Device resizeやscroll, deviceorientationなど Clipboard Touch, Mouse, Keyboard DOM Mutation DOM操作
- 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イベントを表す
- 40. Memory (Counters) の⾒見見⽅方 [計測時点 -‐‑‒ 現在] DOM Node CountやEvent Listener Countが増えて、減らな い場合はリークしている可能性がある iframeの内容もカウントされる 問題がありそうな場合には、Profilesで詳細を確認する
- 41. Profiles CPU、CSS Selector、Heap Snapshotなどがあるが 今回は、Take Heap Snapshotを簡単に解説します
- 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
- 51. Accessibility Developer Tools Auditsでアクセシビリティに関するサジェスト
- 52. jQuery Debugger ElementsパネルにjQuery DataとjQuery Eventsパネルを追加 jQuery Selectorのinspectorが追加
- 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でぐぐれば⾊色々⾒見見つかります
- 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/ )