WebRTC

+Ilya Grigorik @igrigorik

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