Chrome DevTools for beginners

4,333 views

Published on

第37回HTML5とか勉強会での講演資料です。

Published in: Technology

Chrome DevTools for beginners

  1. 1.        ChromeDevTools  for  beginners 2013/03/21 第37回HTML5とか勉強会 Toru  Yoshikawa  (@yoshikawa_̲t)
  2. 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. 3. 起動⽅方法右クリックメニュー「要素の検証」ショートカット Windows:  Ctrl  +  Shift  +  I  or  F12 Mac:⌥  +  ⌘  +  I右上のメニューアイコンから
  4. 4. 機能概要Elements  …  要素・スタイルの確認・編集Resources  …  ファイル構成・リソース(Web  Storageなど)の確認Network  …  ネットワークアクセスの確認・分析Sources  …  ソースファイルの確認・保存、JavaScriptのデバッグTimeline  …  パフォーマンスの測定と分析Profiles  …  CPU、メモリ状況、CSSセレクターのプロファイルAudits  …  ネットワーク、サイトスピードのチェック・推奨事項Console  …  エラーログ表⽰示、JavaScript・コンソールコマンドの実⾏行行
  5. 5. ツールバー
  6. 6. 表⽰示位置変更更 Dock to right Dock to bottom Windowアイコンクリックで切切り替えアイコン⻑⾧長押しで、リストがポップアップ
  7. 7. 設定キャッシュを無効 Ajaxをログ表⽰示
  8. 8. 要素を⾒見見つける
  9. 9. 要素を⾒見見つける (Elementsパネル)HTMLビューで要素にマウスカーソルを当ててみる右クリックメニュー「要素の検証」検索索 Windows:  Ctrl  +  F Mac:  ⌘  +  Fインスペクターモード
  10. 10. 要素のハイライト
  11. 11. インスペクターモード
  12. 12. 要素を編集してみる
  13. 13. 編集モード右クリックメニューダブルクリック・タブで移動HTML編集のショートカット(F2)
  14. 14. その他の操作ドラッグ&ドロップで要素の移動要素の削除 Del要素の表⽰示・⾮非表⽰示 H編集内容をもとに戻す Windows:  Ctrl  +  Z Mac:  ⌘  +  Z
  15. 15. 要素に適⽤用されているスタイルを確認・編集する
  16. 16. スタイルの確認と編集Computed  Style  …  要素に適⽤用されているスタイルStyles  …  要素に適⽤用されているCSSルールMetrics  …  要素のボックスモデルの状態
  17. 17. Computed  Style
  18. 18. Styles
  19. 19. スタイルの編集・状態の変更更 (リアルタイムに反映)
  20. 20. Metrics
  21. 21. その他の操作上下キーで値の増減 Shiftキー押しながら  ±10  ずつ Altキー押しながら  ±0.1  ずつカラーアイコンをクリックでカラーピッカーサジェスト Ctrl+スペース タブで選択、→で決定
  22. 22. サイトのリソース状況を 確認する
  23. 23. サイトのリソース状況を確認 する(Resourcesパネル) Web  SQL IndexedDB Local  Storage Session  Storage Cookies Application  Cache
  24. 24. クッキーの確認
  25. 25. Local  Storageの確認
  26. 26. モバイルのデバッグ
  27. 27. モバイルのデバッグモバイル環境をエミュレートして表⽰示するリモートデバッグ
  28. 28. 設定(Overrides)
  29. 29. 設定(Overrides)
  30. 30. リモートデバッグ Chrome  for  Androidで動作 Androidの開発環境(Android  SDK)をインストール USBデバッグで接続 コマンド実⾏行行$> adb forward tcp:9222 localabstract:chrome_devtools_remote Chromeでlocalhost:9222を表⽰示
  31. 31. リモートデバッグ デバッグするタブを選択して デバッグ開始!http://youtu.be/s4zpL4VBbuU?t=50s
  32. 32. まとめDevToolsには、まだまだ説明しきれない便便利利な使い⽅方がたくさんあります!開発効率率率が⾶飛躍的に向上しますので、まずは是⾮非、使ってみて下さい⽇日々、いろいろな改善・機能追加がおこなわれています
  33. 33. NEXT  STEP!DevToolsのさらなる便便利利な使い⽅方をオンラインにて解説3/28にGoogle  Developers  Live  のHangouts  OnAirにて放送予定
  34. 34. Thank  you!! (@yoshikawa_̲t)
  35. 35. Resourceshttps://developers.google.com/chrome-‐‑‒developer-‐‑‒tools/https://developers.google.com/live/chrome/http://anti-‐‑‒code.com/devtools-‐‑‒cheatsheet/

×