Chrome packaged appsをデバッグ

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

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

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

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

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

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

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

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

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

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

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

Thank you!!
( @yoshikawa_̲t )

Chrome packaged appsをデバッグ

More Related Content

What's hot (20)

Similar to Chrome packaged appsをデバッグ (20)

More from yoshikawa_t (11)

Chrome packaged appsをデバッグ