Chrome Developer Toolsを使いこなそう!

  • 20,003 views
Uploaded on

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

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

More in: Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
20,003
On Slideshare
0
From Embeds
0
Number of Embeds
7

Actions

Shares
Downloads
142
Comments
0
Likes
127

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  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・コンソールコマンドの実⾏行行
  • 5. AgendaSourcesパネルの基本とTipsJavaScriptのデバッグTimelineパネルを使ったパフォーマンスチューニングTimelineパネルとProfilesパネルを使ったメモリリーク調査
  • 6. Sourcesパネルの基本とTips
  • 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  ExpressionsCall  StackScope  VariableConsole
  • 18. Watch  Expressions
  • 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
  • 25. 条件付きBreakpointsある式がtrueになった際にブレークする⾏行行番号の右クリックから式を⼊入⼒力力
  • 26. DOM  Breakpointsある要素が変化した際にブレークする 属性の変化 ⼦子要素の追加 要素の削除Elementsパネルから要素を右クリックEvent  Listener  BreakpointsのDOM  Mutationでも可能
  • 27. XHR  BreakpointsXHR(Ajax)が投げられた際にブレークするリクエスト先のURLに含まれる⽂文字列列を指定するXHR  Breakpointsパネルから+ボタン
  • 28. Event  Listener  Breakpoints イベントが発⽣生した際にブレークする イベント Animation,  Timer requestAnimationFrameやsetTimeoutなど Control,  Device resizeやscroll,  deviceorientationなど Clipboard Touch,  Mouse,  Keyboard DOM  Mutation DOM操作
  • 29. Exception発⽣生Exceptionが発⽣生した際にブレークするステータスバーのポーズボタンポーズボタンを1回クリックですべてのExceptionをブレークポーズボタンをもう1回クリックでcatchされていないExceptionをブレーク
  • 30. WorkersWeb  Workers開始時にブレークする別のウィンドウされ、Web  WorkerのJSがデバッグできる
  • 31. LiveEdit!デバッグ中でもJavaScriptを編集できる編集した結果を保存すると⾃自動的に再実⾏行行される
  • 32. Timelineパネルを使ったパフォーマンスチューニング
  • 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イベントを表す
  • 38. Framesの⾒見見⽅方スムーズにスクロール、アニメーションなどができているかどうかを時間別に確認する30FPSライン、60FPSラインを⾒見見て、ラインを越えているレコードがないかどうかを確認するアニメーションは、30FPS(24FPSぐらいでも良良い)FPSゲームなどのシビアなものは60FPS
  • 39. チューニングすべき部分ラインを越えて、突出しているレコードがチューニング対象ドラッグで表⽰示範囲を調整できる
  • 40. レコードの詳細を確認する レコードをクリックすれば詳細を表⽰示可能 そのままでソースを表⽰示できるものもあれば、できないものもある
  • 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 アニメーションフレームの実⾏行行
  • 45. RenderingレコードDOMアクセスによって発⽣生するキャッシュをうまく利利⽤用したりしてDOMアクセスを最⼩小限に
  • 46. Renderingレコード レコード名 説明Recalculate  Style 要素(DOM)の参照や変更更、スタイルの変更更などLayout レイアウトの変更更
  • 47. Renderingレコードのパフォーマンスボトルネックリフローが発⽣生する操作を繰り返すと発⽣生する
  • 48. Paintingレコードもっともパフォーマンスに影響しやすいレコード過度度な装飾は控える
  • 49. Paintingレコード レコード名 説明Composite  Layers レイヤーの合成Paint 画⾯面の描画Scroll スクロールImage  Decode 画像のデコード処理理Image  Resize 画像のリサイズ処理理
  • 50. TimelineパネルとProfilesパネル を使ったメモリリーク調査
  • 51. デモ
  • 52. Memoryの⾒見見⽅方メモリーリークをチェックすることができるメモリの使⽤用量量が定期的に下降降しているのは、GCが発⽣生しているためGCは、⼀一定以上のメモリを消費するかアイドル時間に⾃自動的に発⽣生するグラフが右肩上がりか、徐々に上がっていく場合は注意が必要
  • 53. Memory  (Counters)  の⾒見見⽅方 [最⼩小値  -‐‑‒  最⼤大値] DOM  Node  CountやEvent  Listener  Countが増えて、減らな い場合はリークしている可能性がある iframeの内容もカウントされる 問題がありそうな場合には、Profilesで詳細を確認する
  • 54. ProfilesCPU、CSS  Selector、Heap  Snapshotなどがあるが今回は、Take  Heap  Snapshotを簡単に解説します
  • 55. Profiles記録⽅方法は、Timelineと同じ(Startボタンでも可能)スナップショットは、定点の記録なので⼀一瞬で終了了CPU  Profileでは、console.profile(プロファイル名)、  console.profileEnd()などのコードで正確な位置で記録することもできる
  • 56. Profiles  (Heap  Snapshots) スナップショットを2つ記録して比較
  • 57. Profiles  (Heap  Snapshots) 差分からGCで回収されていないオブジェクトを⾒見見つける 項⽬目 #  New  >  新規オブジェクト #  Deleted  >  削除オブジェクト #  Delta  >  差分カウント Alloc.  Size  >  割り当てられたメモリサイズ Freed  Size  >  解放されたメモリサイズ Size  Delta  >  差分メモリサイズ
  • 58. Objects  retaining  treeそのオブジェクトに対してどのような参照が残っているかを確認して、適切切に参照を解放する
  • 59. その他のTips
  • 60. Chrome  Developer  Tools の実験的機能の有効chrome://flagsSettings
  • 61. 便便利利な拡張機能Page  Speed  …  ページ⾼高速化のための提案をしてくれるAccessibility  Developer  Tools  …  アクセシビリティを確保するための提案をAuditsに追加するjQuery  Debugger  …  jQueryのイベントやデータをElementsパネルで確認できるDevTools  autosave  …  ElementsパネルやSourcesパネルで編集した内容を⾃自動的にローカルに保存するAngularJS  Batarang  …  AngularJSの開発に凄く便便利利RailsPanel  …  Ruby  on  Railsの開発に凄く便便利利
  • 62. DevTools  autosave
  • 63. ⾒見見た⽬目のカスタマイズMNML  Theme  (https://github.com/frontdevDE/mnml-‐‑‒devtools-‐‑‒theme)
  • 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. その他のテーマ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. チートシートhttp://anti-code.com/devtools-cheatsheet/
  • 67. まとめChrome  Developer  Toolsは、使いこなせば様々な分析はできますが、万能ではありません。Chrome  Developer  Toolsは、あくまで必要な情報を提供するというツールです。ツールを使うのは⼈人間なので、うまく⼯工夫してデバッグやチューニングを⾏行行いましょう。モバイルはRemote  debugで実機チェックをしましょう。Chrome  Developer  Toolsは、頻繁にアップデートされています。新しい機能を是⾮非試してみて下さい。(要望した機能も追加されるかも?)
  • 68. Thank  you!! (@yoshikawa_̲t)
  • 69. Resourceshttps://developers.google.com/chrome-‐‑‒developer-‐‑‒tools/https://developers.google.com/live/chrome/http://anti-‐‑‒code.com/devtools-‐‑‒cheatsheet/