javascript - Chrome Developer Tools: Best resource for learning advanced features?

Question

I casually use Chrome developer tools for debugging AJAX & JavaScript. Mostly that means the console to check on element/variable/method state, occasionally 'network' tab to debug issues fed through ajax, very occasionally break points in debugger if I can't hunt down a JS bug.

But any time a dedicated front-end developer (I'm back end) uses the same tools in front of me, they use these nifty & abstract little features that always leave me thinking "damn, why didn't I know about that"?

...So, the question is: Any suggestions for resources that provide a thorough & more advanced explanation of google chrome devtools?

Answer 1

Addy Osmani did an excellent series on the chrome dev tools, you can find some of it here. I think that if you read it (and watch the videos), I've found them very useful, if you read them, you're pretty much covered. I included some additional useful resources.

Addy Osmani Tutorials and videos:

• Easy memory profiling using the chrome dev tools
• Visually re-engineering css for faster paint times
• The Breakpoint - Chrome dev tools (Youtube video)
• The Breakpoint Ep2 (Youtube video with Paul Irish)
• The Breakpoint Ep3 (Youtube video, source maps)
• Chrome devtools course by TutsPlus (subscription required)

Official:

• Developer tools official guide by Google
• Google video tutorials on the developer tools by Google
• Profiling JavaScript by Google

Other:

• Nettuts series , fairly basic but nicely put.
• A re-introduction to the dev tools by Paul Irish
• Smashing Magazine also did an article on profiling, but it's fairly basic compared to the Addy Osmani stuff.