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/