35
Chrome DevTools for beginners 2013/03/21 第37回HTML5とか勉強会 Toru Yoshikawa (@yoshikawat)

Chrome DevTools for beginners

Embed Size (px)

DESCRIPTION

第37回HTML5とか勉強会での講演資料です。

Citation preview

  • 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/