1. DevTools.next 2013/2/10 HTML52013 Toru Yoshikawa ( @yoshikawa_t )

2. Who? / Toru Yoshikawa@yoshikawa_t C.A.Mobile Web Google Developer Experts (Chrome) html5j.org/HTML5 allWeb/jQuery Mobile Blog: http://d.hatena.ne.jp/pikotea/

3. Agenda1. ChromeWeb2. 3. 4. JavaScript5. 6. Tips

4. ChromeWeb

5. SafariAndroid BrowserWebkitJavaScript Webkit > JavaScriptCore Chrome > V8 (Node.jsV8) Firefox > SpiderMonkeyJavaScriptTips

6. URLchrome:URLchrome://about URL chrome://ags > chrome://appcache-internals > AppCache chrome://net-internals > etc...

7. Canary https://www.google.com/intl/ja/chrome/browser/canary.htmlHTML5Chrome Developer Tools $_ (Console) Styled console log (Console) JPEG(Timeline) etc...StableStable

8. Chrome Developer Tools chrome://agsSettings

9. Chrome Developer Tools

10. Windows: Ctl+Shift+iMac: Command+Option+i

11. Elements Resources Web StorageNetwork Sources JavaScriptTimeline Proles CPUCSSAudits Console JavaScript

12.

13. Dock to right Dock to bottom Window

14.

15. ?

16.

17. Elements

18.

19. Computed Style

20. Styles

21. Sources

22. Metrics

23.

24. Overrides

25. Remote debug Chrome for Android, iOS Android USB $> adb forward tcp:9222 localabstract:chrome_devtools_remote Chromelocalhost:9222

26. Remote debug

27. JavaScript

28. Sources

29. Sources Content scripts Chrome Extensions

30. Sources Command+O Command+Shift+O Command+L CommandOptionFGREP

31. JavaScript console.log

32. debugger Breakpoints

33. Watch ExpressionsCall StackScope VariableConsole

34. Pause/Continue (F8)Step over (F10)Step into (F11)Step out (Shift+F11)

35. Breakpoints DOM Breakpoints XHR Breakpoints Event Listener Breakpoints Exception Workers

36. Breakpointstrue

37. DOM Breakpoints ElementsEvent Listener BreakpointsDOM Mutation

38. XHR BreakpointsXHR(Ajax)URLXHR Breakpoints

39. Event Listener Breakpoints Animation, Timer requestAnimationFramesetTimeout Control, Device resizescroll, deviceorientation Clipboard Touch, Mouse, Keyboard DOM Mutation DOM

40. ExceptionExceptionExceptioncatchException

41. WorkersWeb WorkersWeb WorkerJS

42. TipsMinifyJavaScript

43. TipsConsoleFirebug http://ss-o.net/event/20120212/

44.

45. Timeline

46. Timeline GC 15ms

47. Timeline Loading Scripting JS Rendering DOM Painting opacitybox-shadow

48. Events Loading > Scripting > JavaScript Rendering, Painting > DOMDOMContentLoadedload

49. Frames30FPS60FPS30FPS24FPSFPS60FPS

50.

51.

52. Demohttp://www.jankfree.com/jank-busters-io/examples/measuring-fps/smooth.html

53. Demohttp://www.jankfree.com/jank-busters-io/examples/sluggish-scroll/sluggish-scroll.html

54. MemoryGCGC

55. Memory (Counters) [ - ] DOM Node CountEvent Listener Count iframe Proles

56. ProlesCPUCSS SelectorHeap SnapshotTake Heap Snapshot

57. ProlesTimelineStartCPU Proleconsole.prole() console.proleEnd()

58. Proles (Heap Snapshots) 2

59. Proles (Heap Snapshots) GC # New > # Deleted > # Delta > Alloc. Size > Freed Size > Size Delta >

60. Tips

61. Chrome Devtools Cheatsheet http://anti-code.com/devtools-cheatsheet/

62. Page SpeedAccessibility Developer ToolsjQuery DebuggerDevTools autosave

63. Page SpeedWebPage Speed

64. Accessibility Developer Tools Audits

65. jQuery DebuggerElementsjQuery DatajQuery EventsjQuery Selectorinspector

66. DevTools autosaveDevTools

67. Chrome Developer Tools https://github.com/frontdevDE/mnml-devtools-theme

68. Chrome Developer Tools Custom.css Mac ~/Library/Application Support/Google/Chrome/Default/User StyleSheets/Custom.css Windows C:UsersYourUsernameAppDataLocalGoogleChromeUser DataDefaultUser StyleSheetsCustom.css DevTools chrome-devtools://devtools/devTools.css devtools theme

69. DevToolsDevToolsRemote debugDevTools

70. Thank you!! ( @yoshikawa_t )

71. ResourcesChrome Developers Live: Chrome ( https://developers.google.com/live/chrome/ )Chrome Canary for Developers ( http://paulirish.com/2012/chrome-canary-for-developers/ )Improve web performance with chrome dev tools ( https://speakerdeck.com/t32k/improve-web-performance-with-chrome-dev-tools )Jank Busters ( http://www.jankfree.com/jank-busters-io/index.html )Google Chrome Developer Tools inDevFestX Sapporo ( http://ss-o.net/event/20120212/ )