Angular 11：如何调试html内的变量？

Question

用例

我想调试 Angular 11 Web 应用程序的 html 代码中的变量。

我设法获取ctx.ngForOf变量，但这是我所能做的。

我的程序中缺少某些内容，但我找不到缺少的内容。

感谢您花时间回答这个问题

工具

我在用

• Visual Studio Code vscode
• 角11

我尝试了什么？

• 我发现ctx包含的变量ngForOf包含从 Web 服务检索的数据（20 项）。

ctx.ngForOf

    { 
        "adult": false,
        "backdrop_path": "/pcDc2WJAYGJTTvRSEIpRZwM3Ola.jpg",
        "genre_ids": [
            28,
            12,
            14,
            878
        ],
        "id": 791373,
        "original_language": "en",
        "original_title": "Zack Snyder's Justice League",
        "overview": "Determined to ensure Superman's ultimate sacrifice was not in vain, Bruce Wayne aligns forces with Diana Prince with plans to recruit a team of metahumans to protect the world from an approaching threat of catastrophic proportions.",
        "popularity": 7665.745,
        "poster_path": "/tnAuB8q5vv7Ax9UAEje5Xi4BXik.jpg",
        "release_date": "2021-03-18",
        "title": "Zack Snyder's Justice League",
        "video": false,
        "vote_average": 8.6,
        "vote_count": 4415
    },
    ...

浏览器调试的屏幕截图

Answer 1

您可以使用调试 API 调试 HTML 中的变量：

• 右键单击感兴趣的元素，然后单击“检查”
• 在控制台类型中ng.getOwningComponent($0)

这会注销该元素所属的组件以及所有属性和方法。

在这里，您可以在控制台中更改属性并在 HTML 中查看效果，例如，如果您的组件有一个名为 的属性name，您可以更改它：

• ng.getOwningComponent($0).name = 'New Name'
• 触发您键入的更改检测ng.applyChanges(ng.getOwningComponent($0))

有关更多详细信息，请参阅官方 Angular (v9+) 文档中 API 的链接。

（编辑）

以下是在浏览器控制台中输入的一些有用的快捷方式：

$state/$scope/$context：元素调试信息

$apply/$applyChanges()：触发​​变化检测周期

Answer 2

正如 Angular 文档所说：

将值转换为其 JSON 格式表示形式。对于调试很有用。

因此使用json管道来了解 html 变量的内容：

HTML：

<p *ngIf="movies.results">Value of movies.results {{ movies.results| json }} </p>

更新：

无需安装额外的 Chrome 或 Visual Studio Code 扩展。你需要做什么：

1. 通过 npm 命令运行您的应用程序。例如npm start。在底层TypeScript 编译器将创建映射文件
2. 打开 Chrome 开发者工具并在文件中设置断点yourComponent.ts。Google 工程师有一个关于如何在 Chrome 中调试 JS 的精彩教程。
3. 如果你想查看HTML模板的内容，那么使用json管道

所以TypeScript文件可以在Chrome开发者工具中调试，HTML模板可以通过json管道调试。