Chrome开发者工具：学习高级功能的最佳资源？

Question

我随意使用Chrome开发者工具来调试AJAX＆amp; JavaScript的。大多数情况下，这意味着控制台检查元素/变量/方法状态，偶尔“网络”选项卡调试通过ajax提供的问题，如果我不能找到JS错误，很偶然会在调试器中断点。

但是，只要专门的前端开发人员（我的后端）在我面前使用相同的工具，他们就会使用这些漂亮的＆amp;抽象的小特征总是让我觉得“该死的，为什么我不知道这个”？

......所以，问题是：对资源的任何建议，提供彻底的＆amp;更高级的谷歌chrome devtools解释？

Answer 1

Addy Osmani在chrome开发工具you can find some of it here上做了很好的系列。我想如果你读它（并观看视频），我发现它们非常有用，如果你阅读它们，你就会被覆盖。我包括了一些额外的有用资源。

Addy Osmani教程和视频：

• Easy memory profiling using the chrome dev tools
• Visually re-engineering css for faster paint times
• The Breakpoint - Chrome dev tools （Youtube视频）
• The Breakpoint Ep2 （与保罗爱尔兰人合作的Youtube视频）
• The Breakpoint Ep3 （Youtube视频，来源地图）
• Chrome devtools course by TutsPlus（需要订阅）

<强>官方：

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

其他

• Nettuts series，相当基本，但很好。
保罗爱尔兰
• A re-introduction to the dev tools
• Smashing Magazine also did an article on profiling，但与Addy Osmani相比，它相当基本。

Answer 2

以下是Code School的另一个基本内容，包括每节课练习后的一些任务：http://discover-devtools.codeschool.com/

Answer 3

我发现此Google Chrome Devtools备忘单非常有用：http://anti-code.com/devtools-cheatsheet/。此外，this互动课程教您如何掌握Chrome DevTools。