Chrome packaged appsをデバッグ

1,497 views

Published on

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

Published in: Technology
0 Comments
5 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,497
On SlideShare
0
From Embeds
0
Number of Embeds
37
Actions
Shares
0
Downloads
6
Comments
0
Likes
5
Embeds 0
No embeds

No notes for slide

Chrome packaged appsをデバッグ

  1. 1. Chrome  Packaged  Appsをデバッグ 2013/07/05 Chrome  Packaged  Apps  コードラボ Toru  Yoshikawa  (@yoshikawa_̲t)
  2. 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. 3. Chromeの拡張機能・アプリをデバッグしよう デバッグツールの呼び出しアレコレ アプリ・ウィンドウのデバッグ バックラウンドページのデバッグ Content  Scriptsのデバッグ chrome://inspect
  4. 4. アプリ・ウィンドウのデバッグ アプリ・ウィンドウで右クリックメニューの「要 素の検証」「バックグラウンドページの検証」
  5. 5. Consoleでエラーを確認しよう 「要素の検証」「バックグラウンドページの検 証」それぞれでConsoleパネルを表⽰示
  6. 6. バックグラウンドページのデバッグ (主に拡張機能など) ビューを調査でアクティブなファイルがリンクで 表⽰示されるので対象ページをクリック chrome://extensions
  7. 7. Content  Scriptのデバッグ (拡張機能) 対象ページでデベロッパーツールを開いて「Sources」 パネル、ファイルツリーの「Content  Scripts」タブ
  8. 8. Content  ScriptのConsole操作 (拡張機能) コンソールの下側のセレクトメニューで該当の拡 張機能を選択
  9. 9. chrome://inspect デバッグ可能なページをすべて表⽰示!(リモート デバッグもこちらから)
  10. 10. [PR]  続きは、Chrome本で! http://amzn.to/15oOVYI
  11. 11. Chrome本のデベロッパーツールの章 ウェブページの構造やスタイルを確認する(Elementsパネル) ウェブサイトの構成やリソース状況を確認する(Resourcesパネル) ネットワークアクセスを確認する(Networkパネル) JavaScriptをデバッグする(Sourcesパネル) ウェブページの動作やアニメーションを最適化する(Timelineパネル) メモリの利利⽤用状況やメモリリークを確認する(Timeline、Profileパネル) JavaScriptの実⾏行行速度度やCSSセレクターを分析する(Profilesパネル) ウェブページ全体を最適化するための推奨事項を確認する(Auditsパネル) モバイルサイトをデバッグする
  12. 12. Thank  you!! (  @yoshikawa_̲t  )

×