Downloaded 64 times
Chrome Devtools for beginners (v1.1)
- 1.
- 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/
- 3.
- 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://flags > 各種設定 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://flags Settings
- 8.
- 9. 起動⽅方法 右クリックメニュー「要素の検証」 ショートカット Windows: Ctrl + Shift + I or F12 Mac:⌥ + ⌘ + I 右上のメニューアイコンから
- 10. 機能概要 Elements … 要素・スタイルの確認・編集 Resources … ファイル構成・リソース（Web Storageなど）の確認 Network … ネットワークアクセスの確認・分析 Sources … ソースファイルの確認・保存、JavaScriptのデバッグ Timeline … パフォーマンスの測定と分析 Profiles … CPU、メモリ状況、CSSセレクターのプロファイル Audits … ネットワーク、サイトスピードのチェック・推奨事項 Console … エラーログ表⽰示、JavaScript・コンソールコマンドの実⾏行行
- 11.
- 12. 表⽰示位置変更更 Dock to right Dockto bottom Window アイコンクリックで切切り替え アイコン⻑⾧長押しで、リストがポップアップ
- 13.
- 14.
- 15. 要素を⾒見見つける （Elementsパネル） HTMLビューで要素にマウスカーソルを当ててみる 右クリックメニュー「要素の検証」 検索索 Windows: Ctrl + F Mac: ⌘ + F インスペクターモード
- 16.
- 17.
- 18.
- 19.
- 20.
- 21.
- 22. スタイルの確認と編集 Computed Style … 要素に適⽤用されているスタイル Styles … 要素に適⽤用されているCSSルール Metrics … 要素のボックスモデルの状態
- 23.
- 24.
- 25.
- 26.
- 27. その他の操作 上下キーで値の増減 Shiftキー押しながら ±10 ずつ Altキー押しながら ±0.1 ずつ カラーアイコンをクリックでカラーピッカー サジェスト Ctrl+スペース タブで選択、→で決定
- 28.
- 29. サイトのリソース状況を確認 する（Resourcesパネル） Web SQL IndexedDB Local Storage Session Storage Cookies Application Cache
- 30.
- 31.
- 32.
- 33.
- 34.
- 35.
- 36. リモートデバッグ（v31以前） Chrome for Androidで動作 Chrome Web Storeで「ADB」をインストール https://chrome.google.com/webstore/detail/adb/ dpngiggdglpdnjdoaefidgiigpemgage
- 37. リモートデバッグ（v31以前） USBデバッグで接続 Start ADB > View Inspect Target
- 38.
- 39.
- 40.
- 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
- 42.
- 43.