0
Chrome  DevTools.next                                2012/12/21                               Cyber  Agent         Toru  Y...
Who?吉川  徹  /  Toru  Yoshikawa@yoshikawa_̲t   C.A.Mobile  Web先端技術フェロー   Google  API  Expert  (  Chrome  )   コミュニティ活動       ...
著書「HTML5ガイドブック  増補改訂版」(共著)                   「jQuery  Mobile  パーフェクトガイド」http://www.amazon.co.jp/dp/4844332937   http://www...
Chrome Developer Toolsの概要は既にこちらで解説していますので参考にしてください! https://speakerdeck.com/t32k/improve-web-performance-with-chrome-dev-t...
Agenda1. ChromeでのWeb開発の基礎知識識2. JavaScriptのデバッグ3. パフォーマンスの測定とチューニング4. おまけ  1. 便便利利な拡張機能  2. Chrome  Developer  Toolsのカスタマイズ...
ChromeでのWeb開発の     基礎知識識
ブラウザの挙動Safari、Android  Browserと同じWebkitベースのブラウザのため、ほぼ同様の動作をするJavaScriptエンジンが上記ブラウザとは違うので若若⼲干注意(互換性の問題はほとんどなし)  Webkit  >  ...
特殊URLchrome:で始まるURLで設定やデバッグ⽤用の有⽤用な情報を参照することができるchrome://about  でURL⼀一覧を表⽰示  chrome://flags  >  各種設定  chrome://appcache-‐‑‒i...
Canary  ビルドHTML5、Chrome  Developer  Toolsの最新の機能が利利⽤用できる  $_̲  最後の評価結果の参照  (Console)  Styled  console  log  (Console)  JPEG...
Canary  ビルド           Chrome  Developer  Toolsの実験的機能の有効chrome://flagsSettings
Canary  ビルドChrome  Developer  Tools  の最新情報  Peter  Beverloo  Web  Inspector  commits  RSS  feed
JavaScriptのデバッグ
Sourcesパネルファイルツリー            サイドパネル          ソースパネル
Sourcesパネル          サイドパネルの           表⽰示・⾮非表⽰示                  タブ            ※「Content  scripts」は         Chrome  Extens...
Sourcesパネルショートカット Command+O  …  ファイル選択 Command+Shift+O  …  関数選択 Command+L  …  指定⾏行行へ移動 Command+Option+F  …  ソースコードのGREP検索索
JavaScriptのデバッグの基本 console.log! デバッガ   デバッグの開始   状態の監視   ステップ実⾏行行
デバッグの開始基本的な⽅方法 debugger句句 Breakpoints
状態の監視Watch  ExpressionsCall  StackScope  VariableConsole
ステップ実⾏行行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がデバッグできる
その他のTipsMinifyされたJavaScriptコードを整形できるそのままデバッグ可能
その他のTipsConsoleで利利⽤用可能なコマンドFirebug  のコマンドラインは⼤大抵利利⽤用できる             http://ss-‐‑‒o.net/event/20120212/
パフォーマンスの測定と   チューニング
Timelineパネル
Timelineパネル     記録ボタンを押して計測開始     記録ボタンをもう⼀一度度押して計測停⽌止             GCの実施         記録開始・終了了15ms以下のレコードを⾮非表⽰示
Timelineパネルレコードの種類 Loading  …  読み込みなどのネットワークに関するレコード Scripting  …  イベントや関数呼び出しなどJSの実⾏行行に関するレコード Rendering  …  DOMの参照や変更更、レ...
Eventsの⾒見見⽅方全体的に時間が掛かっているイベントの割合を⾒見見てチューニングすべき項⽬目をチェックする  Loading  >  ネットワーク系のチューニング  Scripting  >  JavaScriptのチューニング  Ren...
Framesの⾒見見⽅方スムーズにスクロール、アニメーションなどができているかどうかを時間別に確認する30FPSライン、60FPSラインを⾒見見て、ラインを越えているレコードがないかどうかを確認するアニメーションは、30FPS(24FPSぐらい...
チューニングすべき部分ラインを越えて、突出しているレコードがチューニング対象ドラッグで表⽰示範囲を調整できる
レコードの詳細を確認する レコードをクリックすれば詳細を表⽰示可能 そのままでソースを表⽰示できるものもあれば、できないものもある
Demohttp://www.jankfree.com/jank-‐‑‒busters-‐‑‒io/examples/measuring-‐‑‒fps/smooth.html
Demohttp://www.jankfree.com/jank-‐‑‒busters-‐‑‒io/examples/sluggish-‐‑‒scroll/sluggish-‐‑‒scroll.html
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  >  削除オブジェクト   ...
HTML5を使って⼿手動で計測する Navigation  Timing  API   各種イベントの処理理タイミングを取得する High  Resolution  Time   ミリ秒以下の精度度で経過時間を計測する いずれも勧告済み
Navigation  Timing  API// サンプルコードconsole.log ( performance.timing.navigationStart )
High  Resolution  Timeperformance.now()  //  webkitNow()performance.timing.navigationStartからの経過を時間をミリ秒以下の精度度で取得する
おまけ
便便利利な拡張機能Page  SpeedAccessibility  Developer  ToolsjQuery  DebuggerDevTools  autosave
Page  SpeedWebサイトのスピード測定とサジェストPage  Speedタブが追加される
Accessibility  Developer  Tools  Auditsでアクセシビリティに関するサジェスト
jQuery  DebuggerElementsパネルにjQuery  DataとjQuery  Eventsパネルを追加jQuery  Selectorのinspectorが追加
DevTools  autosaveDevToolsで修正したソースの内容をローカルに反映アドレスごとに保存先を設定可能
Chrome  Developer  Tools    のカスタマイズ  https://github.com/frontdevDE/mnml-‐‑‒devtools-‐‑‒theme
Chrome  Developer  Tools    のカスタマイズ Custom.cssに任意のスタイルを定義する Mac       ~∼/Library/Application  Support/Google/Chrome/Defaul...
まとめDevToolsは使いこなせば様々な分析ができるが、万能ではないDevToolsはあくまで情報を提供するもので、デバッグやチューニングはトライ&エラーでモバイルはRemote  Debugで実機チェックをDevToolsは常に進化している...
Thank  you!! (  @yoshikawa_̲t  )
ResourcesChrome  Developers  Live:  Chrome  (  https://developers.google.com/live/chrome/  )Chrome  Canary  for  Developer...
Upcoming SlideShare
Loading in...5
×

Chrome DevTools.next

25,238

Published on

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

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

No Downloads
Views
Total Views
25,238
On Slideshare
0
From Embeds
0
Number of Embeds
24
Actions
Shares
0
Downloads
116
Comments
0
Likes
98
Embeds 0
No embeds

No notes for slide

Transcript of "Chrome DevTools.next"

  1. 1. Chrome  DevTools.next 2012/12/21 Cyber  Agent Toru  Yoshikawa  (  @yoshikawa_̲t  )
  2. 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. 3. 著書「HTML5ガイドブック  増補改訂版」(共著) 「jQuery  Mobile  パーフェクトガイド」http://www.amazon.co.jp/dp/4844332937 http://www.amazon.co.jp/dp/484433266X
  4. 4. Chrome Developer Toolsの概要は既にこちらで解説していますので参考にしてください! https://speakerdeck.com/t32k/improve-web-performance-with-chrome-dev-tools
  5. 5. Agenda1. ChromeでのWeb開発の基礎知識識2. JavaScriptのデバッグ3. パフォーマンスの測定とチューニング4. おまけ 1. 便便利利な拡張機能 2. Chrome  Developer  Toolsのカスタマイズ5. まとめ
  6. 6. ChromeでのWeb開発の 基礎知識識
  7. 7. ブラウザの挙動Safari、Android  Browserと同じWebkitベースのブラウザのため、ほぼ同様の動作をするJavaScriptエンジンが上記ブラウザとは違うので若若⼲干注意(互換性の問題はほとんどなし) Webkit  >  JavaScriptCore Chrome  >  V8  (Node.jsもV8を利利⽤用している) Firefox  >  SpiderMonkeyJavaScript⾼高速化等のTipsは⼤大抵同様に効果がある
  8. 8. 特殊URLchrome:で始まるURLで設定やデバッグ⽤用の有⽤用な情報を参照することができるchrome://about  でURL⼀一覧を表⽰示 chrome://flags  >  各種設定 chrome://appcache-‐‑‒internals  >  AppCacheの管理理 chrome://net-‐‑‒internals  >  ネットワーク情報 etc...
  9. 9. Canary  ビルドHTML5、Chrome  Developer  Toolsの最新の機能が利利⽤用できる $_̲  最後の評価結果の参照  (Console) Styled  console  log  (Console) JPEGのデコード時間の表⽰示(Timeline) etc...プロファイルがStableと別になっているので、Stableと同時に利利⽤用できる
  10. 10. Canary  ビルド Chrome  Developer  Toolsの実験的機能の有効chrome://flagsSettings
  11. 11. Canary  ビルドChrome  Developer  Tools  の最新情報 Peter  Beverloo Web  Inspector  commits  RSS  feed
  12. 12. JavaScriptのデバッグ
  13. 13. Sourcesパネルファイルツリー サイドパネル ソースパネル
  14. 14. Sourcesパネル サイドパネルの 表⽰示・⾮非表⽰示 タブ ※「Content  scripts」は Chrome  Extensionsで利利⽤用して いるスクリプトこと サイドパネルの固定 ドメインごとの ファイルツリー
  15. 15. Sourcesパネルショートカット Command+O  …  ファイル選択 Command+Shift+O  …  関数選択 Command+L  …  指定⾏行行へ移動 Command+Option+F  …  ソースコードのGREP検索索
  16. 16. JavaScriptのデバッグの基本 console.log! デバッガ デバッグの開始 状態の監視 ステップ実⾏行行
  17. 17. デバッグの開始基本的な⽅方法 debugger句句 Breakpoints
  18. 18. 状態の監視Watch  ExpressionsCall  StackScope  VariableConsole
  19. 19. ステップ実⾏行行Pause/Continue  (F8)Step  over  (F10)Step  into  (F11)Step  out  (Shift+F11)
  20. 20. いろいろなデバッグの開始⽅方法 条件付きBreakpoints DOM  Breakpoints XHR  Breakpoints Event  Listener  Breakpoints Exception発⽣生 Workers
  21. 21. 条件付きBreakpointsある式がtrueになった際にブレークする⾏行行番号の右クリックから式を⼊入⼒力力
  22. 22. DOM  Breakpointsある要素が変化した際にブレークする 属性の変化 ⼦子要素の追加 要素の削除Elementsパネルから要素を右クリックEvent  Listener  BreakpointsのDOM  Mutationでも可能
  23. 23. XHR  BreakpointsXHR(Ajax)が投げられた際にブレークするリクエスト先のURLに含まれる⽂文字列列を指定するXHR  Breakpointsパネルから+ボタン
  24. 24. Event  Listener  Breakpoints イベントが発⽣生した際にブレークする イベント Animation,  Timer requestAnimationFrameやsetTimeoutなど Control,  Device resizeやscroll,  deviceorientationなど Clipboard Touch,  Mouse,  Keyboard DOM  Mutation DOM操作
  25. 25. Exception発⽣生Exceptionが発⽣生した際にブレークするステータスバーのポーズボタンポーズボタンを1回クリックですべてのExceptionをブレークポーズボタンをもう1回クリックでcatchされていないExceptionをブレーク
  26. 26. WorkersWeb  Workers開始時にブレークする別のウィンドウされ、Web  WorkerのJSがデバッグできる
  27. 27. その他のTipsMinifyされたJavaScriptコードを整形できるそのままデバッグ可能
  28. 28. その他のTipsConsoleで利利⽤用可能なコマンドFirebug  のコマンドラインは⼤大抵利利⽤用できる http://ss-‐‑‒o.net/event/20120212/
  29. 29. パフォーマンスの測定と チューニング
  30. 30. Timelineパネル
  31. 31. Timelineパネル 記録ボタンを押して計測開始 記録ボタンをもう⼀一度度押して計測停⽌止 GCの実施 記録開始・終了了15ms以下のレコードを⾮非表⽰示
  32. 32. Timelineパネルレコードの種類 Loading  …  読み込みなどのネットワークに関するレコード Scripting  …  イベントや関数呼び出しなどJSの実⾏行行に関するレコード Rendering  …  DOMの参照や変更更、レンダリングなどに関するレコード Painting  …  画像の表⽰示やopacity、box-‐‑‒shadowなど画⾯面の表⽰示に関す るレコード
  33. 33. Eventsの⾒見見⽅方全体的に時間が掛かっているイベントの割合を⾒見見てチューニングすべき項⽬目をチェックする Loading  >  ネットワーク系のチューニング Scripting  >  JavaScriptのチューニング Rendering,  Painting  >  DOM操作、描画系のチューニング上部のタイムにある⻘青いラインは、DOMContentLoadedイベントを表す⾚赤いラインは、loadイベントを表す
  34. 34. Framesの⾒見見⽅方スムーズにスクロール、アニメーションなどができているかどうかを時間別に確認する30FPSライン、60FPSラインを⾒見見て、ラインを越えているレコードがないかどうかを確認するアニメーションは、30FPS(24FPSぐらいでも良良い)FPSゲームなどのシビアなものは60FPS
  35. 35. チューニングすべき部分ラインを越えて、突出しているレコードがチューニング対象ドラッグで表⽰示範囲を調整できる
  36. 36. レコードの詳細を確認する レコードをクリックすれば詳細を表⽰示可能 そのままでソースを表⽰示できるものもあれば、できないものもある
  37. 37. Demohttp://www.jankfree.com/jank-‐‑‒busters-‐‑‒io/examples/measuring-‐‑‒fps/smooth.html
  38. 38. Demohttp://www.jankfree.com/jank-‐‑‒busters-‐‑‒io/examples/sluggish-‐‑‒scroll/sluggish-‐‑‒scroll.html
  39. 39. Memoryの⾒見見⽅方メモリーリークをチェックすることができるメモリの使⽤用量量が定期的に下降降しているのは、GCが発⽣生しているためGCは、⼀一定以上のメモリを消費するかアイドル時間に⾃自動的に発⽣生するグラフが右肩上がりか、徐々に上がっていく場合は注意が必要
  40. 40. Memory  (Counters)  の⾒見見⽅方 [計測時点  -‐‑‒  現在] DOM  Node  CountやEvent  Listener  Countが増えて、減らな い場合はリークしている可能性がある iframeの内容もカウントされる 問題がありそうな場合には、Profilesで詳細を確認する
  41. 41. ProfilesCPU、CSS  Selector、Heap  Snapshotなどがあるが今回は、Take  Heap  Snapshotを簡単に解説します
  42. 42. Profiles記録⽅方法は、Timelineと同じ(Startボタンでも可能)スナップショットは、定点の記録なので⼀一瞬で終了了CPU  Profileでは、console.profile(プロファイル名)、  console.profileEnd()などのコードで正確な位置で記録することもできる
  43. 43. Profiles  (Heap  Snapshots) スナップショットを2つ記録して比較
  44. 44. Profiles  (Heap  Snapshots) 差分からGCで回収されていないオブジェクトを⾒見見つける 項⽬目 #  New  >  新規オブジェクト #  Deleted  >  削除オブジェクト #  Delta  >  差分カウント Alloc.  Size  >  割り当てられたメモリサイズ Freed  Size  >  解放されたメモリサイズ Size  Delta  >  差分メモリサイズ
  45. 45. HTML5を使って⼿手動で計測する Navigation  Timing  API 各種イベントの処理理タイミングを取得する High  Resolution  Time ミリ秒以下の精度度で経過時間を計測する いずれも勧告済み
  46. 46. Navigation  Timing  API// サンプルコードconsole.log ( performance.timing.navigationStart )
  47. 47. High  Resolution  Timeperformance.now()  //  webkitNow()performance.timing.navigationStartからの経過を時間をミリ秒以下の精度度で取得する
  48. 48. おまけ
  49. 49. 便便利利な拡張機能Page  SpeedAccessibility  Developer  ToolsjQuery  DebuggerDevTools  autosave
  50. 50. Page  SpeedWebサイトのスピード測定とサジェストPage  Speedタブが追加される
  51. 51. Accessibility  Developer  Tools Auditsでアクセシビリティに関するサジェスト
  52. 52. jQuery  DebuggerElementsパネルにjQuery  DataとjQuery  Eventsパネルを追加jQuery  Selectorのinspectorが追加
  53. 53. DevTools  autosaveDevToolsで修正したソースの内容をローカルに反映アドレスごとに保存先を設定可能
  54. 54. Chrome  Developer  Tools のカスタマイズ https://github.com/frontdevDE/mnml-‐‑‒devtools-‐‑‒theme
  55. 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. 56. まとめDevToolsは使いこなせば様々な分析ができるが、万能ではないDevToolsはあくまで情報を提供するもので、デバッグやチューニングはトライ&エラーでモバイルはRemote  Debugで実機チェックをDevToolsは常に進化しているので、必要な情報があれば機能要望で追加されるかも?
  57. 57. Thank  you!! (  @yoshikawa_̲t  )
  58. 58. ResourcesChrome  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/  )
  1. A particular slide catching your eye?

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

×