The developer tools and productivity show hosted by Paul Irish and Addy Osmani.
Try to avoid manual work at repetitive tasks.
Do not spend more then 10 minutes on setting new project boiler plate → Yeoman.
Better support for mobile debugging.
New things via
Enable Developer Tools experiments
Opinionated workflow for creating compelling web apps
On Grunt, Bootstrap and other great already existing tools.
Angular seed – folder structure, index,
HAR stands for HTTP Archive, a JSON-based format that contains a list of resources loaded in the page.
Chrome DevTools (ChromeDevTools) on Twitter
SASS Live editing via source-files
Complete local history directly in Chrome Devtools.
$ and $$ in console – by JS history (Prototype library, legacy of $$)
Originally from Firebug https://getfirebug.com/wiki/index.php/Command_Line_API
part of new web components spec
Already a lot of things are built with Shadow DOM
IndexedDB & FileSystem
Resources » IndexedDB
Styled messages in console
Source maps – Language agnostic way to provide mapping from source to compiled version
Useful for templates
Anytime DOM changes, we need to recalc styles.
Decoding and resizing JPEG can take a long time.
Solution: Pre-scale images on server. Or at least measure.
Continuous repaint for debugging.
Avoid memory leaks.
On mobile, everything is slower.
Measure with Chrome on Android connected to DevTools on desktop.
DOMContentLoaded event with a blue line
Window's load event with red.
Run text through boxes somewhere on the page.
Very custom layout of text.
(program) Browser was busy doing other things, but we don’t know exactly why
Composite layout to minimalize
Null-transform hack. It played its part, but so relevant now.
Add background to text to be anti aliased
GitHub Status API – meet style guide lines
Empty hollow bar - happens off the main thread.
How to profile usage of memory in JS.
Important for Garbage collection.
V8 decides internally when to promote from young to old.
Every extension is part of heap.