2013/12/13に開催された第4回HTML5ビギナーズの資料です。

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/

3. ChromeでのWeb開発の
基礎知識識

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. Developer Tools

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
Dock to bottom
Window
アイコンクリックで切切り替え
アイコン⻑⾧長押しで、リストがポップアップ

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

14. 要素を⾒見見つける

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

16. 要素のハイライト

17. インスペクターモード

18. 要素を編集してみる

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

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

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

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

23. Computed Style

24. Styles

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

26. Metrics

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

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

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

30. クッキーの確認

31. Local Storageの確認

32. モバイルのデバッグ

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

34. 設定（Overrides）

35. 設定（Overrides）

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. リモートデバッグ（v32以降降）
インストールは⼀一切切不不要
chrome://inspect を表⽰示

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

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

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. Thank you!!
(@yoshikawa_̲t)

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