Chrome Devtools for beginners (v1.1)
?
45 likes?7,177 views
2013/12/13に开催された第4回贬罢惭尝5ビギナーズの资料です。
Chrome Devtools for beginners (v1.1)
- 1. ? ? ? ?Chrome DevTools ?for ?beginners Version ?1.1 2013/12/13 第4回HTML5ビギナーズ Toru ?Yoshikawa ?(@yoshikawa_?t)
- 2. Who? 吉川 ?徹 ?/ ?Toru ?Yoshikawa @yoshikawa_?t html5j／HTML5とか勉強会スタッフ／ビ ギナー部 ?(副部??長) Google ?Developer ?Experts ?(Chrome) HTML5 ?Experts.jp ?エキスパートNo.3 Web先端技術味?見見部 ?(顧問)／?日本jQuery ? Mobileユーザー会 ?(管理理?人)／Sublime ? Text ?2 ?Japan ?Users ?Group ?(管理理?人)な どなど Blog: ?http://d.hatena.ne.jp/pikotea/
- 4. ブラウザの挙動 Chrome、Safariは、同じWebkitというレンダリングエンジンで動作する ため、ほぼ同様の動作をする（しかし、最近Chromeは、Blinkというエン ジンにフォークして移?行行したため段々と差異異が出てくるものと思われる） JavaScriptエンジンはそれぞれ違うので若若?干注意（互換性の問題はほとん どなし） Webkit ?> ?JavaScriptCore Chrome ?> ?V8 ?(Node.jsもV8を利利?用している) Firefox ?> ?SpiderMonkey JavaScript?高速化等のTipsはだいたい同じように効果がある
- 5. 特殊URL chrome:で始まるURLで設定やデバッグ?用の有?用な情報 を参照することができる chrome://about ?でURL?一覧を表?示 chrome://?ags ?> ?各種設定 chrome://appcache-‐??internals ?> ?AppCacheの管理理 chrome://net-‐??internals ?> ?ネットワーク情報 etc...
- 6. Canary ?ビルド HTML5、Chrome ?Developer ?Toolsの最新の機能が 利利?用できる プロファイルがStableと別になっているので、 Stableと同時に利利?用できる 新しいので?見見た?目が若若?干異異なることがある https://www.google.co.jp/intl/ja/chrome/ browser/canary.html
- 7. Canary ?ビルド Chrome ?Developer ?Toolsの実験的機能の有効 chrome://?ags Settings
- 9. 起動?方法 右クリックメニュー「要素の検証」 ショートカット Windows: ?Ctrl ?+ ?Shift ?+ ?I ?or ?F12 Mac:? ?+ ?? ?+ ?I 右上のメニューアイコンから
- 10. 機能概要 Elements ?… ?要素?スタイルの確認?編集 Resources ?… ?ファイル構成?リソース（Web ?Storageなど）の確認 Network ?… ?ネットワークアクセスの確認?分析 Sources ?… ?ソースファイルの確認?保存、JavaScriptのデバッグ Timeline ?… ?パフォーマンスの測定と分析 Pro?les ?… ?CPU、メモリ状況、CSSセレクターのプロファイル Audits ?… ?ネットワーク、サイトスピードのチェック?推奨事項 Console ?… ?エラーログ表?示、JavaScript?コンソールコマンドの実?行行
- 11. ツールバー
- 12. 表?示位置変更更 Dock to right Dock to bottom Window アイコンクリックで切切り替え アイコン??長押しで、リストがポップアップ
- 14. 要素を?见见つける
- 15. 要素を?见见つける （Elementsパネル） HTMLビューで要素にマウスカーソルを当ててみる 右クリックメニュー「要素の検証」 検索索 Windows: ?Ctrl ?+ ?F Mac: ?? ?+ ?F インスペクターモード
- 16. 要素のハイライト
- 17. インスペクターモード
- 18. 要素を编集してみる
- 20. その他の操作 ドラッグ＆ドロップで要素の移動 要素の削除 Del 要素の表?示??非表?示 H 編集内容をもとに戻す Windows: ?Ctrl ?+ ?Z Mac: ?? ?+ ?Z
- 22. スタイルの確認と編集 Computed ?Style ?… ?要素に適?用されているスタイル Styles ?… ?要素に適?用されているCSSルール Metrics ?… ?要素のボックスモデルの状態
- 23. Computed ?Style
- 24. Styles
- 26. Metrics
- 27. その他の操作 上下キーで値の増減 Shiftキー押しながら ?±10 ?ずつ Altキー押しながら ?±0.1 ?ずつ カラーアイコンをクリックでカラーピッカー サジェスト Ctrl+スペース タブで選択、→で決定
- 28. サイトのリソース状況を 確認する
- 29. サイトのリソース状況を確認 する（Resourcesパネル） Web ?SQL IndexedDB Local ?Storage Session ?Storage Cookies Application ?Cache
- 30. クッキーの确认
- 32. モバイルのデバッグ
- 34. 设定（翱惫别谤谤颈诲别蝉）
- 35. 设定（翱惫别谤谤颈诲别蝉）
- 36. リモートデバッグ（v31以前） Chrome ?for ?Androidで動作 Chrome ?Web ?Storeで「ADB」をインストール https://chrome.google.com/webstore/detail/adb/ dpngiggdglpdnjdoae?dgiigpemgage
- 37. リモートデバッグ（v31以前） USBデバッグで接続 Start ?ADB ?> ?View ?Inspect ?Target
- 41. Next ?Step 「Chrome ?Developer ?Toolsを使いこなそ う」 http://www.slideshare.net/ yoshikawa_?t/chrome-‐??developer-‐?? tools-‐??17787728 続きはChrome本で！（PR） Chrome ?Developer ?Toolsの使い?方につ いて100ページ以上にわたって解説 http://amzn.to/12eKqmt