Chrome Devtools for beginners (v1.1)

Chrome DevTools for beginners Version 1.1 2013/12/13 第4回HTML5ビギナーズ Toru Yoshikawa (@yoshikawa_̲t)

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/

ChromeでのWeb開発の基礎知識識

ブラウザの挙動 Chrome、Safariは、同じWebkitというレンダリングエンジンで動作するため、ほぼ同様の動作をする（しかし、最近Chromeは、Blinkというエンジンにフォークして移⾏行行したため段々と差異異が出てくるものと思われる） JavaScriptエンジンはそれぞれ違うので若若⼲干注意（互換性の問題はほとんどなし） Webkit > JavaScriptCore Chrome > V8 (Node.jsもV8を利利⽤用している) Firefox > SpiderMonkey JavaScript⾼高速化等のTipsはだいたい同じように効果がある

特殊URL chrome:で始まるURLで設定やデバッグ⽤用の有⽤用な情報を参照することができる chrome://about でURL⼀一覧を表⽰示 chrome://ﬂags > 各種設定 chrome://appcache-‐‑‒internals > AppCacheの管理理 chrome://net-‐‑‒internals > ネットワーク情報 etc...

Canary ビルド HTML5、Chrome Developer Toolsの最新の機能が利利⽤用できるプロファイルがStableと別になっているので、 Stableと同時に利利⽤用できる新しいので⾒見見た⽬目が若若⼲干異異なることがある https://www.google.co.jp/intl/ja/chrome/ browser/canary.html

Canary ビルド Chrome Developer Toolsの実験的機能の有効 chrome://ﬂags Settings

Developer Tools

起動⽅方法右クリックメニュー「要素の検証」ショートカット Windows: Ctrl + Shift + I or F12 Mac:⌥ + ⌘ + I 右上のメニューアイコンから

機能概要 Elements … 要素・スタイルの確認・編集 Resources … ファイル構成・リソース（Web Storageなど）の確認 Network … ネットワークアクセスの確認・分析 Sources … ソースファイルの確認・保存、JavaScriptのデバッグ Timeline … パフォーマンスの測定と分析 Proﬁles … CPU、メモリ状況、CSSセレクターのプロファイル Audits … ネットワーク、サイトスピードのチェック・推奨事項 Console … エラーログ表⽰示、JavaScript・コンソールコマンドの実⾏行行

ツールバー

表⽰示位置変更更 Dock to right Dock to bottom Window アイコンクリックで切切り替えアイコン⻑⾧長押しで、リストがポップアップ

設定キャッシュを無効 Ajaxをログ表⽰示

要素を⾒見見つける

要素を⾒見見つける（Elementsパネル） HTMLビューで要素にマウスカーソルを当ててみる右クリックメニュー「要素の検証」検索索 Windows: Ctrl + F Mac: ⌘ + F インスペクターモード

要素のハイライト

インスペクターモード

要素を編集してみる

編集モード右クリックメニューダブルクリック・タブで移動 HTML編集のショートカット（F2）

その他の操作ドラッグ＆ドロップで要素の移動要素の削除 Del 要素の表⽰示・⾮非表⽰示 H 編集内容をもとに戻す Windows: Ctrl + Z Mac: ⌘ + Z

要素に適⽤用されているスタイルを確認・編集する

スタイルの確認と編集 Computed Style … 要素に適⽤用されているスタイル Styles … 要素に適⽤用されているCSSルール Metrics … 要素のボックスモデルの状態

Computed Style

Styles

スタイルの編集・状態の変更更（リアルタイムに反映）

Metrics

その他の操作上下キーで値の増減 Shiftキー押しながら ±10 ずつ Altキー押しながら ±0.1 ずつカラーアイコンをクリックでカラーピッカーサジェスト Ctrl+スペースタブで選択、→で決定

サイトのリソース状況を確認する

サイトのリソース状況を確認する（Resourcesパネル） Web SQL IndexedDB Local Storage Session Storage Cookies Application Cache

クッキーの確認

Local Storageの確認

モバイルのデバッグ

モバイルのデバッグモバイル環境をエミュレートして表⽰示するリモートデバッグ

設定（Overrides）

リモートデバッグ（v31以前） Chrome for Androidで動作 Chrome Web Storeで「ADB」をインストール https://chrome.google.com/webstore/detail/adb/ dpngiggdglpdnjdoaeﬁdgiigpemgage

リモートデバッグ（v31以前） USBデバッグで接続 Start ADB > View Inspect Target

リモートデバッグ（v32以降降）インストールは⼀一切切不不要 chrome://inspect を表⽰示

その他の⾯面⽩白い機能 Workspace Port forwarding Layer Panel etc…

まとめ DevToolsには、まだまだ説明しきれない便便利利な使い⽅方がたくさんあります！開発効率率率が⾶飛躍的に向上しますので、まずは是⾮非、使ってみて下さい⽇日々、いろいろな改善・機能追加がおこなわれているのでCanaryで試してみましょう

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

Thank you!! (@yoshikawa_̲t)

Resources https://developers.google.com/chrome-‐‑‒ developer-‐‑‒tools/ https://developers.google.com/live/chrome/ http://anti-‐‑‒code.com/devtools-‐‑‒cheatsheet/

Chrome Devtools for beginners (v1.1)

by yoshikawa_t on Dec 13, 2013

Statistics

Views

Actions

2 Embeds 35

Accessibility

Categories

Upload Details

Usage Rights

Report content

Chrome Devtools for beginners (v1.1) Presentation Transcript

https://twitter.com	33
http://s.deeeki.com	2