Soumettre la recherche
Mettre en ligne
Devtools.next
•
17 j'aime
•
1,880 vues
yoshikawa_t
Suivre
HTML5 Conference Miyazaki 2013のセッション資料です。
Lire moins
Lire la suite
Technologie
Affichage du diaporama
Signaler
Partager
Affichage du diaporama
Signaler
Partager
1 sur 71
Télécharger maintenant
Télécharger pour lire hors ligne
Recommandé
jQuery Performance Tips – jQueryにおける高速化 -
jQuery Performance Tips – jQueryにおける高速化 -
Hayato Mizuno
HTML5&API総まくり
HTML5&API総まくり
Shumpei Shiraishi
Chrome DevTools Awesome 10 Features +1
Chrome DevTools Awesome 10 Features +1
yoshikawa_t
DevTools at Etsy
DevTools at Etsy
Daniel Schauenberg
пк
пк
Nova Gromada
What Happens When Kids Learn To Code?
What Happens When Kids Learn To Code?
Vizwik
Web Performance Optimization: The Silver Bullet of SEO and UX
Web Performance Optimization: The Silver Bullet of SEO and UX
Jonathon Colman
Chrome DevTools.next
Chrome DevTools.next
yoshikawa_t
Recommandé
jQuery Performance Tips – jQueryにおける高速化 -
jQuery Performance Tips – jQueryにおける高速化 -
Hayato Mizuno
HTML5&API総まくり
HTML5&API総まくり
Shumpei Shiraishi
Chrome DevTools Awesome 10 Features +1
Chrome DevTools Awesome 10 Features +1
yoshikawa_t
DevTools at Etsy
DevTools at Etsy
Daniel Schauenberg
пк
пк
Nova Gromada
What Happens When Kids Learn To Code?
What Happens When Kids Learn To Code?
Vizwik
Web Performance Optimization: The Silver Bullet of SEO and UX
Web Performance Optimization: The Silver Bullet of SEO and UX
Jonathon Colman
Chrome DevTools.next
Chrome DevTools.next
yoshikawa_t
Chrome Developer Toolsを使いこなそう!
Chrome Developer Toolsを使いこなそう!
yoshikawa_t
Firefox DevTools
Firefox DevTools
dynamis
JavaScript And Keywords
JavaScript And Keywords
uupaa
2012 05-19第44回cocoa勉強会発表資料
2012 05-19第44回cocoa勉強会発表資料
OCHI Shuji
Mvc conf session_5_isami
Mvc conf session_5_isami
Hiroshi Okunushi
jQuery と MVC で実践する標準志向 Web 開発
jQuery と MVC で実践する標準志向 Web 開発
Akira Inoue
アドテク×Scala×パフォーマンスチューニング
アドテク×Scala×パフォーマンスチューニング
Yosuke Mizutani
HTML5最新動向
HTML5最新動向
Shumpei Shiraishi
CruiseControl.NET設置
CruiseControl.NET設置
Kuniaki Igarashi
Redmineを使ってみよう
Redmineを使ってみよう
mrgoofy33 .
Concentrated HTML5 & Attractive HTML5
Concentrated HTML5 & Attractive HTML5
Sho Ito
DEV-010_エンプラ系業務 Web アプリ開発に効く! 実践的 SPA 型モダン Web アプリ開発の選択手法
DEV-010_エンプラ系業務 Web アプリ開発に効く! 実践的 SPA 型モダン Web アプリ開発の選択手法
decode2016
2013 Ignite UI 最新情報 in 岡山
2013 Ignite UI 最新情報 in 岡山
インフラジスティックス・ジャパン株式会社
Lotus Notes/Domino Application Development by XPages and Beyond
Lotus Notes/Domino Application Development by XPages and Beyond
Atsushi Sato
サーバー管理よ、サヨウナラ。サーバーレス アーキテクチャの意義と実践
サーバー管理よ、サヨウナラ。サーバーレス アーキテクチャの意義と実践
真吾 吉田
Microsoft Edge F12 開発者ツール
Microsoft Edge F12 開発者ツール
Yoshihisa Ozaki
DeClang 誕生!Clang ベースのハッキング対策コンパイラ【DeNA TechCon 2020 ライブ配信】
DeClang 誕生!Clang ベースのハッキング対策コンパイラ【DeNA TechCon 2020 ライブ配信】
DeNA
Webに今求められているレベル: HTML5 コントロールを利用した開発
Webに今求められているレベル: HTML5 コントロールを利用した開発
インフラジスティックス・ジャパン株式会社
Angular の紹介
Angular の紹介
Neo Xrea
jQuery Mobile 1.2 最新情報 & Tips
jQuery Mobile 1.2 最新情報 & Tips
yoshikawa_t
Ionicで作るTechfeed
Ionicで作るTechfeed
yoshikawa_t
困った時のDev toolsの使い方(初心者向け)
困った時のDev toolsの使い方(初心者向け)
yoshikawa_t
Contenu connexe
Similaire à Devtools.next
Chrome Developer Toolsを使いこなそう!
Chrome Developer Toolsを使いこなそう!
yoshikawa_t
Firefox DevTools
Firefox DevTools
dynamis
JavaScript And Keywords
JavaScript And Keywords
uupaa
2012 05-19第44回cocoa勉強会発表資料
2012 05-19第44回cocoa勉強会発表資料
OCHI Shuji
Mvc conf session_5_isami
Mvc conf session_5_isami
Hiroshi Okunushi
jQuery と MVC で実践する標準志向 Web 開発
jQuery と MVC で実践する標準志向 Web 開発
Akira Inoue
アドテク×Scala×パフォーマンスチューニング
アドテク×Scala×パフォーマンスチューニング
Yosuke Mizutani
HTML5最新動向
HTML5最新動向
Shumpei Shiraishi
CruiseControl.NET設置
CruiseControl.NET設置
Kuniaki Igarashi
Redmineを使ってみよう
Redmineを使ってみよう
mrgoofy33 .
Concentrated HTML5 & Attractive HTML5
Concentrated HTML5 & Attractive HTML5
Sho Ito
DEV-010_エンプラ系業務 Web アプリ開発に効く! 実践的 SPA 型モダン Web アプリ開発の選択手法
DEV-010_エンプラ系業務 Web アプリ開発に効く! 実践的 SPA 型モダン Web アプリ開発の選択手法
decode2016
2013 Ignite UI 最新情報 in 岡山
2013 Ignite UI 最新情報 in 岡山
インフラジスティックス・ジャパン株式会社
Lotus Notes/Domino Application Development by XPages and Beyond
Lotus Notes/Domino Application Development by XPages and Beyond
Atsushi Sato
サーバー管理よ、サヨウナラ。サーバーレス アーキテクチャの意義と実践
サーバー管理よ、サヨウナラ。サーバーレス アーキテクチャの意義と実践
真吾 吉田
Microsoft Edge F12 開発者ツール
Microsoft Edge F12 開発者ツール
Yoshihisa Ozaki
DeClang 誕生!Clang ベースのハッキング対策コンパイラ【DeNA TechCon 2020 ライブ配信】
DeClang 誕生!Clang ベースのハッキング対策コンパイラ【DeNA TechCon 2020 ライブ配信】
DeNA
Webに今求められているレベル: HTML5 コントロールを利用した開発
Webに今求められているレベル: HTML5 コントロールを利用した開発
インフラジスティックス・ジャパン株式会社
Angular の紹介
Angular の紹介
Neo Xrea
jQuery Mobile 1.2 最新情報 & Tips
jQuery Mobile 1.2 最新情報 & Tips
yoshikawa_t
Similaire à Devtools.next
(20)
Chrome Developer Toolsを使いこなそう!
Chrome Developer Toolsを使いこなそう!
Firefox DevTools
Firefox DevTools
JavaScript And Keywords
JavaScript And Keywords
2012 05-19第44回cocoa勉強会発表資料
2012 05-19第44回cocoa勉強会発表資料
Mvc conf session_5_isami
Mvc conf session_5_isami
jQuery と MVC で実践する標準志向 Web 開発
jQuery と MVC で実践する標準志向 Web 開発
アドテク×Scala×パフォーマンスチューニング
アドテク×Scala×パフォーマンスチューニング
HTML5最新動向
HTML5最新動向
CruiseControl.NET設置
CruiseControl.NET設置
Redmineを使ってみよう
Redmineを使ってみよう
Concentrated HTML5 & Attractive HTML5
Concentrated HTML5 & Attractive HTML5
DEV-010_エンプラ系業務 Web アプリ開発に効く! 実践的 SPA 型モダン Web アプリ開発の選択手法
DEV-010_エンプラ系業務 Web アプリ開発に効く! 実践的 SPA 型モダン Web アプリ開発の選択手法
2013 Ignite UI 最新情報 in 岡山
2013 Ignite UI 最新情報 in 岡山
Lotus Notes/Domino Application Development by XPages and Beyond
Lotus Notes/Domino Application Development by XPages and Beyond
サーバー管理よ、サヨウナラ。サーバーレス アーキテクチャの意義と実践
サーバー管理よ、サヨウナラ。サーバーレス アーキテクチャの意義と実践
Microsoft Edge F12 開発者ツール
Microsoft Edge F12 開発者ツール
DeClang 誕生!Clang ベースのハッキング対策コンパイラ【DeNA TechCon 2020 ライブ配信】
DeClang 誕生!Clang ベースのハッキング対策コンパイラ【DeNA TechCon 2020 ライブ配信】
Webに今求められているレベル: HTML5 コントロールを利用した開発
Webに今求められているレベル: HTML5 コントロールを利用した開発
Angular の紹介
Angular の紹介
jQuery Mobile 1.2 最新情報 & Tips
jQuery Mobile 1.2 最新情報 & Tips
Plus de yoshikawa_t
Ionicで作るTechfeed
Ionicで作るTechfeed
yoshikawa_t
困った時のDev toolsの使い方(初心者向け)
困った時のDev toolsの使い方(初心者向け)
yoshikawa_t
TechFeedというテクノロジーキュレーションサービスを作った話
TechFeedというテクノロジーキュレーションサービスを作った話
yoshikawa_t
これからのモバイルWebと最新動向
これからのモバイルWebと最新動向
yoshikawa_t
いまさら聞けないHTML5概要
いまさら聞けないHTML5概要
yoshikawa_t
オフラインWebアプリの再到来で今、再び注目されるAPIの本命 ーJavaScript SQL-like database
オフラインWebアプリの再到来で今、再び注目されるAPIの本命 ーJavaScript SQL-like database
yoshikawa_t
jQuery Mobile is not dead!
jQuery Mobile is not dead!
yoshikawa_t
HTML5開発最前線
HTML5開発最前線
yoshikawa_t
Chrome Apps のデバイスAPI
Chrome Apps のデバイスAPI
yoshikawa_t
Chrome Apps & Chromeウェブストア概要
Chrome Apps & Chromeウェブストア概要
yoshikawa_t
Chrome DevTools for beginners v1.2
Chrome DevTools for beginners v1.2
yoshikawa_t
モバイル時代のWebパフォーマンス
モバイル時代のWebパフォーマンス
yoshikawa_t
モバイル時代のWebパフォーマンスTips
モバイル時代のWebパフォーマンスTips
yoshikawa_t
Chrome apps for mobile 概要
Chrome apps for mobile 概要
yoshikawa_t
Chrome Apps 概要
Chrome Apps 概要
yoshikawa_t
Chrome Devtools for beginners (v1.1)
Chrome Devtools for beginners (v1.1)
yoshikawa_t
Html5概要 & デモ
Html5概要 & デモ
yoshikawa_t
いまさら聞けないCSSレイアウト入門
いまさら聞けないCSSレイアウト入門
yoshikawa_t
Sencha touch vs j query mobile
Sencha touch vs j query mobile
yoshikawa_t
jQuery MobileとHTML5
jQuery MobileとHTML5
yoshikawa_t
Plus de yoshikawa_t
(20)
Ionicで作るTechfeed
Ionicで作るTechfeed
困った時のDev toolsの使い方(初心者向け)
困った時のDev toolsの使い方(初心者向け)
TechFeedというテクノロジーキュレーションサービスを作った話
TechFeedというテクノロジーキュレーションサービスを作った話
これからのモバイルWebと最新動向
これからのモバイルWebと最新動向
いまさら聞けないHTML5概要
いまさら聞けないHTML5概要
オフラインWebアプリの再到来で今、再び注目されるAPIの本命 ーJavaScript SQL-like database
オフラインWebアプリの再到来で今、再び注目されるAPIの本命 ーJavaScript SQL-like database
jQuery Mobile is not dead!
jQuery Mobile is not dead!
HTML5開発最前線
HTML5開発最前線
Chrome Apps のデバイスAPI
Chrome Apps のデバイスAPI
Chrome Apps & Chromeウェブストア概要
Chrome Apps & Chromeウェブストア概要
Chrome DevTools for beginners v1.2
Chrome DevTools for beginners v1.2
モバイル時代のWebパフォーマンス
モバイル時代のWebパフォーマンス
モバイル時代のWebパフォーマンスTips
モバイル時代のWebパフォーマンスTips
Chrome apps for mobile 概要
Chrome apps for mobile 概要
Chrome Apps 概要
Chrome Apps 概要
Chrome Devtools for beginners (v1.1)
Chrome Devtools for beginners (v1.1)
Html5概要 & デモ
Html5概要 & デモ
いまさら聞けないCSSレイアウト入門
いまさら聞けないCSSレイアウト入門
Sencha touch vs j query mobile
Sencha touch vs j query mobile
jQuery MobileとHTML5
jQuery MobileとHTML5
Dernier
LoRaWANスマート距離検出センサー DS20L カタログ LiDARデバイス
LoRaWANスマート距離検出センサー DS20L カタログ LiDARデバイス
CRI Japan, Inc.
知識ゼロの営業マンでもできた!超速で初心者を脱する、悪魔的学習ステップ3選.pptx
知識ゼロの営業マンでもできた!超速で初心者を脱する、悪魔的学習ステップ3選.pptx
sn679259
論文紹介: The Surprising Effectiveness of PPO in Cooperative Multi-Agent Games
論文紹介: The Surprising Effectiveness of PPO in Cooperative Multi-Agent Games
atsushi061452
論文紹介:Selective Structured State-Spaces for Long-Form Video Understanding
論文紹介:Selective Structured State-Spaces for Long-Form Video Understanding
Toru Tamaki
新人研修 後半 2024/04/26の勉強会で発表されたものです。
新人研修 後半 2024/04/26の勉強会で発表されたものです。
iPride Co., Ltd.
論文紹介:Video-GroundingDINO: Towards Open-Vocabulary Spatio-Temporal Video Groun...
論文紹介:Video-GroundingDINO: Towards Open-Vocabulary Spatio-Temporal Video Groun...
Toru Tamaki
Amazon SES を勉強してみる その32024/04/26の勉強会で発表されたものです。
Amazon SES を勉強してみる その32024/04/26の勉強会で発表されたものです。
iPride Co., Ltd.
Utilizing Ballerina for Cloud Native Integrations
Utilizing Ballerina for Cloud Native Integrations
WSO2
LoRaWAN スマート距離検出デバイスDS20L日本語マニュアル
LoRaWAN スマート距離検出デバイスDS20L日本語マニュアル
CRI Japan, Inc.
Amazon SES を勉強してみる その22024/04/26の勉強会で発表されたものです。
Amazon SES を勉強してみる その22024/04/26の勉強会で発表されたものです。
iPride Co., Ltd.
Dernier
(10)
LoRaWANスマート距離検出センサー DS20L カタログ LiDARデバイス
LoRaWANスマート距離検出センサー DS20L カタログ LiDARデバイス
知識ゼロの営業マンでもできた!超速で初心者を脱する、悪魔的学習ステップ3選.pptx
知識ゼロの営業マンでもできた!超速で初心者を脱する、悪魔的学習ステップ3選.pptx
論文紹介: The Surprising Effectiveness of PPO in Cooperative Multi-Agent Games
論文紹介: The Surprising Effectiveness of PPO in Cooperative Multi-Agent Games
論文紹介:Selective Structured State-Spaces for Long-Form Video Understanding
論文紹介:Selective Structured State-Spaces for Long-Form Video Understanding
新人研修 後半 2024/04/26の勉強会で発表されたものです。
新人研修 後半 2024/04/26の勉強会で発表されたものです。
論文紹介:Video-GroundingDINO: Towards Open-Vocabulary Spatio-Temporal Video Groun...
論文紹介:Video-GroundingDINO: Towards Open-Vocabulary Spatio-Temporal Video Groun...
Amazon SES を勉強してみる その32024/04/26の勉強会で発表されたものです。
Amazon SES を勉強してみる その32024/04/26の勉強会で発表されたものです。
Utilizing Ballerina for Cloud Native Integrations
Utilizing Ballerina for Cloud Native Integrations
LoRaWAN スマート距離検出デバイスDS20L日本語マニュアル
LoRaWAN スマート距離検出デバイスDS20L日本語マニュアル
Amazon SES を勉強してみる その22024/04/26の勉強会で発表されたものです。
Amazon SES を勉強してみる その22024/04/26の勉強会で発表されたものです。
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.
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 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.
条件付きBreakpoints ある式がtrueになった際にブレークする ⾏行行番号の右クリックから式を⼊入⼒力力
37.
DOM Breakpoints ある要素が変化した際にブレークする
属性の変化 ⼦子要素の追加 要素の削除 Elementsパネルから要素を右クリック Event Listener BreakpointsのDOM Mutationでも可能
38.
XHR Breakpoints XHR(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.
Workers Web Workers開始時にブレークする 別のウィンドウされ、Web WorkerのJSがデバッ グできる
42.
その他のTips MinifyされたJavaScriptコードを整形できる そのままデバッグ可能
43.
その他のTips Consoleで利利⽤用可能なコマンド 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.
Demo http://www.jankfree.com/jank-‐‑‒busters-‐‑‒io/examples/measuring-‐‑‒fps/smooth.html
53.
Demo http://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.
Profiles CPU、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 Speed Accessibility Developer
Tools jQuery Debugger DevTools autosave
63.
Page Speed Webサイトのスピード測定とサジェスト Page Speedタブが追加される
64.
Accessibility Developer Tools
Auditsでアクセシビリティに関するサジェスト
65.
jQuery Debugger ElementsパネルにjQuery DataとjQuery
Eventsパネルを追加 jQuery Selectorのinspectorが追加
66.
DevTools autosave DevToolsで修正したソースの内容をローカルに反映 アドレスごとに保存先を設定可能
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.
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/ )
Télécharger maintenant