Chrome Package Appsコードラボのショートセッションの資料です

1. Chrome Packaged Appsをデバッグ
2013/07/05
Chrome Packaged Apps コードラボ
Toru Yoshikawa (@yoshikawa_̲t)

2. Who?
Google Developer Experts (Chrome)
html5j／HTML5とか勉強会スタッフ
html5j ビギナー部 副部⻑⾧長
Web先端技術味⾒見見部 顧問
⽇日本jQuery Mobileユーザー会 管理理⼈人
Sublime Text 2 Japan Users Group 管理理⼈人
allWebクリエイター塾/jQuery Mobile担当講師
Blog: http://d.hatena.ne.jp/pikotea/
吉川 徹 / Toru Yoshikawa
@yoshikawa_̲t

3. Chromeの拡張機能・アプリをデバッグしよう
デバッグツールの呼び出しアレコレ
アプリ・ウィンドウのデバッグ
バックラウンドページのデバッグ
Content Scriptsのデバッグ
chrome://inspect

4. アプリ・ウィンドウのデバッグ
アプリ・ウィンドウで右クリックメニューの「要
素の検証」「バックグラウンドページの検証」

5. Consoleでエラーを確認しよう
「要素の検証」「バックグラウンドページの検
証」それぞれでConsoleパネルを表⽰示

6. バックグラウンドページのデバッグ
（主に拡張機能など）
ビューを調査でアクティブなファイルがリンクで
表⽰示されるので対象ページをクリック
chrome://extensions

7. Content Scriptのデバッグ
（拡張機能）
対象ページでデベロッパーツールを開いて「Sources」
パネル、ファイルツリーの「Content Scripts」タブ

8. Content ScriptのConsole操作
（拡張機能）
コンソールの下側のセレクトメニューで該当の拡
張機能を選択

9. chrome://inspect
デバッグ可能なページをすべて表⽰示！（リモート
デバッグもこちらから）

10. [PR] 続きは、Chrome本で！
http://amzn.to/15oOVYI

11. Chrome本のデベロッパーツールの章
ウェブページの構造やスタイルを確認する（Elementsパネル）
ウェブサイトの構成やリソース状況を確認する（Resourcesパネル）
ネットワークアクセスを確認する（Networkパネル）
JavaScriptをデバッグする（Sourcesパネル）
ウェブページの動作やアニメーションを最適化する（Timelineパネル）
メモリの利利⽤用状況やメモリリークを確認する（Timeline、Profileパネル）
JavaScriptの実⾏行行速度度やCSSセレクターを分析する（Profilesパネル）
ウェブページ全体を最適化するための推奨事項を確認する（Auditsパネル）
モバイルサイトをデバッグする

12. Thank you!!
( @yoshikawa_̲t )