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

Question

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

但是任何时候一个专门的前端开发人员（我是后端）在我面前使用相同的工具时，他们会使用这些漂亮而抽象的小功能，这总是让我想“该死，我为什么不知道呢” ?

...所以，问题是：对提供 google chrome devtools 的全面和更高级解释的资源有任何建议吗？

Answer 1

Addy Osmani 在 chrome 开发工具上做了一个优秀的系列，你可以在这里找到其中的一些。我认为，如果您阅读它（并观看视频），我会发现它们非常有用，如果您阅读它们，那么您几乎已经被覆盖了。我包括了一些额外的有用资源。

Addy Osmani 教程和视频：

• 使用 chrome 开发工具轻松进行内存分析
• 视觉上重新设计 css 以加快绘制时间
• The Breakpoint - Chrome 开发工具（Youtube 视频）
• The Breakpoint Ep2（与 Paul Irish 合作的 Youtube 视频）
• The Breakpoint Ep3（Youtube 视频，源图）
• TutsPlus 的 Chrome devtools 课程（需要订阅）

官方：

• Google开发者工具官方指南
• Google 开发者工具的Google 视频教程
• Google分析 JavaScript

其他：

• Nettuts 系列，相当基本但很好。
• Paul Irish对开发工具的重新介绍
• Smashing Magazine 也发表了一篇关于 profiling 的文章，但与 Addy Osmani 的东西相比，它相当基础。

Answer 2

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

Answer 3

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