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?
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.
Here is another basic one from Code School, including some tasks after each lesson to practice: http://discover-devtools.codeschool.com/
I've found this Google Chrome Devtools cheatsheet very useful: http://anti-code.com/devtools-cheatsheet/. Also, this interactive course teaches you how to master Chrome DevTools.
来源：https://stackoverflow.com/questions/16752622/chrome-developer-tools-best-resource-for-learning-advanced-features