1.Chrome DevTools.next2012/12/21 Cyber Agent Toru Yoshikawa ( @yoshikawa_t )

2. Who? / Toru Yoshikawa@yoshikawa_t C.A.Mobile Web Google API Expert ( Chrome ) html5j.org/HTML5 jQuery Mobile Sublime Text 2 Japan Users Group allWeb/jQuery Mobile Blog: http://d.hatena.ne.jp/pikotea/ 3. HTML5 jQuery Mobile http://www.amazon.co.jp/dp/4844332937 http://www.amazon.co.jp/dp/484433266X 4. Chrome Developer Tools https://speakerdeck.com/t32k/improve-web-performance-with-chrome-dev-tools 5. Agenda1. ChromeWeb2. JavaScript3. 4. 1. 2. Chrome Developer Tools5. 6. ChromeWeb 7. SafariAndroid BrowserWebkitJavaScriptWebkit > JavaScriptCoreChrome > V8 (Node.jsV8)Firefox > SpiderMonkeyJavaScriptTips 8. URLchrome:URLchrome://about URLchrome://ags > chrome://appcache-internals > AppCachechrome://net-internals > etc... 9. Canary HTML5Chrome Developer Tools$_ (Console)Styled console log (Console)JPEG(Timeline)etc...StableStable 10. Canary Chrome Developer Toolschrome://agsSettings 11. Canary Chrome Developer Tools Peter BeverlooWeb Inspector commits RSS feed 12. JavaScript 13. Sources 14. Sources Content scripts Chrome Extensions 15. Sources Command+O Command+Shift+O Command+L CommandOptionFGREP 16. JavaScript console.log 17. debugger Breakpoints 18. Watch ExpressionsCall StackScope VariableConsole 19. Pause/Continue (F8)Step over (F10)Step into (F11)Step out (Shift+F11) 20. Breakpoints DOM Breakpoints XHR Breakpoints Event Listener Breakpoints Exception Workers 21. Breakpointstrue 22. DOM Breakpoints ElementsEvent Listener BreakpointsDOM Mutation 23. XHR BreakpointsXHR(Ajax)URLXHR Breakpoints 24. Event Listener BreakpointsAnimation, Timer requestAnimationFramesetTimeoutControl, Device resizescroll, deviceorientationClipboardTouch, Mouse, KeyboardDOM Mutation DOM 25. ExceptionExceptionExceptioncatchException 26. WorkersWeb WorkersWeb WorkerJS 27. TipsMinifyJavaScript 28. TipsConsoleFirebug http://ss-o.net/event/20120212/ 29. 30. Timeline 31. Timeline GC 15ms 32. Timeline Loading Scripting JS Rendering DOM Painting opacitybox-shadow 33. EventsLoading > Scripting > JavaScriptRendering, Painting > DOMDOMContentLoadedload 34. Frames30FPS60FPS30FPS24FPSFPS60FPS 35. 36. 37. Demohttp://www.jankfree.com/jank-busters-io/examples/measuring-fps/smooth.html 38. Demohttp://www.jankfree.com/jank-busters-io/examples/sluggish-scroll/sluggish-scroll.html 39. MemoryGCGC 40. Memory (Counters) [ - ] DOM Node CountEvent Listener Count iframe Proles 41. ProlesCPUCSS SelectorHeap SnapshotTake Heap Snapshot 42. ProlesTimelineStartCPU Proleconsole.prole() console.proleEnd() 43. Proles (Heap Snapshots) 2 44. Proles (Heap Snapshots)GC# New > # Deleted > # Delta > Alloc. Size > Freed Size > Size Delta > 45. HTML5 Navigation Timing API High Resolution Time 46. Navigation Timing API// console.log ( performance.timing.navigationStart ) 47. High Resolution Timeperformance.now() // webkitNow()performance.timing.navigationStart 48. 49. Page SpeedAccessibility Developer ToolsjQuery DebuggerDevTools autosave 50. Page SpeedWebPage Speed 51. Accessibility Developer ToolsAudits 52. jQuery DebuggerElementsjQuery DatajQuery EventsjQuery Selectorinspector 53. DevTools autosaveDevTools 54. Chrome Developer Toolshttps://github.com/frontdevDE/mnml-devtools-theme 55. 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 56. DevToolsDevToolsRemote DebugDevTools 57. Thank you!! ( @yoshikawa_t ) 58. 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/ )