JavaScript 使用 Angular Augury 调试代码

Augury 是一款开源工具，允许开发人员分析和调试Angular 2 和 4 应用程序。现代 Web 浏览器提供开发人员控制台来检查页面上的各种元素，这在尝试调试标记、样式和脚本时非常方便。然而，这个控制台不足以调试通常具有大量组件、事件、属性和单独路由系统的 Angular 应用程序。 Augury是一款专为 Angular 应用程序设计的工具。它是一款适用于Angular 2+应用程序的开源调试和分析工具。 Augury 只是一个 Chrome 扩展，使用起来非常简单，因此您无需花费大量时间学习如何使用此工具。我们将构建一个示例 Angular 应用程序，然后通过探索项目的各个部分来了解 Augury 的实际应用。那么，让我们开始吧！ 你好，奥古里！ Augury 以树的形式可视化应用程序的结构，显示组件及其依赖项如何相互关联。



它还允许您检查对象的属性并即时更改它们。最重要的是，您可以轻松查看特定组件的源代码、根据需要插入断点、处理事件等等。最后，您可以浏览应用程序的路由系统，以及查看所有使用的模块的完整列表。仅作为 Chrome 扩展程序提供（不幸的是，尚不支持 Firefox），安装 WhatsApp 号码数据 它就像进入此页面并按安装按钮一样简单。之后，您可以通过按打开开发人员工具。您会注意到出现了一个名为Augury的新选项卡。切换到此选项卡后，您将看到应用程序的结构或短语“此应用程序不是 Angular 应用程序”。我注意到有时可能需要重新打开开发者控制台才能让 Augury 正确分析页面，所以要小心。 现在我们已经安装了 Augury，让我们继续下一部分并准备我们将用作游乐场的示例应用程序！ 构建示例应用程序 为了看到 Augury 的实际效果，我们需要调试一些东西，对吗？在本节中，我将快速指导您创建一个非常简单的应用程序（大致基于 Angular官方教程中的示例应用程序），列出一些用户并允许您编辑它们。




或者，您可以从我的 GitHub 存储库获取源代码。 在开始之前，请在您的计算机上安装Angular CLI（如果尚未安装）接下来，创建我们新项目的骨架： ng new sitepoint-augury 通过调整文件来更改应用程序的标题l通过删除代码生成器自动添加的文档的所有链接来调整并添加行 当然， 组件树视图 这里有两个窗格： 在左侧，您可以看到组件树，其中包含正确嵌套的应用程序组件列表。 右侧有所选组件的“属性”窗格。我们AppComponent只有一个属性title，它与它的值一起显示（用箭头注释）。 Learn to Code with JavaScript “属性”窗格的有趣之处在于，您可以根据需要更改值并立即观察更改。例如，尝试更改title： 更改标题 此外，组件名称旁边还有一个“查看源代码”链接。按下它将显中列出的用户： 用户数组 接下来，让我们尝试查看UsersComponent. 当相应的选项卡打开时，您可以在例如第 16 行插入一个断点。