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 chrome://flags

Enable Developer Tools experiments


Developer tools extensions

Learn more


Opinionated workflow for creating compelling web apps

On Grunt, Bootstrap and other great already existing tools.


Angular seed – folder structure, index,

WebSockets in Network panel


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


Theming Dev Tools

Shadow DOM

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,-tools-and-other-info


Stylus –


Useful for templates

Project config files




The Breakpoint Ep. 4 —The Tour De Timeline

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.

FPS meter.

Avoid memory leaks.

Optimising for Mobile

On mobile, everything is slower.

Measure with Chrome on Android connected to DevTools on desktop.

Breakpoint Episode 5: DevTools Grab bag


DOMContentLoaded event with a blue line

Window's load event with red.


CSS Regions

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

The Breakpoint Ep. 6: Accelerating Load Time, Run Time, and JS tooling

GPU Acceleration

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

The Breakpoint Ep. 7: Profiling a mobile site with Chrome DevTools and Android

Empty hollow bar - happens off the main thread.

The Breakpoint Ep. 8: Memory Profiling with Chrome DevTools

GMail performance.

How to profile usage of memory in JS.

How Javascript manages memory:

Important for Garbage collection.

V8 decides internally when to promote from young to old.

Every extension is part of heap.