Chrome packaged appsをデバッグ
Upcoming SlideShare
Loading in...5
×
 

Chrome packaged appsをデバッグ

on

  • 1,617 views

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

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

Statistics

Views

Total Views
1,617
Views on SlideShare
1,532
Embed Views
85

Actions

Likes
3
Downloads
4
Comments
0

1 Embed 85

https://twitter.com 85

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Chrome packaged appsをデバッグ Presentation Transcript

  • 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  )