Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Chrome packaged appsをデバッグ


Published on

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

Published in: Technology
  • Be the first to comment

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: 吉川  徹  /  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本で!
  11. 11. Chrome本のデベロッパーツールの章 ウェブページの構造やスタイルを確認する(Elementsパネル) ウェブサイトの構成やリソース状況を確認する(Resourcesパネル) ネットワークアクセスを確認する(Networkパネル) JavaScriptをデバッグする(Sourcesパネル) ウェブページの動作やアニメーションを最適化する(Timelineパネル) メモリの利利⽤用状況やメモリリークを確認する(Timeline、Profileパネル) JavaScriptの実⾏行行速度度やCSSセレクターを分析する(Profilesパネル) ウェブページ全体を最適化するための推奨事項を確認する(Auditsパネル) モバイルサイトをデバッグする
  12. 12. Thank  you!! (  @yoshikawa_̲t  )