chrome devtools for beginners v1.2
DESCRIPTION
TRANSCRIPT
- 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/