https://www.youtube.com/playlist?list=PLNYkxOF6rcIBQ8j3J_PyM8JLAGKqZRByw
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

Snippets

https://developers.google.com/chrome-developer-tools/docs/authoring-development-workflow

Developer tools extensions

https://developers.google.com/chrome-developer-tools/docs/extensions-gallery

https://chrome.google.com/webstore/detail/snappysnippet/blfngdefapoapkcdibbdkigpeaffgcil

https://chrome.google.com/webstore/detail/jquery-debugger/dbhhnnnpaeobfddmlalhnehgclcmjimi

https://chrome.google.com/webstore/detail/pagespeed-insights-by-goo/gplegfbjlmmehdoakndmohflojccocli

https://chrome.google.com/webstore/detail/angularjs-batarang/ighdmehidhipcmcojjgiloacoafjmpfk

http://mrpotes.github.io/jshint-extension/


Learn more https://developer.chrome.com/extensions/devtools

Yeoman

Opinionated workflow for creating compelling web apps

On Grunt, Bootstrap and other great already existing tools.

Dependectiption.

Angular seed – folder structure, index,

WebSockets in Network panel

HAR

HAR stands for HTTP Archive, a JSON-based format that contains a list of resources loaded in the page.

http://www.showslow.com

Chrome DevTools (ChromeDevTools) on Twitter

https://twitter.com/ChromeDevTools

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

$_

Theming Dev Tools

http://devthemez.com/

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

https://github.com/ryanseddon/source-map/wiki/Source-maps%3A-languages,-tools-and-other-info

Less

Stylus – https://github.com/LearnBoost/stylus/issues/1072

sourceURL

Useful for templates

Project config files

.git_attributes

travis.yml

.editorconfig

The Breakpoint Ep. 4 —The Tour De Timeline

Anytime DOM changes, we need to recalc styles.

http://gent.ilcore.com/2011/05/how-web-page-loads.html

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

Timeline

DOMContentLoaded event with a blue line

Window's load event with red.

Overrides

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

http://youtu.be/FdsummsTeLo?t=24m23s

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

http://youtu.be/E8qvkGTwiV0?t=17m0s

esprima

Plato

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.

http://www.johnmccutchan.com/

https://plus.google.com/+JohnMcCutchan/posts

http://www.altdevblogaday.com/author/john-mccutchan/