Devtools.next
Upcoming SlideShare
Loading in...5
×
 

Like this? Share it with your network

Share

Devtools.next

on

  • 2,513 views

HTML5 Conference Miyazaki 2013のセッション資料です。

HTML5 Conference Miyazaki 2013のセッション資料です。

Statistics

Views

Total Views
2,513
Views on SlideShare
2,487
Embed Views
26

Actions

Likes
17
Downloads
11
Comments
0

2 Embeds 26

https://twitter.com 25
http://s.deeeki.com 1

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Devtools.next Presentation Transcript

  • 1. DevTools.next 2013/2/10 HTML5カンファレンス宮崎  2013 Toru  Yoshikawa  (  @yoshikawa_̲t  )
  • 2. Who?吉川  徹  /  Toru  Yoshikawa@yoshikawa_̲t C.A.Mobile  Web先端技術フェロー Google  Developer  Experts  (Chrome) html5j.org/HTML5とか勉強会スタッフ allWebクリエイター塾/jQuery  Mobile担当講師 Blog:  http://d.hatena.ne.jp/pikotea/
  • 3. Agenda1. ChromeでのWeb開発の基礎知識識2. 要素・スタイルの確認・編集3. モバイルのデバッグ4. JavaScriptのデバッグ5. パフォーマンスの測定とチューニング6. Tips
  • 4. ChromeでのWeb開発の 基礎知識識
  • 5. ブラウザの挙動Safari、Android  Browserと同じWebkitベースのブラウザのため、ほぼ同様の動作をするJavaScriptエンジンが上記ブラウザとは違うので若若⼲干注意(互換性の問題はほとんどなし) Webkit  >  JavaScriptCore Chrome  >  V8  (Node.jsもV8を利利⽤用している) Firefox  >  SpiderMonkeyJavaScript⾼高速化等のTipsは⼤大抵同様に効果がある
  • 6. 特殊URLchrome:で始まるURLで設定やデバッグ⽤用の有⽤用な情報を参照することができるchrome://about  でURL⼀一覧を表⽰示 chrome://flags  >  各種設定 chrome://appcache-‐‑‒internals  >  AppCacheの管理理 chrome://net-‐‑‒internals  >  ネットワーク情報 etc...
  • 7. Canary  ビルドhttps://www.google.com/intl/ja/chrome/browser/canary.htmlHTML5、Chrome  Developer  Toolsの最新の機能が利利⽤用できる $_̲  最後の評価結果の参照  (Console) Styled  console  log  (Console) JPEGのリサイズ・デコード時間の表⽰示(Timeline) etc...プロファイルがStableと別になっているので、Stableと同時に利利⽤用できる
  • 8. Chrome  Developer  Tools の実験的機能の有効chrome://flagsSettings
  • 9. Chrome  Developer  Tools  概要
  • 10. 起動⽅方法右上の設定アイコン>ツール>デベロッパーツール右クリック>要素を検証ショートカット(Windows:  Ctl+Shift+i、Mac:  Command+Option+i)
  • 11. 機能概要Elements  …  要素・スタイルの確認・編集Resources  …  ファイル構成・リソース(Web  Storageなど)の確認Network  …  ネットワークアクセスの確認・分析Sources  …  ソースファイルの確認・保存、JavaScriptのデバッグTimeline  …  パフォーマンスの測定と分析Profiles  …  CPU、メモリ状況、CSSセレクターのプロファイルAudits  …  ネットワーク、サイトスピードのチェック・推奨事項Console  …  エラーログ表⽰示、JavaScript・コンソールコマンドの実⾏行行
  • 12. 共通部分
  • 13. 表⽰示位置変更更 Dock to right Dock to bottom Windowアイコンクリックで切切り替えアイコン⻑⾧長押しで、リストがポップアップ
  • 14. 設定
  • 15. ショートカット?キーでショートカット一覧表示
  • 16. 要素やスタイルを確認・編集する
  • 17. Elementsパネル
  • 18. 要素の確認と編集 要素の編集要素の確認
  • 19. スタイルの確認と編集 Computed Style
  • 20. スタイルの確認と編集 Styles
  • 21. スタイルの確認と編集編集した結果は、Sourcesパネルで保存可能
  • 22. スタイルの確認と編集 Metrics
  • 23. モバイルのデバッグ
  • 24. Overrides
  • 25. Remote  debug Chrome  for  Android,  iOSで動作 Androidの開発環境をインストール USBデバッグで接続 コマンド実⾏行行$> adb forward tcp:9222 localabstract:chrome_devtools_remote Chromeでlocalhost:9222を表⽰示
  • 26. Remote  debug デバッグするタブを選択
  • 27. JavaScriptのデバッグ
  • 28. Sourcesパネルファイルツリー サイドパネル ソースパネル
  • 29. Sourcesパネル サイドパネルの 表⽰示・⾮非表⽰示 タブ ※「Content  scripts」は Chrome  Extensionsで利利⽤用して いるスクリプトこと サイドパネルの固定 ドメインごとの ファイルツリー
  • 30. Sourcesパネルショートカット Command+O  …  ファイル選択 Command+Shift+O  …  関数選択 Command+L  …  指定⾏行行へ移動 Command+Option+F  …  ソースコードのGREP検索索
  • 31. JavaScriptのデバッグの基本 console.log! デバッガ デバッグの開始 状態の監視 ステップ実⾏行行
  • 32. デバッグの開始基本的な⽅方法 debugger句句 Breakpoints
  • 33. 状態の監視Watch  ExpressionsCall  StackScope  VariableConsole
  • 34. ステップ実⾏行行Pause/Continue  (F8)Step  over  (F10)Step  into  (F11)Step  out  (Shift+F11)
  • 35. いろいろなデバッグの開始⽅方法 条件付きBreakpoints DOM  Breakpoints XHR  Breakpoints Event  Listener  Breakpoints Exception発⽣生 Workers
  • 36. 条件付きBreakpointsある式がtrueになった際にブレークする⾏行行番号の右クリックから式を⼊入⼒力力
  • 37. DOM  Breakpointsある要素が変化した際にブレークする 属性の変化 ⼦子要素の追加 要素の削除Elementsパネルから要素を右クリックEvent  Listener  BreakpointsのDOM  Mutationでも可能
  • 38. XHR  BreakpointsXHR(Ajax)が投げられた際にブレークするリクエスト先のURLに含まれる⽂文字列列を指定するXHR  Breakpointsパネルから+ボタン
  • 39. Event  Listener  Breakpoints イベントが発⽣生した際にブレークする イベント Animation,  Timer requestAnimationFrameやsetTimeoutなど Control,  Device resizeやscroll,  deviceorientationなど Clipboard Touch,  Mouse,  Keyboard DOM  Mutation DOM操作
  • 40. Exception発⽣生Exceptionが発⽣生した際にブレークするステータスバーのポーズボタンポーズボタンを1回クリックですべてのExceptionをブレークポーズボタンをもう1回クリックでcatchされていないExceptionをブレーク
  • 41. WorkersWeb  Workers開始時にブレークする別のウィンドウされ、Web  WorkerのJSがデバッグできる
  • 42. その他のTipsMinifyされたJavaScriptコードを整形できるそのままデバッグ可能
  • 43. その他のTipsConsoleで利利⽤用可能なコマンドFirebug  のコマンドラインは⼤大抵利利⽤用できる http://ss-‐‑‒o.net/event/20120212/
  • 44. パフォーマンスの測定と チューニング
  • 45. Timelineパネル
  • 46. Timelineパネル 記録ボタンを押して計測開始 記録ボタンをもう⼀一度度押して計測停⽌止 GCの実施 記録開始・終了了15ms以下のレコードを⾮非表⽰示
  • 47. Timelineパネルレコードの種類 Loading  …  読み込みなどのネットワークに関するレコード Scripting  …  イベントや関数呼び出しなどJSの実⾏行行に関するレコード Rendering  …  DOMの参照や変更更、レンダリングなどに関するレコード Painting  …  画像の表⽰示やopacity、box-‐‑‒shadowなど画⾯面の表⽰示に関す るレコード
  • 48. Eventsの⾒見見⽅方全体的に時間が掛かっているイベントの割合を⾒見見てチューニングすべき項⽬目をチェックする Loading  >  ネットワーク系のチューニング Scripting  >  JavaScriptのチューニング Rendering,  Painting  >  DOM操作、描画系のチューニング上部のタイムにある⻘青いラインは、DOMContentLoadedイベントを表す⾚赤いラインは、loadイベントを表す
  • 49. Framesの⾒見見⽅方スムーズにスクロール、アニメーションなどができているかどうかを時間別に確認する30FPSライン、60FPSラインを⾒見見て、ラインを越えているレコードがないかどうかを確認するアニメーションは、30FPS(24FPSぐらいでも良良い)FPSゲームなどのシビアなものは60FPS
  • 50. チューニングすべき部分ラインを越えて、突出しているレコードがチューニング対象ドラッグで表⽰示範囲を調整できる
  • 51. レコードの詳細を確認する レコードをクリックすれば詳細を表⽰示可能 そのままでソースを表⽰示できるものもあれば、できないものもある
  • 52. Demohttp://www.jankfree.com/jank-‐‑‒busters-‐‑‒io/examples/measuring-‐‑‒fps/smooth.html
  • 53. Demohttp://www.jankfree.com/jank-‐‑‒busters-‐‑‒io/examples/sluggish-‐‑‒scroll/sluggish-‐‑‒scroll.html
  • 54. Memoryの⾒見見⽅方メモリーリークをチェックすることができるメモリの使⽤用量量が定期的に下降降しているのは、GCが発⽣生しているためGCは、⼀一定以上のメモリを消費するかアイドル時間に⾃自動的に発⽣生するグラフが右肩上がりか、徐々に上がっていく場合は注意が必要
  • 55. Memory  (Counters)  の⾒見見⽅方 [計測時点  -‐‑‒  現在] DOM  Node  CountやEvent  Listener  Countが増えて、減らな い場合はリークしている可能性がある iframeの内容もカウントされる 問題がありそうな場合には、Profilesで詳細を確認する
  • 56. ProfilesCPU、CSS  Selector、Heap  Snapshotなどがあるが今回は、Take  Heap  Snapshotを簡単に解説します
  • 57. Profiles記録⽅方法は、Timelineと同じ(Startボタンでも可能)スナップショットは、定点の記録なので⼀一瞬で終了了CPU  Profileでは、console.profile(プロファイル名)、  console.profileEnd()などのコードで正確な位置で記録することもできる
  • 58. Profiles  (Heap  Snapshots) スナップショットを2つ記録して比較
  • 59. Profiles  (Heap  Snapshots) 差分からGCで回収されていないオブジェクトを⾒見見つける 項⽬目 #  New  >  新規オブジェクト #  Deleted  >  削除オブジェクト #  Delta  >  差分カウント Alloc.  Size  >  割り当てられたメモリサイズ Freed  Size  >  解放されたメモリサイズ Size  Delta  >  差分メモリサイズ
  • 60. Tips
  • 61. Chrome  Devtools  Cheatsheet http://anti-code.com/devtools-cheatsheet/
  • 62. 便便利利な拡張機能Page  SpeedAccessibility  Developer  ToolsjQuery  DebuggerDevTools  autosave
  • 63. Page  SpeedWebサイトのスピード測定とサジェストPage  Speedタブが追加される
  • 64. Accessibility  Developer  Tools Auditsでアクセシビリティに関するサジェスト
  • 65. jQuery  DebuggerElementsパネルにjQuery  DataとjQuery  Eventsパネルを追加jQuery  Selectorのinspectorが追加
  • 66. DevTools  autosaveDevToolsで修正したソースの内容をローカルに反映アドレスごとに保存先を設定可能
  • 67. Chrome  Developer  Tools のカスタマイズ https://github.com/frontdevDE/mnml-‐‑‒devtools-‐‑‒theme
  • 68. 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でぐぐれば⾊色々⾒見見つかります
  • 69. まとめDevToolsは使いこなせば様々な分析ができるが、万能ではないDevToolsはあくまで情報を提供するもので、デバッグやチューニングはトライ&エラーでモバイルはRemote  debugで実機チェックをDevToolsは常に進化しているので、必要な情報があれば機能要望で追加されるかも?
  • 70. Thank  you!! (  @yoshikawa_̲t  )
  • 71. 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/  )