Transcript of Chrome DevTools for beginners v1.2
- 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/