1. Chrome Developer Tools 2013/04/02 Google Developers Live Japan #3 http://bit.ly/YYtStr Toru Yoshikawa (@yoshikawa_t)

2. Who? / Toru Yoshikawa@yoshikawa_t Google Developer Experts (Chrome) html5j/HTML5 Web jQuery Mobile Sublime Text 2 Japan Users Group allWeb/jQuery Mobile Blog: http://d.hatena.ne.jp/pikotea/

3. Chrome DevTools for beginners (http:// www.slideshare.net/yoshikawa_t/chrome- devtools-for-beginners)

4. Elements Resources Web Storage Network Sources JavaScriptTimeline Proles CPUCSSAudits Console JavaScript

5. AgendaSourcesTipsJavaScriptTimelineTimelineProles

6. SourcesTips

7. Sources

8. Content scripts Chrome Extensions

9. ElementsSourcesLocal Modications...

10.

11. Command+O Command+Shift+O Command+L CommandOptionF

12.

13. MinifyJavaScript MinifyJavaScript

14. JavaScript

15. JavaScript1. 2. 3. 4. 2

16. Breakpoints debugger

17. Watch ExpressionsCall StackScope VariableConsole

18. Watch Expressions

19. Call Stack

20. Scope Variables

21. Console

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

23.

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

25. Breakpointstrue

26. DOM Breakpoints ElementsEvent Listener BreakpointsDOM Mutation

27. XHR BreakpointsXHR(Ajax)URLXHR Breakpoints

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

29. ExceptionExceptionExceptioncatchException

30. WorkersWeb WorkersWeb WorkerJS

31. LiveEdit!JavaScript

32. Timeline

33.

34. Timeline

35. Timeline GC 15ms

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

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

38. Frames30FPS60FPS30FPS24FPSFPS60FPS

39.

40.

41. Loading

42. Loading Send Request Receive Response Receive Data Finish Loading HTMLJavaScriptdocument.write()Parse HTML innerHTML

43. Scripting

44. Scripting Evaluate Script JavaScriptFunction Call Event Install Timer setIntervalsetTimeoutTimer Fired Remove Timer GC Event GCXHR Ready State Change XMLHttpRequstCreate WebSocket WebSocketDestroy WebSocket WebSocketRequest Animation Frame requestAnimationFrameAnimation Frame Fired

45. RenderingDOMDOM

46. Rendering Recalculate Style DOMLayout

47. Rendering

48. Painting

49. Painting Composite Layers Paint Scroll Image Decode Image Resize

50. TimelineProles

51.

52. MemoryGCGC

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

54. ProlesCPUCSS SelectorHeap SnapshotTake Heap Snapshot

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

56. Proles (Heap Snapshots) 2

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

58. Objects retaining tree

59. Tips

60. Chrome Developer Tools chrome://agsSettings

61. Page Speed Accessibility Developer Tools AuditsjQuery Debugger jQueryElementsDevTools autosave ElementsSourcesAngularJS Batarang AngularJSRailsPanel Ruby on Rails

62. DevTools autosave

63. MNML Theme (https://github.com/frontdevDE/mnml-devtools-theme)

64. Custom.cssMac ~/Library/Application Support/Google/Chrome/Default/ User StyleSheets/Custom.cssWindows C:UsersYourUsernameAppDataLocalGoogleChrome User DataDefaultUser StyleSheetsCustom.cssDevTools chrome-devtools://devtools/devTools.css

65. MNML Themehttps://github.com/frontdevDE/mnml-devtools-theme Monokai Darkhttps://gist.github.com/bc12d6bb85b96042e8Tomorrow Themehttps://gist.github.com/1163300IR_Black Themehttps://gist.github.com/1150520Solarized Darkhttps://gist.github.com/2174604Ruby Bluehttps://github.com/chrisbateman/ChromeDevToolsTheme-RubyBlue/Expressohttps://gist.github.com/1207219Inversionhttps://github.com/mohsen1/Chrome-Dev-tools-dark-themeDark Themehttps://github.com/xajler/chrome-devtools-dark-themeDark Devhttps://github.com/simonsmith/DarkDevWebLight ThemeTheme: https://gist.github.com/1325072

66. http://anti-code.com/devtools-cheatsheet/

67. Chrome Developer ToolsChrome Developer ToolsRemote debugChrome Developer Tools

68. Thank you!! (@yoshikawa_t)

69. Resourceshttps://developers.google.com/chrome-developer-tools/https://developers.google.com/live/chrome/http://anti-code.com/devtools-cheatsheet/