Your SlideShare is downloading. ×
0
Chrome DevTools.next
Chrome DevTools.next
Chrome DevTools.next
Chrome DevTools.next
Chrome DevTools.next
Chrome DevTools.next
Chrome DevTools.next
Chrome DevTools.next
Chrome DevTools.next
Chrome DevTools.next
Chrome DevTools.next
Chrome DevTools.next
Chrome DevTools.next
Chrome DevTools.next
Chrome DevTools.next
Chrome DevTools.next
Chrome DevTools.next
Chrome DevTools.next
Chrome DevTools.next
Chrome DevTools.next
Chrome DevTools.next
Chrome DevTools.next
Chrome DevTools.next
Chrome DevTools.next
Chrome DevTools.next
Chrome DevTools.next
Chrome DevTools.next
Chrome DevTools.next
Chrome DevTools.next
Chrome DevTools.next
Chrome DevTools.next
Chrome DevTools.next
Chrome DevTools.next
Chrome DevTools.next
Chrome DevTools.next
Chrome DevTools.next
Chrome DevTools.next
Chrome DevTools.next
Chrome DevTools.next
Chrome DevTools.next
Chrome DevTools.next
Chrome DevTools.next
Chrome DevTools.next
Chrome DevTools.next
Chrome DevTools.next
Chrome DevTools.next
Chrome DevTools.next
Chrome DevTools.next
Chrome DevTools.next
Chrome DevTools.next
Chrome DevTools.next
Chrome DevTools.next
Chrome DevTools.next
Chrome DevTools.next
Chrome DevTools.next
Chrome DevTools.next
Chrome DevTools.next
Chrome DevTools.next
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Chrome DevTools.next

24,819

Published on

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

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

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

No Downloads
Views
Total Views
24,819
On Slideshare
0
From Embeds
0
Number of Embeds
24
Actions
Shares
0
Downloads
115
Comments
0
Likes
98
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 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. Agenda1. 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  >  SpiderMonkeyJavaScript⾼高速化等のTipsは⼤大抵同様に効果がある
  • 8. 特殊URLchrome:で始まる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://flagsSettings
  • 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! デバッガ デバッグの開始 状態の監視 ステップ実⾏行行
  • 17. デバッグの開始基本的な⽅方法 debugger句句 Breakpoints
  • 18. 状態の監視Watch  ExpressionsCall  StackScope  VariableConsole
  • 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
  • 21. 条件付きBreakpointsある式がtrueになった際にブレークする⾏行行番号の右クリックから式を⼊入⼒力力
  • 22. DOM  Breakpointsある要素が変化した際にブレークする 属性の変化 ⼦子要素の追加 要素の削除Elementsパネルから要素を右クリックEvent  Listener  BreakpointsのDOM  Mutationでも可能
  • 23. XHR  BreakpointsXHR(Ajax)が投げられた際にブレークするリクエスト先のURLに含まれる⽂文字列列を指定するXHR  Breakpointsパネルから+ボタン
  • 24. Event  Listener  Breakpoints イベントが発⽣生した際にブレークする イベント Animation,  Timer requestAnimationFrameやsetTimeoutなど Control,  Device resizeやscroll,  deviceorientationなど Clipboard Touch,  Mouse,  Keyboard DOM  Mutation DOM操作
  • 25. Exception発⽣生Exceptionが発⽣生した際にブレークするステータスバーのポーズボタンポーズボタンを1回クリックですべてのExceptionをブレークポーズボタンをもう1回クリックでcatchされていないExceptionをブレーク
  • 26. WorkersWeb  Workers開始時にブレークする別のウィンドウされ、Web  WorkerのJSがデバッグできる
  • 27. その他のTipsMinifyされたJavaScriptコードを整形できるそのままデバッグ可能
  • 28. その他のTipsConsoleで利利⽤用可能なコマンド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イベントを表す
  • 34. Framesの⾒見見⽅方スムーズにスクロール、アニメーションなどができているかどうかを時間別に確認する30FPSライン、60FPSラインを⾒見見て、ラインを越えているレコードがないかどうかを確認するアニメーションは、30FPS(24FPSぐらいでも良良い)FPSゲームなどのシビアなものは60FPS
  • 35. チューニングすべき部分ラインを越えて、突出しているレコードがチューニング対象ドラッグで表⽰示範囲を調整できる
  • 36. レコードの詳細を確認する レコードをクリックすれば詳細を表⽰示可能 そのままでソースを表⽰示できるものもあれば、できないものもある
  • 37. Demohttp://www.jankfree.com/jank-‐‑‒busters-‐‑‒io/examples/measuring-‐‑‒fps/smooth.html
  • 38. Demohttp://www.jankfree.com/jank-‐‑‒busters-‐‑‒io/examples/sluggish-‐‑‒scroll/sluggish-‐‑‒scroll.html
  • 39. Memoryの⾒見見⽅方メモリーリークをチェックすることができるメモリの使⽤用量量が定期的に下降降しているのは、GCが発⽣生しているためGCは、⼀一定以上のメモリを消費するかアイドル時間に⾃自動的に発⽣生するグラフが右肩上がりか、徐々に上がっていく場合は注意が必要
  • 40. Memory  (Counters)  の⾒見見⽅方 [計測時点  -‐‑‒  現在] DOM  Node  CountやEvent  Listener  Countが増えて、減らな い場合はリークしている可能性がある iframeの内容もカウントされる 問題がありそうな場合には、Profilesで詳細を確認する
  • 41. ProfilesCPU、CSS  Selector、Heap  Snapshotなどがあるが今回は、Take  Heap  Snapshotを簡単に解説します
  • 42. Profiles記録⽅方法は、Timelineと同じ(Startボタンでも可能)スナップショットは、定点の記録なので⼀一瞬で終了了CPU  Profileでは、console.profile(プロファイル名)、  console.profileEnd()などのコードで正確な位置で記録することもできる
  • 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  Timeperformance.now()  //  webkitNow()performance.timing.navigationStartからの経過を時間をミリ秒以下の精度度で取得する
  • 48. おまけ
  • 49. 便便利利な拡張機能Page  SpeedAccessibility  Developer  ToolsjQuery  DebuggerDevTools  autosave
  • 50. Page  SpeedWebサイトのスピード測定とサジェストPage  Speedタブが追加される
  • 51. Accessibility  Developer  Tools Auditsでアクセシビリティに関するサジェスト
  • 52. jQuery  DebuggerElementsパネルにjQuery  DataとjQuery  Eventsパネルを追加jQuery  Selectorのinspectorが追加
  • 53. DevTools  autosaveDevToolsで修正したソースの内容をローカルに反映アドレスごとに保存先を設定可能
  • 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でぐぐれば⾊色々⾒見見つかります
  • 56. まとめDevToolsは使いこなせば様々な分析ができるが、万能ではないDevToolsはあくまで情報を提供するもので、デバッグやチューニングはトライ&エラーでモバイルはRemote  Debugで実機チェックをDevToolsは常に進化しているので、必要な情報があれば機能要望で追加されるかも?
  • 57. Thank  you!! (  @yoshikawa_̲t  )
  • 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/  )

×