1. Chrome DevTools for beginners Version 1.2 2014/9/4 7HTML5
Toru Yoshikawa (@yoshikawa_t)
2. Who? / Toru Yoshikawa @yoshikawa_t html5j html5j () Google
Developer Experts (Chrome) HTML5 Experts.jp Web ()jQuery Mobile
()Sublime Text 2 Japan Users Group () Blog:
http://d.hatena.ne.jp/pikotea/
3. PR: HTML HTML51 HTML HTML5 19/17 LPIHTML5 1 :
http://www.amazon.co.jp/dp/ 4798135836/
4. ChromeWeb
5. ChromeSafariWebkit ChromeBlink JavaScript Webkit >
JavaScriptCore Chrome > V8 (Node.jsV8) Firefox > SpiderMonkey
JavaScriptTips
6. URL chrome:URL chrome://about URL chrome://flags >
chrome://appcache-internals > AppCache chrome://net-internals
> etc...
7. Canary HTML5Chrome Developer Tools Stable Stable
https://www.google.co.jp/intl/ja/chrome/ browser/canary.html
8. Canary Chrome Developer Tools chrome://flags Settings
9. Developer Tools
10. Windows: Ctrl + Shift + I or F12 Mac: + + I
11. Elements Resources Web Storage Network Sources JavaScript
Timeline Profiles CPUCSS Audits Console JavaScript Layers
Experiments with Canary
12. Chrome Developer Tools
http://www.slideshare.net/yoshikawa_t/chrome-
developer-tools-17787728 Sources Timeline Profiles
13. grep
14. Dock to right Dock to bottom Window
15. Ajax
16.
17. Elements HTML Windows: Ctrl + F Mac: + F
18.
19.
20.
21. HTMLF2
22. Del H Windows: Ctrl + Z Mac: + Z
23.
24. Computed Style Styles CSS Metrics
25. Computed Style
26. Metrics
27. Styles
28.
29. Shift 10 Alt 0.1 Ctrl+
30.
31. Resources Web SQL IndexedDB Local Storage Session Storage
Cookies Application Cache
32.
33. Local Storage
34.
35.
36.
37. Chrome for Android USB chrome://inspect
38. Workspace Port forwarding Layer Panel etc
39. DevTools Canary
40. Next Step Chrome Developer Tools http://www.slideshare.net/
yoshikawa_t/chrome-developer- tools-17787728 ChromePR Chrome
Developer Tools 100 http://amzn.to/12eKqmt
41. Thank you!! (@yoshikawa_t)
42. Resources https://developers.google.com/chrome-
developer-tools/ https://developers.google.com/live/chrome/
http://anti-code.com/devtools-cheatsheet/
LOAD MORE