Weitere ähnliche Inhalte
Ähnlich wie Chrome Devtools for beginners (v1.1) (20)
Mehr von yoshikawa_t (13)
Kürzlich hochgeladen (11)
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/
- 6. Canary ビルド
HTML5、Chrome Developer Toolsの最新の機能が
利利⽤用できる
プロファイルがStableと別になっているので、
Stableと同時に利利⽤用できる
新しいので⾒見見た⽬目が若若⼲干異異なることがある
https://www.google.co.jp/intl/ja/chrome/
browser/canary.html
- 10. 機能概要
Elements … 要素・スタイルの確認・編集
Resources … ファイル構成・リソース(Web Storageなど)の確認
Network … ネットワークアクセスの確認・分析
Sources … ソースファイルの確認・保存、JavaScriptのデバッグ
Timeline … パフォーマンスの測定と分析
Profiles … CPU、メモリ状況、CSSセレクターのプロファイル
Audits … ネットワーク、サイトスピードのチェック・推奨事項
Console … エラーログ表⽰示、JavaScript・コンソールコマンドの実⾏行行
- 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