This document provides tips and tricks for using the Chrome DevTools. It discusses how to analyze network requests and waterfalls, profile JavaScript performance, find memory leaks, remotely debug mobile apps, add custom panels, and more. The tips are presented in a question and answer format from a Twitter conversation to help optimize web page performance.
This document provides tips and tricks for using the Chrome DevTools. It discusses how to analyze network requests and waterfalls, profile JavaScript performance, find memory leaks, remotely debug mobile apps, add custom panels, and more. The tips are presented in a question and answer format from a Twitter conversation to help optimize web page performance.
This document provides tips and tricks for using the Chrome DevTools. It discusses how to analyze network requests and waterfalls, profile JavaScript performance, find memory leaks, remotely debug mobile apps, add custom panels, and more. The tips are presented in a question and answer format from a Twitter conversation to help optimize web page performance.
Make The Web Faster, Google DevTools can do THAT? tips and tricks for performance minded... https://www.google.com/intl/en/chrome/browser/canary.html @igrigorik All the latest features, experiments and goodies! (get 'em while they're hot) @igrigorik http://www.codeschool.com/courses/discover-devtools A whirlwind tour of latest tips and tricks... Part I: DevTools tips, tricks and awesome features (video) Part II: Extending DevTools, Debug Protocol, Extensions, ... (video) Us, today Part III New features, updates, and improvements... Not a complete list, just the highlights Let's go! @igrigorik Customize your DevTools Graphics + Perf Disable cache while debugging! #protip #protip @igrigorik profiling++ omg... New: Chrome experiments! New and experimental DevTools features, at your fingertips! Network Timeline @igrigorik Pay attention to the text in gray... What is the HTTP overhead on each request? What is the time to first byte (TTFB) for each request? Which is the slowest resource by response time? Which is the slowest resource by duration? Pay attention to the color coding! @igrigorik There is an entire performance talk in above waterfall Fast TTFB for page header, but (very) slow body render Document parser does not wait, schedules the CSS download The CSS is queued, waiting for first byte for over 1s! Flush your document early... see example. Record a trace & export the waterfall! @igrigorik What's HAR? HTTP Archive format! Hit "record" to capture a multi-page trace Export entire waterfall: right click, "Save as HAR with Content" ... "HAR or it didn't happen." Become a HAR ninja! @igrigorik See our GDL: HAR show for a deep-dive Integrate with Hudson for instant feedback Push data into HAR Storage to track trends Capture mobile traffic with pcap, convert to HAR! $> gem install har $> har trace_file.har $> npm install yslow -g $> yslow --info basic --format trace_file.har $> npm install -g chrome-har-capturer $> google-chrome --remote-debugging-port=9222 --enable-benchmarking $> chrome-har-capturer -o out.har http://www.igvita.com/ CLI capture! Analyze, graph, ... chromeHAR @igrigorik Your timeline... in chromeHAR! Just drag and drop... DevTools is a web app! Nothing more, nothing less... Angular.js + DevTools styling + logic = standalone HAR viewer Optimizing "Time to Glass".... Q: When did the first paint happen? @igrigorik Store common scripts, functions, etc. CMD-Enter to run the snippet! Sources Snippets @igrigorik Sources (right click) Local Modifications diff of your changes Err, what changes did I make again? No more... 60 FPS? .. That's for games and stuff, right? Wrong. 60 FPS applies to web pages as well! @igrigorik Timeline > Frames to see time taken, memory usage, dimensions, ... Minimize the paint areas + figure out what's causing large repaints 60 FPS = 1000 ms / 60 = 16.6 ms frame budget @igrigorik Click here, no really... do click. Let's diagnose us some Jank.... Protip... "Show paint rectangles" "Show composited layer borders" (can you spot the problem?) @igrigorik Let's diagnose us some Jank.... What's the source of the problem? Large paints? CPU / JavaScript bound? Costly CSS effects? Let's find out... (hint, all of the above) @igrigorik Force full repaint on every frame to help find costly elements and effects In Elements tab, hit "h" to hide the element, and watch the paint time costs! Enable "continuous page repainting" @igrigorik Timeline trace or it didn't happen... 1. Export timeline trace (raw JSON) for bug reports, later analysis, ... 2. Attach said trace to bug report! 3. Load trace and analyze the problem - kthnx! Protip: CMD-e to start and stop recording! @igrigorik Annotate your Timeline! function AddResult(name, result) { console.timeStamp("Adding result"); var text = name + ': ' + result; results.innerHTML += (text + "<br>"); } Pages don't have memory leaks... right? (most likely) wrong... we have the tools to find out! @igrigorik Heap snapshot + comparison view 1. Snapshot, save, import heap profile 2. Use comparison view to identify potential memory leaks (demo) 3. Use summary view to identify DOM leaks (demo) The Breakpoint Ep. 7: Profiling a mobile site with Chrome DevTools @igrigorik Timeline Memory 1. CMD-E to start recording 2. Interact with the page 3. Track amount of allocate objects 4. ... 5. Fix leak(s) 6. Profit Tip: use an Incognito window when profiling code! Force GC @igrigorik Structural and Sampling JavaScript Profiling in Google Chrome http://www.youtube.com/watch?v=nxXkquTPng8 @igrigorik 1. Sampling a. Measures samples 2. Structural a. Measures time b. aka, instrumenting / markers / inline aka... chrome://tracing @igrigorik function A() { console.time("A"); spinFor(2); // loop for 2 ms B(); console.timeEnd("A"); } VS Annotate your code for structural profiling! Customizing and extending DevTools... You mean, <I> could make it even more awesome? Yep... @igrigorik Add a custom panel to DevTools http://devthemez.com/ Mac OSX: ~/Library/Application Support/Google/Chrome/Default/User StyleSheets/Custom.css Windows: C:/Users/AppDataLocal/Google/Chrome/User Data/Default/User StyleSheets/Custom.css Ubuntu: ~/.config/chromium/Default/User StyleSheets/Custom.css @igrigorik Add a custom audit plugin Are you doing repetitive tasks you can automate? Audits to the rescue! var category = chrome.experimental.devtools.audits.addCategory( "Readability", 2); category.onAuditStarted.addListener(function(results) { var details = results.createResult("Details..."); var styles = details.addChild("2 styles with small font"); var elements = details.addChild("3 elements with small font"); results.addResult("Font Size (5)", "5 elements use font size below 10pt", results.Severity.Severe, details); results.addResult("Contrast", "Text should stand out from background", results.Severity.Info); }); @igrigorik Add a custom panel to DevTools chrome.devtools.panels.create( "Font Picker", "FontPicker.png", "Panel.html", function(panel) { ... }); chrome.devtools.panels.elements.createSidebarPane( "Font Properties" , function(sidebar) { sidebar.setPage( "Sidebar.html"); sidebar.setHeight( "8ex"); }); http://developer.chrome.com/trunk/extensions/devtools.panels.html @igrigorik Add a custom JQuery panel to DevTools https://chrome.google.com/webstore/detail/jquery-debugger/dbhhnnnpaeobfddmlalhnehgclcmjimi?hl=en @igrigorik RailsPanel panel for DevTools Rails server-side logs right in... DevTools! Background request to fetch request logs and populate the panel One stop performance debugging. https://github.com/dejan/rails_panel @igrigorik Debugging iOS apps in DevTools! PonyDebugger is a client library and gateway server combination that uses Chrome Developer Tools on your browser to debug your application's network traffic and managed object contexts. @igrigorik Perf linting with PageSpeed Insights Install PageSpeed Insights Scans your current page, makes performance recommendations Follow the "learn more" link to... learn more, about each recommendation! @igrigorik Optimizing images with PageSpeed Insights Right click > Save as > Optimization done. No really, that's it... Speaking of mobile... We thought long and hard about DevTools + Mobile, and... @igrigorik Remote debugging Connect your Android device via USB to the desktop and view and debug the code executing on the device, with all the same DevTools features! 1. Settings > Developer Tools > Enable USB Debugging 2. chrome://inspect (on Canary) 3. ... 4. Profit @igrigorik Android Debug Bridge + Chrome Tracing Captures low level Chrome tracing data from your device. $ python ./adb_trace.py ['SurfaceView', '16954612'] Refresh rate auto-guessed to be 58.981002. Press enter to stop profiling. Pulling chrome-profile-results-2013-03-19-014011 to ./chrome.json https://github.com/johnmccutchan/adb_trace Debug your site on the device! Real 3G / 4G network latencies, radio delays, and throughput. Profile your JavaScript. Mobile CPU's are (still) much slower. Profile your rendering + GPU performance. All the same tools, all the same tips! The mother of all DevTools tips... Tune in to ~weekly The Breakpoint show on GDL. 1. The Sourcemap Spectacular 2. The Tour De Timeline 3. Accelerating Load Time, Run Time, and JS tooling 4. Profiling a mobile site with Chrome DevTools 5. Memory Profiling with DevTools And Make The Web Fast GDL also, of course... :-) Fin. +Ilya Grigorik - igrigorik@google.com - @igrigorik bit.ly/devtools-tricks