More Related Content
Similar to Chrome DevTools.next (20)
More from yoshikawa_t (16)
Chrome DevTools.next
- 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
- 9. Canary ビルド
HTML5、Chrome Developer Toolsの最新の機能が利利⽤用できる
$_̲ 最後の評価結果の参照 (Console)
Styled console log (Console)
JPEGのデコード時間の表⽰示(Timeline)
etc...
プロファイルがStableと別になっているので、Stableと同時に
利利⽤用できる
- 10. Canary ビルド
Chrome Developer Toolsの実験的機能の有効
chrome://flags
Settings
- 14. Sourcesパネル
サイドパネルの
表⽰示・⾮非表⽰示
タブ
※「Content scripts」は
Chrome Extensionsで利利⽤用して
いるスクリプトこと
サイドパネルの固定
ドメインごとの
ファイルツリー
- 24. Event Listener Breakpoints
イベントが発⽣生した際にブレークする
イベント
Animation, Timer
requestAnimationFrameやsetTimeoutなど
Control, Device
resizeやscroll, deviceorientationなど
Clipboard
Touch, Mouse, Keyboard
DOM Mutation
DOM操作
- 31. Timelineパネル
記録ボタンを押して計測開始
記録ボタンをもう⼀一度度押して計測停⽌止
GCの実施
記録開始・終了了
15ms以下のレコードを⾮非表⽰示
- 32. Timelineパネル
レコードの種類
Loading … 読み込みなどのネットワークに関するレコード
Scripting … イベントや関数呼び出しなどJSの実⾏行行に関するレコード
Rendering … DOMの参照や変更更、レンダリングなどに関するレコード
Painting … 画像の表⽰示やopacity、box-‐‑‒shadowなど画⾯面の表⽰示に関す
るレコード
- 40. Memory (Counters) の⾒見見⽅方
[計測時点 -‐‑‒ 現在]
DOM Node CountやEvent Listener Countが増えて、減らな
い場合はリークしている可能性がある
iframeの内容もカウントされる
問題がありそうな場合には、Profilesで詳細を確認する
- 44. Profiles (Heap Snapshots)
差分からGCで回収されていないオブジェクトを⾒見見つける
項⽬目
# New > 新規オブジェクト
# Deleted > 削除オブジェクト
# Delta > 差分カウント
Alloc. Size > 割り当てられたメモリサイズ
Freed Size > 解放されたメモリサイズ
Size Delta > 差分メモリサイズ
- 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でぐぐれば⾊色々⾒見見つかります
- 58. 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/ )