Download as PDF, PPTX
Chrome DevTools for beginners
- 1.
- 2. Who? 吉川 徹 / Toru Yoshikawa @yoshikawa_̲t Google Developer Experts (Chrome) html5j/HTML5とか勉強会スタッフ ⽇日本jQuery Mobileユーザー会 管理理⼈人 Sublime Text 2 Japan Users Group 管理理⼈人 allWebクリエイター塾/jQuery Mobile担当講師 Blog: http://d.hatena.ne.jp/pikotea/
- 3. 起動⽅方法 右クリックメニュー「要素の検証」 ショートカット Windows: Ctrl + Shift + I or F12 Mac:⌥ + ⌘ + I 右上のメニューアイコンから
- 4. 機能概要 Elements … 要素・スタイルの確認・編集 Resources … ファイル構成・リソース（Web Storageなど）の確認 Network … ネットワークアクセスの確認・分析 Sources … ソースファイルの確認・保存、JavaScriptのデバッグ Timeline … パフォーマンスの測定と分析 Profiles … CPU、メモリ状況、CSSセレクターのプロファイル Audits … ネットワーク、サイトスピードのチェック・推奨事項 Console … エラーログ表⽰示、JavaScript・コンソールコマンドの実⾏行行
- 5.
- 6. 表⽰示位置変更更 Dockto right Dock to bottom Window アイコンクリックで切切り替え アイコン⻑⾧長押しで、リストがポップアップ
- 7. 設定 キャッシュを無効 Ajaxをログ表⽰示
- 8.
- 9. 要素を⾒見見つける （Elementsパネル） HTMLビューで要素にマウスカーソルを当ててみる 右クリックメニュー「要素の検証」 検索索 Windows: Ctrl + F Mac: ⌘ + F インスペクターモード
- 10.
- 11.
- 12.
- 13.
- 14. その他の操作 ドラッグ＆ドロップで要素の移動 要素の削除 Del 要素の表⽰示・⾮非表⽰示 H 編集内容をもとに戻す Windows: Ctrl + Z Mac: ⌘ + Z
- 15.
- 16. スタイルの確認と編集 Computed Style … 要素に適⽤用されているスタイル Styles … 要素に適⽤用されているCSSルール Metrics … 要素のボックスモデルの状態
- 17.
- 18.
- 19.
- 20.
- 21. その他の操作 上下キーで値の増減 Shiftキー押しながら ±10 ずつ Altキー押しながら ±0.1 ずつ カラーアイコンをクリックでカラーピッカー サジェスト Ctrl+スペース タブで選択、→で決定
- 22. サイトのリソース状況を 確認する
- 23. サイトのリソース状況を確認 する（Resourcesパネル） Web SQL IndexedDB Local Storage Session Storage Cookies Application Cache
- 24.
- 25.
- 26.
- 27.
- 28.
- 29.
- 30. リモートデバッグ Chrome for Androidで動作 Androidの開発環境(Android SDK)をインストール USBデバッグで接続 コマンド実⾏行行 $> adb forward tcp:9222 localabstract:chrome_devtools_remote Chromeでlocalhost:9222を表⽰示
- 31. リモートデバッグ デバッグするタブを選択して デバッグ開始！ http://youtu.be/s4zpL4VBbuU?t=50s
- 32.
- 33. NEXT STEP! DevToolsのさらなる便便利利な使い⽅方をオンライン にて解説 3/28にGoogle Developers Live のHangouts OnAirにて放送予定
- 34.
- 35.