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

Chrome Developer Tools: Best resource for learning advanced features?

本文关键字：功能 最佳 资源 高级 学习 开发者 工具 Chrome      更新时间：2023-09-26

我随意使用Chrome开发工具调试AJAX & &;JavaScript。大多数情况下，这意味着控制台检查元素/变量/方法状态，偶尔"网络"选项卡调试通过ajax提供的问题，非常偶尔的断点调试器，如果我不能找到一个JS错误。

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

…所以，问题是:有没有什么建议可以提供彻底的&更高级的解释谷歌chrome开发工具?

Addy Osmani做了一个关于chrome开发工具的优秀系列，你可以在这里找到一些。我认为，如果你读了它(和看视频)，我发现它们非常有用，如果你读了它们，你就基本了解了。我附加了一些有用的资源。

Addy Osmani教程和视频:

  • 使用chrome开发工具的简单内存分析
  • 视觉上重新设计css以加快绘制时间
  • 断点- Chrome开发工具(Youtube视频)
  • The Breakpoint Ep2 (Youtube视频with Paul Irish)
  • The Breakpoint Ep3 (Youtube视频，源图)
  • Chrome devtools课程由TutsPlus(需要订阅)

:

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

:

  • Nettuts系列，相当基本，但很好地放置。
  • Paul Irish对开发工具的重新介绍
    • Smashing杂志也写了一篇关于分析的文章，但与Addy Osmani的东西相比，它是相当基本的。

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

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

相关文章：