Chrome Developer Toolsを使いこなそう！
208 likes92,628 views
4/2のGoogle Developers Live Japan #3の資料です。
![Memory (Counters) の⾒見見⽅方
[最⼩小値 -‐‑‒ 最⼤大値]
DOM Node CountやEvent Listener Countが増えて、減らな
い場合はリークしている可能性がある
iframeの内容もカウントされる
問題がありそうな場合には、Profilesで詳細を確認する](https://image.slidesharecdn.com/devtools-130327235739-phpapp02/85/Chrome-Developer-Tools-53-320.jpg)
Chrome Developer Toolsを使いこなそう！
- 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・コンソールコマンドの実⾏行行
- 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
- 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
- 26. DOM Breakpoints ある要素が変化した際にブレークする 属性の変化 ⼦子要素の追加 要素の削除 Elementsパネルから要素を右クリック Event Listener BreakpointsのDOM Mutationでも可能
- 28. Event Listener Breakpoints イベントが発⽣生した際にブレークする イベント Animation, Timer requestAnimationFrameやsetTimeoutなど Control, Device resizeやscroll, deviceorientationなど Clipboard Touch, Mouse, Keyboard DOM Mutation DOM操作
- 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イベントを表す
- 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 アニメーションフレームの実⾏行行
- 46. Renderingレコード レコード名 説明 Recalculate Style 要素（DOM）の参照や変更更、スタイルの変更更など Layout レイアウトの変更更
- 49. Paintingレコード レコード名 説明 Composite Layers レイヤーの合成 Paint 画⾯面の描画 Scroll スクロール Image Decode 画像のデコード処理理 Image Resize 画像のリサイズ処理理
- 51. デモ
- 53. Memory (Counters) の⾒見見⽅方 [最⼩小値 -‐‑‒ 最⼤大値] DOM Node CountやEvent Listener Countが増えて、減らな い場合はリークしている可能性がある iframeの内容もカウントされる 問題がありそうな場合には、Profilesで詳細を確認する
- 54. Profiles CPU、CSS Selector、Heap Snapshotなどがあるが 今回は、Take Heap Snapshotを簡単に解説します
- 56. Profiles (Heap Snapshots) スナップショットを2つ記録して比較
- 57. Profiles (Heap Snapshots) 差分からGCで回収されていないオブジェクトを⾒見見つける 項⽬目 # New > 新規オブジェクト # Deleted > 削除オブジェクト # Delta > 差分カウント Alloc. Size > 割り当てられたメモリサイズ Freed Size > 解放されたメモリサイズ Size Delta > 差分メモリサイズ
- 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の開発に凄く便便利利
- 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）
- 67. まとめ Chrome Developer Toolsは、使いこなせば様々な分析は できますが、万能ではありません。 Chrome Developer Toolsは、あくまで必要な情報を提供 するというツールです。ツールを使うのは⼈人間なので、う まく⼯工夫してデバッグやチューニングを⾏行行いましょう。 モバイルはRemote debugで実機チェックをしましょう。 Chrome Developer Toolsは、頻繁にアップデートされて います。新しい機能を是⾮非試してみて下さい。（要望した 機能も追加されるかも？）