chrome devtools for beginners (v1.1)
DESCRIPTION
2013/12/13に開催された第4回HTML5ビギナーズの資料です。TRANSCRIPT
- 1. Chrome DevTools for beginners Version 1.1 2013/12/13 4HTML5 Toru Yoshikawa (@yoshikawa_t)
- 2. Who? / Toru Yoshikawa @yoshikawa_t html5jHTML5 () 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. ChromeWeb
- 4. ChromeSafariWebkit ChromeBlink JavaScript Webkit > JavaScriptCore Chrome > V8 (Node.jsV8) Firefox > SpiderMonkey JavaScriptTips
- 5. URL chrome:URL chrome://about URL chrome://ags > chrome://appcache-internals > AppCache chrome://net-internals > etc...
- 6. Canary HTML5Chrome Developer Tools Stable Stable https://www.google.co.jp/intl/ja/chrome/ browser/canary.html
- 7. Canary Chrome Developer Tools chrome://ags Settings
- 8. Developer Tools
- 9. Windows: Ctrl + Shift + I or F12 Mac: + + I
- 10. Elements Resources Web Storage Network Sources JavaScript Timeline Proles CPUCSS 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. HTMLF2
- 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 StoreADB https://chrome.google.com/webstore/detail/adb/ dpngiggdglpdnjdoaedgiigpemgage
- 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 ChromePR 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/