Chrome  Developer  Tools  を     使いこなそう!                                           2013/04/02                    Google  De...
Who?吉川  徹  /  Toru  Yoshikawa@yoshikawa_̲t   Google  Developer  Experts  (Chrome)   html5j/HTML5とか勉強会スタッフ   Web先端味⾒見見部  顧問...
はじめに初⼼心者向けの解説はこちらから  Chrome  DevTools  for  beginners  (http://  www.slideshare.net/yoshikawa_̲t/chrome-‐‑‒  devtools-‐‑‒f...
対象範囲Elements  …  要素・スタイルの確認・編集Resources  …  ファイル構成・リソース(Web  Storageなど)の確認  Network  …  ネットワークアクセスの確認・分析Sources  …  ソースファイ...
AgendaSourcesパネルの基本とTipsJavaScriptのデバッグTimelineパネルを使ったパフォーマンスチューニングTimelineパネルとProfilesパネルを使ったメモリリーク調査
Sourcesパネルの基本とTips
Sourcesパネルファイルツリー            サイドパネル          ソースパネル
各部解説        サイドパネルの         表⽰示・⾮非表⽰示                タブ          ※「Content  scripts」は       Chrome  Extensionsで利利⽤用して     ...
ファイルの保存と履履歴管理理ElementsパネルやSourcesパネルで編集した結果は、右クリックで保存する右クリック「Local  Modifications...」で履履歴管理理ができる
ファイルの履履歴管理理
便便利利なショートカットショートカット Command+O  …  ファイル選択 Command+Shift+O  …  関数・セレクター選択 Command+L  …  指定⾏行行へ移動 Command+Option+F  …  ソースコード...
全⽂文検索索
MinifyされたJavaScriptコードの整形  MinifyされたJavaScriptコードを整形できる  そのままデバッグ可能
JavaScriptのデバッグ
JavaScriptのデバッグの基本的な流流れ1. デバッグの開始(コードの停⽌止)2. 状態の監視3. ステップ実⾏行行4. 「2」に戻る
デバッグの開始(コードの停⽌止) 基本的な⽅方法  Breakpoints  debugger句句
状態の監視Watch  ExpressionsCall  StackScope  VariableConsole
Watch  Expressions
Call  Stack
Scope  Variables
Console
ステップ実⾏行行Pause/Continue  (F8)Step  over  (F10)Step  into  (F11)Step  out  (Shift+F11)
指定箇所まで移動
いろいろなコードの停⽌止⽅方法 条件付きBreakpoints DOM  Breakpoints XHR  Breakpoints Event  Listener  Breakpoints Exception発⽣生 Workers
条件付きBreakpointsある式がtrueになった際にブレークする⾏行行番号の右クリックから式を⼊入⼒力力
DOM  Breakpointsある要素が変化した際にブレークする   属性の変化   ⼦子要素の追加   要素の削除Elementsパネルから要素を右クリックEvent  Listener  BreakpointsのDOM  Mutation...
XHR  BreakpointsXHR(Ajax)が投げられた際にブレークするリクエスト先のURLに含まれる⽂文字列列を指定するXHR  Breakpointsパネルから+ボタン
Event  Listener  Breakpoints  イベントが発⽣生した際にブレークする  イベント    Animation,  Timer         requestAnimationFrameやsetTimeoutなど    ...
Exception発⽣生Exceptionが発⽣生した際にブレークするステータスバーのポーズボタンポーズボタンを1回クリックですべてのExceptionをブレークポーズボタンをもう1回クリックでcatchされていないExceptionをブレーク
WorkersWeb  Workers開始時にブレークする別のウィンドウされ、Web  WorkerのJSがデバッグできる
LiveEdit!デバッグ中でもJavaScriptを編集できる編集した結果を保存すると⾃自動的に再実⾏行行される
Timelineパネルを使ったパフォーマンスチューニング
デモ
Timelineパネル
Timelineパネル     記録ボタンを押して計測開始     記録ボタンをもう⼀一度度押して計測停⽌止             GCの実施         記録開始・終了了15ms以下のレコードを⾮非表⽰示
Timelineパネルレコードの種類 Loading  …  読み込みなどのネットワークに関するレコード Scripting  …  イベントや関数呼び出しなどJSの実⾏行行に関するレコード Rendering  …  DOMの参照や変更更、レ...
Eventsの⾒見見⽅方全体的に時間が掛かっているイベントの割合を⾒見見てチューニングすべき項⽬目をチェックする  Loading  >  ネットワーク系のチューニング  Scripting  >  JavaScriptのチューニング  Ren...
Framesの⾒見見⽅方スムーズにスクロール、アニメーションなどができているかどうかを時間別に確認する30FPSライン、60FPSラインを⾒見見て、ラインを越えているレコードがないかどうかを確認するアニメーションは、30FPS(24FPSぐらい...
チューニングすべき部分ラインを越えて、突出しているレコードがチューニング対象ドラッグで表⽰示範囲を調整できる
レコードの詳細を確認する レコードをクリックすれば詳細を表⽰示可能 そのままでソースを表⽰示できるものもあれば、できないものもある
Loadingレコード
Loadingレコード     レコード名                            説明Send  Request       リクエストの送信Receive  Response   レスポンスの受信               ...
Scriptingレコード
Scriptingレコード            レコード名                                  説明Evaluate  Script            JavaScriptコードを読み込み・実⾏行行するFun...
RenderingレコードDOMアクセスによって発⽣生するキャッシュをうまく利利⽤用したりしてDOMアクセスを最⼩小限に
Renderingレコード     レコード名                        説明Recalculate  Style   要素(DOM)の参照や変更更、スタイルの変更更などLayout               レイアウトの...
Renderingレコードのパフォーマンスボトルネックリフローが発⽣生する操作を繰り返すと発⽣生する
Paintingレコードもっともパフォーマンスに影響しやすいレコード過度度な装飾は控える
Paintingレコード        レコード名                    説明Composite  Layers   レイヤーの合成Paint               画⾯面の描画Scroll              スク...
TimelineパネルとProfilesパネル  を使ったメモリリーク調査
デモ
Memoryの⾒見見⽅方メモリーリークをチェックすることができるメモリの使⽤用量量が定期的に下降降しているのは、GCが発⽣生しているためGCは、⼀一定以上のメモリを消費するかアイドル時間に⾃自動的に発⽣生するグラフが右肩上がりか、徐々に上がって...
Memory  (Counters)  の⾒見見⽅方                    [最⼩小値  -‐‑‒  最⼤大値] DOM  Node  CountやEvent  Listener  Countが増えて、減らな い場合はリークして...
ProfilesCPU、CSS  Selector、Heap  Snapshotなどがあるが今回は、Take  Heap  Snapshotを簡単に解説します
Profiles記録⽅方法は、Timelineと同じ(Startボタンでも可能)スナップショットは、定点の記録なので⼀一瞬で終了了CPU  Profileでは、console.profile(プロファイル名)、  console.profileEnd(...
Profiles  (Heap  Snapshots)   スナップショットを2つ記録して比較
Profiles  (Heap  Snapshots)  差分からGCで回収されていないオブジェクトを⾒見見つける  項⽬目        #  New  >  新規オブジェクト        #  Deleted  >  削除オブジェクト   ...
Objects  retaining  treeそのオブジェクトに対してどのような参照が残っているかを確認して、適切切に参照を解放する
その他のTips
Chrome  Developer  Tools     の実験的機能の有効chrome://flagsSettings
便便利利な拡張機能Page  Speed  …  ページ⾼高速化のための提案をしてくれるAccessibility  Developer  Tools  …  アクセシビリティを確保するための提案をAuditsに追加するjQuery  Debu...
DevTools  autosave
⾒見見た⽬目のカスタマイズMNML  Theme  (https://github.com/frontdevDE/mnml-‐‑‒devtools-‐‑‒theme)
⾒見見た⽬目のカスタマイズCustom.cssに任意のスタイルを定義するMac  ~∼/Library/Application  Support/Google/Chrome/Default/  User  StyleSheets/Custom....
その他のテーマMNML  Theme(https://github.com/frontdevDE/mnml-‐‑‒devtools-‐‑‒theme)  Monokai  Dark(https://gist.github.com/bc12d6b...
チートシートhttp://anti-code.com/devtools-cheatsheet/
まとめChrome  Developer  Toolsは、使いこなせば様々な分析はできますが、万能ではありません。Chrome  Developer  Toolsは、あくまで必要な情報を提供するというツールです。ツールを使うのは⼈人間なので、う...
Thank  you!! (@yoshikawa_̲t)
Resourceshttps://developers.google.com/chrome-‐‑‒developer-‐‑‒tools/https://developers.google.com/live/chrome/http://anti-...
Upcoming SlideShare
Loading in...5
×

Chrome Developer Toolsを使いこなそう!

78,583

Published on

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

Published in: Technology
0 Comments
192 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
78,583
On Slideshare
0
From Embeds
0
Number of Embeds
20
Actions
Shares
0
Downloads
215
Comments
0
Likes
192
Embeds 0
No embeds

No notes for slide

Chrome Developer Toolsを使いこなそう!

  1. 1. Chrome  Developer  Tools  を 使いこなそう! 2013/04/02 Google  Developers  Live  Japan  #3  このスライドを使ったセッションはこちら  →  http://bit.ly/YYtStr Toru  Yoshikawa  (@yoshikawa_̲t)
  2. 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. 3. はじめに初⼼心者向けの解説はこちらから Chrome  DevTools  for  beginners  (http:// www.slideshare.net/yoshikawa_̲t/chrome-‐‑‒ devtools-‐‑‒for-‐‑‒beginners)本資料料は、あくまで解説を聞きながらメモを取らなくて済むようにしたものです。本資料料のみでは、若若⼲干わかりづらい部分があるかもしれませんので、ご注意ください。
  4. 4. 対象範囲Elements  …  要素・スタイルの確認・編集Resources  …  ファイル構成・リソース(Web  Storageなど)の確認  Network  …  ネットワークアクセスの確認・分析Sources  …  ソースファイルの確認・保存、JavaScriptのデバッグTimeline  …  パフォーマンスの測定と分析Profiles  …  CPU、メモリ状況、CSSセレクターのプロファイルAudits  …  ネットワーク、サイトスピードのチェック・推奨事項Console  …  エラーログ表⽰示、JavaScript・コンソールコマンドの実⾏行行
  5. 5. AgendaSourcesパネルの基本とTipsJavaScriptのデバッグTimelineパネルを使ったパフォーマンスチューニングTimelineパネルとProfilesパネルを使ったメモリリーク調査
  6. 6. Sourcesパネルの基本とTips
  7. 7. Sourcesパネルファイルツリー サイドパネル ソースパネル
  8. 8. 各部解説 サイドパネルの 表⽰示・⾮非表⽰示 タブ ※「Content  scripts」は Chrome  Extensionsで利利⽤用して いるスクリプトこと サイドパネルの固定 ドメインごとの ファイルツリー
  9. 9. ファイルの保存と履履歴管理理ElementsパネルやSourcesパネルで編集した結果は、右クリックで保存する右クリック「Local  Modifications...」で履履歴管理理ができる
  10. 10. ファイルの履履歴管理理
  11. 11. 便便利利なショートカットショートカット Command+O  …  ファイル選択 Command+Shift+O  …  関数・セレクター選択 Command+L  …  指定⾏行行へ移動 Command+Option+F  …  ソースコードの全⽂文検索索
  12. 12. 全⽂文検索索
  13. 13. MinifyされたJavaScriptコードの整形 MinifyされたJavaScriptコードを整形できる そのままデバッグ可能
  14. 14. JavaScriptのデバッグ
  15. 15. JavaScriptのデバッグの基本的な流流れ1. デバッグの開始(コードの停⽌止)2. 状態の監視3. ステップ実⾏行行4. 「2」に戻る
  16. 16. デバッグの開始(コードの停⽌止) 基本的な⽅方法 Breakpoints debugger句句
  17. 17. 状態の監視Watch  ExpressionsCall  StackScope  VariableConsole
  18. 18. Watch  Expressions
  19. 19. Call  Stack
  20. 20. Scope  Variables
  21. 21. Console
  22. 22. ステップ実⾏行行Pause/Continue  (F8)Step  over  (F10)Step  into  (F11)Step  out  (Shift+F11)
  23. 23. 指定箇所まで移動
  24. 24. いろいろなコードの停⽌止⽅方法 条件付きBreakpoints DOM  Breakpoints XHR  Breakpoints Event  Listener  Breakpoints Exception発⽣生 Workers
  25. 25. 条件付きBreakpointsある式がtrueになった際にブレークする⾏行行番号の右クリックから式を⼊入⼒力力
  26. 26. DOM  Breakpointsある要素が変化した際にブレークする 属性の変化 ⼦子要素の追加 要素の削除Elementsパネルから要素を右クリックEvent  Listener  BreakpointsのDOM  Mutationでも可能
  27. 27. XHR  BreakpointsXHR(Ajax)が投げられた際にブレークするリクエスト先のURLに含まれる⽂文字列列を指定するXHR  Breakpointsパネルから+ボタン
  28. 28. Event  Listener  Breakpoints イベントが発⽣生した際にブレークする イベント Animation,  Timer requestAnimationFrameやsetTimeoutなど Control,  Device resizeやscroll,  deviceorientationなど Clipboard Touch,  Mouse,  Keyboard DOM  Mutation DOM操作
  29. 29. Exception発⽣生Exceptionが発⽣生した際にブレークするステータスバーのポーズボタンポーズボタンを1回クリックですべてのExceptionをブレークポーズボタンをもう1回クリックでcatchされていないExceptionをブレーク
  30. 30. WorkersWeb  Workers開始時にブレークする別のウィンドウされ、Web  WorkerのJSがデバッグできる
  31. 31. LiveEdit!デバッグ中でもJavaScriptを編集できる編集した結果を保存すると⾃自動的に再実⾏行行される
  32. 32. Timelineパネルを使ったパフォーマンスチューニング
  33. 33. デモ
  34. 34. Timelineパネル
  35. 35. Timelineパネル 記録ボタンを押して計測開始 記録ボタンをもう⼀一度度押して計測停⽌止 GCの実施 記録開始・終了了15ms以下のレコードを⾮非表⽰示
  36. 36. Timelineパネルレコードの種類 Loading  …  読み込みなどのネットワークに関するレコード Scripting  …  イベントや関数呼び出しなどJSの実⾏行行に関するレコード Rendering  …  DOMの参照や変更更、レンダリングなどに関するレコード Painting  …  画像の表⽰示やopacity、box-‐‑‒shadowなど画⾯面の表⽰示に関す るレコード
  37. 37. Eventsの⾒見見⽅方全体的に時間が掛かっているイベントの割合を⾒見見てチューニングすべき項⽬目をチェックする Loading  >  ネットワーク系のチューニング Scripting  >  JavaScriptのチューニング Rendering,  Painting  >  DOM操作、描画系のチューニング上部のタイムにある⻘青いラインは、DOMContentLoadedイベントを表す⾚赤いラインは、loadイベントを表す
  38. 38. Framesの⾒見見⽅方スムーズにスクロール、アニメーションなどができているかどうかを時間別に確認する30FPSライン、60FPSラインを⾒見見て、ラインを越えているレコードがないかどうかを確認するアニメーションは、30FPS(24FPSぐらいでも良良い)FPSゲームなどのシビアなものは60FPS
  39. 39. チューニングすべき部分ラインを越えて、突出しているレコードがチューニング対象ドラッグで表⽰示範囲を調整できる
  40. 40. レコードの詳細を確認する レコードをクリックすれば詳細を表⽰示可能 そのままでソースを表⽰示できるものもあれば、できないものもある
  41. 41. Loadingレコード
  42. 42. Loadingレコード レコード名 説明Send  Request リクエストの送信Receive  Response レスポンスの受信 レスポンスデータの受信。⼤大きいデータの場合、複数のReceive  Data レコードに分かれることがある。Finish  Loading レスポンスデータの受信完了了 HTMLのパース。JavaScriptによるdocument.write()やParse  HTML 要素のinnerHTML属性への追加でも発⽣生する。
  43. 43. Scriptingレコード
  44. 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. 45. RenderingレコードDOMアクセスによって発⽣生するキャッシュをうまく利利⽤用したりしてDOMアクセスを最⼩小限に
  46. 46. Renderingレコード レコード名 説明Recalculate  Style 要素(DOM)の参照や変更更、スタイルの変更更などLayout レイアウトの変更更
  47. 47. Renderingレコードのパフォーマンスボトルネックリフローが発⽣生する操作を繰り返すと発⽣生する
  48. 48. Paintingレコードもっともパフォーマンスに影響しやすいレコード過度度な装飾は控える
  49. 49. Paintingレコード レコード名 説明Composite  Layers レイヤーの合成Paint 画⾯面の描画Scroll スクロールImage  Decode 画像のデコード処理理Image  Resize 画像のリサイズ処理理
  50. 50. TimelineパネルとProfilesパネル を使ったメモリリーク調査
  51. 51. デモ
  52. 52. Memoryの⾒見見⽅方メモリーリークをチェックすることができるメモリの使⽤用量量が定期的に下降降しているのは、GCが発⽣生しているためGCは、⼀一定以上のメモリを消費するかアイドル時間に⾃自動的に発⽣生するグラフが右肩上がりか、徐々に上がっていく場合は注意が必要
  53. 53. Memory  (Counters)  の⾒見見⽅方 [最⼩小値  -‐‑‒  最⼤大値] DOM  Node  CountやEvent  Listener  Countが増えて、減らな い場合はリークしている可能性がある iframeの内容もカウントされる 問題がありそうな場合には、Profilesで詳細を確認する
  54. 54. ProfilesCPU、CSS  Selector、Heap  Snapshotなどがあるが今回は、Take  Heap  Snapshotを簡単に解説します
  55. 55. Profiles記録⽅方法は、Timelineと同じ(Startボタンでも可能)スナップショットは、定点の記録なので⼀一瞬で終了了CPU  Profileでは、console.profile(プロファイル名)、  console.profileEnd()などのコードで正確な位置で記録することもできる
  56. 56. Profiles  (Heap  Snapshots) スナップショットを2つ記録して比較
  57. 57. Profiles  (Heap  Snapshots) 差分からGCで回収されていないオブジェクトを⾒見見つける 項⽬目 #  New  >  新規オブジェクト #  Deleted  >  削除オブジェクト #  Delta  >  差分カウント Alloc.  Size  >  割り当てられたメモリサイズ Freed  Size  >  解放されたメモリサイズ Size  Delta  >  差分メモリサイズ
  58. 58. Objects  retaining  treeそのオブジェクトに対してどのような参照が残っているかを確認して、適切切に参照を解放する
  59. 59. その他のTips
  60. 60. Chrome  Developer  Tools の実験的機能の有効chrome://flagsSettings
  61. 61. 便便利利な拡張機能Page  Speed  …  ページ⾼高速化のための提案をしてくれるAccessibility  Developer  Tools  …  アクセシビリティを確保するための提案をAuditsに追加するjQuery  Debugger  …  jQueryのイベントやデータをElementsパネルで確認できるDevTools  autosave  …  ElementsパネルやSourcesパネルで編集した内容を⾃自動的にローカルに保存するAngularJS  Batarang  …  AngularJSの開発に凄く便便利利RailsPanel  …  Ruby  on  Railsの開発に凄く便便利利
  62. 62. DevTools  autosave
  63. 63. ⾒見見た⽬目のカスタマイズMNML  Theme  (https://github.com/frontdevDE/mnml-‐‑‒devtools-‐‑‒theme)
  64. 64. ⾒見見た⽬目のカスタマイズCustom.cssに任意のスタイルを定義するMac ~∼/Library/Application  Support/Google/Chrome/Default/ User  StyleSheets/Custom.cssWindows C:UsersYourUsernameAppDataLocalGoogleChrome User  DataDefaultUser  StyleSheetsCustom.css⼤大本のスタイルの確認(DevToolsをデバッグしても良良い) chrome-‐‑‒devtools://devtools/devTools.css
  65. 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. 66. チートシートhttp://anti-code.com/devtools-cheatsheet/
  67. 67. まとめChrome  Developer  Toolsは、使いこなせば様々な分析はできますが、万能ではありません。Chrome  Developer  Toolsは、あくまで必要な情報を提供するというツールです。ツールを使うのは⼈人間なので、うまく⼯工夫してデバッグやチューニングを⾏行行いましょう。モバイルはRemote  debugで実機チェックをしましょう。Chrome  Developer  Toolsは、頻繁にアップデートされています。新しい機能を是⾮非試してみて下さい。(要望した機能も追加されるかも?)
  68. 68. Thank  you!! (@yoshikawa_̲t)
  69. 69. Resourceshttps://developers.google.com/chrome-‐‑‒developer-‐‑‒tools/https://developers.google.com/live/chrome/http://anti-‐‑‒code.com/devtools-‐‑‒cheatsheet/
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×