• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Chrome packaged appsをデバッグ
 

Chrome packaged appsをデバッグ

on

  • 1,374 views

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

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

Statistics

Views

Total Views
1,374
Views on SlideShare
1,289
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をデバッグ Chrome packaged appsをデバッグ Presentation Transcript

    • 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、Profileパネル) JavaScriptの実⾏行行速度度やCSSセレクターを分析する(Profilesパネル) ウェブページ全体を最適化するための推奨事項を確認する(Auditsパネル) モバイルサイトをデバッグする
    • Thank  you!! (  @yoshikawa_̲t  )