chrome devtools for beginners
DESCRIPTION
第37回HTML5とか勉強会での講演資料です。TRANSCRIPT
- 1. ChromeDevTools for beginners 2013/03/21 37HTML5 Toru Yoshikawa (@yoshikawa_t)
- 2. Who? / Toru Yoshikawa@yoshikawa_t Google Developer Experts (Chrome) html5j/HTML5 jQuery Mobile Sublime Text 2 Japan Users Group allWeb/jQuery Mobile Blog: http://d.hatena.ne.jp/pikotea/
- 3. Windows: Ctrl + Shift + I or F12 Mac: + + I
- 4. Elements Resources Web StorageNetwork Sources JavaScriptTimeline Proles CPUCSSAudits Console JavaScript
- 5.
- 6. Dock to right Dock to bottom Window
- 7. Ajax
- 8.
- 9. ElementsHTML Windows: Ctrl + F Mac: + F
- 10.
- 11.
- 12.
- 13. HTMLF2
- 14. Del H Windows: Ctrl + Z Mac: + Z
- 15.
- 16. Computed Style Styles CSSMetrics
- 17. Computed Style
- 18. Styles
- 19.
- 20. Metrics
- 21. Shift 10 Alt 0.1 Ctrl+
- 22.
- 23. Resources Web SQL IndexedDB Local Storage Session Storage Cookies Application Cache
- 24.
- 25. Local Storage
- 26.
- 27.
- 28. Overrides
- 29. Overrides
- 30. Chrome for Android Android(Android SDK) USB $> adb forward tcp:9222 localabstract:chrome_devtools_remote Chromelocalhost:9222
- 31. http://youtu.be/s4zpL4VBbuU?t=50s
- 32. DevTools
- 33. NEXT STEP!DevTools3/28Google Developers Live Hangouts OnAir
- 34. Thank you!! (@yoshikawa_t)
- 35. Resourceshttps://developers.google.com/chrome-developer-tools/https://developers.google.com/live/chrome/http://anti-code.com/devtools-cheatsheet/