Download as PDF, PPTX
![Memory (Counters) の⾒見見⽅方
[計測時点 -‐‑‒ 現在]
DOM Node CountやEvent Listener Countが増えて、減らな
い場合はリークしている可能性がある
iframeの内容もカウントされる
問題がありそうな場合には、Profilesで詳細を確認する](https://image.slidesharecdn.com/devtools-130209235903-phpapp01/75/Devtools-next-55-2048.jpg)
![[2025 Rakuten Technology Conference] Daybreak for AI Agents](https://cdn.slidesharecdn.com/ss_thumbnails/2025rakutentechnologyconferenceai-251119080407-027fe107-thumbnail.jpg?width=640&height=640&fit=bounds)
Devtools.next
- 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. Agenda 1. 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 > SpiderMonkey JavaScript⾼高速化等のTipsは⼤大抵同様に効果がある
- 6. 特殊URL chrome:で始まる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.html HTML5、Chrome Developer Toolsの最新の機能が利利⽤用できる $_̲ 最後の評価結果の参照 (Console) Styled console log (Console) JPEGのリサイズ・デコード時間の表⽰示(Timeline) etc... プロファイルがStableと別になっているので、Stableと同時に利利⽤用 できる
- 8. Chrome Developer Tools の実験的機能の有効 chrome://flags Settings
- 9.
- 10.
- 11. 機能概要 Elements … 要素・スタイルの確認・編集 Resources … ファイル構成・リソース（Web Storageなど）の確認 Network … ネットワークアクセスの確認・分析 Sources … ソースファイルの確認・保存、JavaScriptのデバッグ Timeline … パフォーマンスの測定と分析 Profiles … CPU、メモリ状況、CSSセレクターのプロファイル Audits … ネットワーク、サイトスピードのチェック・推奨事項 Console … エラーログ表⽰示、JavaScript・コンソールコマンドの実⾏行行
- 12.
- 13. 表⽰示位置変更更 Dockto right Dock to bottom Window アイコンクリックで切切り替え アイコン⻑⾧長押しで、リストがポップアップ
- 14.
- 15.
- 16.
- 17.
- 18. 要素の確認と編集 要素の編集 要素の確認
- 19. スタイルの確認と編集 ComputedStyle
- 20. スタイルの確認と編集 Styles
- 21.
- 22. スタイルの確認と編集 Metrics
- 23.
- 24.
- 25. Remote debug Chrome for Android, iOSで動作 Androidの開発環境をインストール USBデバッグで接続 コマンド実⾏行行 $> adb forward tcp:9222 localabstract:chrome_devtools_remote Chromeでlocalhost:9222を表⽰示
- 26. Remote debug デバッグするタブを選択
- 27.
- 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.
- 33. 状態の監視 Watch Expressions Call Stack Scope Variable Console
- 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.
- 37. DOM Breakpoints ある要素が変化した際にブレークする 属性の変化 ⼦子要素の追加 要素の削除 Elementsパネルから要素を右クリック Event Listener BreakpointsのDOM Mutationでも可能
- 38.
- 39. Event Listener Breakpoints イベントが発⽣生した際にブレークする イベント Animation, Timer requestAnimationFrameやsetTimeoutなど Control, Device resizeやscroll, deviceorientationなど Clipboard Touch, Mouse, Keyboard DOM Mutation DOM操作
- 40.
- 41.
- 42.
- 43. その他のTips Consoleで利利⽤用可能なコマンド Firebug のコマンドラインは⼤大抵利利⽤用できる http://ss-‐‑‒o.net/event/20120212/
- 44. パフォーマンスの測定と チューニング
- 45.
- 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.
- 50.
- 51.
- 52.
- 53.
- 54.
- 55. Memory (Counters) の⾒見見⽅方 [計測時点 -‐‑‒ 現在] DOM Node CountやEvent Listener Countが増えて、減らな い場合はリークしている可能性がある iframeの内容もカウントされる 問題がありそうな場合には、Profilesで詳細を確認する
- 56. Profiles CPU、CSS Selector、Heap Snapshotなどがあるが 今回は、Take Heap Snapshotを簡単に解説します
- 57.
- 58. Profiles (Heap Snapshots) スナップショットを2つ記録して比較
- 59. Profiles (Heap Snapshots) 差分からGCで回収されていないオブジェクトを⾒見見つける 項⽬目 # New > 新規オブジェクト # Deleted > 削除オブジェクト # Delta > 差分カウント Alloc. Size > 割り当てられたメモリサイズ Freed Size > 解放されたメモリサイズ Size Delta > 差分メモリサイズ
- 60.
- 61. Chrome Devtools Cheatsheet http://anti-code.com/devtools-cheatsheet/
- 62. 便便利利な拡張機能 Page Speed Accessibility Developer Tools jQuery Debugger DevTools autosave
- 63.
- 64. Accessibility Developer Tools Auditsでアクセシビリティに関するサジェスト
- 65. jQuery Debugger ElementsパネルにjQuery DataとjQuery Eventsパネルを追加 jQuery Selectorのinspectorが追加
- 66.
- 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.
- 70. Thank you!! ( @yoshikawa_̲t )
- 71. Resources Chrome 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/ )