如何轻松快速地调试 Azure Devops 仪表板小部件?

How to easily and quickly debug a Azure Devops dashboard widget?

我正在为 Azure Devops 仪表板编写仪表板小部件,我在 Chrome 工具刷新页面中找到 修改发布刷新仪表板设置断点的循环再次相当乏味。

有没有办法直接在 Visual Studio 或 VS Code 中测试或调试仪表板小部件?

我正在使用 Add a dashboard widget 作为我的小部件的起始模板 - 不过很高兴进行更改!

可以本地开发。由于 Azure DevOps 使用 iframe 来显示您的扩展内容,您可以 运行 本地服务器并在 vss-extension.json 清单中引用它。

默认情况下,当您启动开发者工具时,开发者控制台位于上下文中,如果是主页,或者顶部 window。换句话说,您可以访问顶部 window 的 DOM 和状态。使用 "Target" 下拉菜单(如上所示)将上下文切换到您的扩展框架。您现在可以访问扩展框架的 DOM 和全局状态。

此外,您还可以使用官方扩展程序Azure DevOps Extension Hot Reload and Debug

This repository demonstrates how to load an Azure DevOps extension's code directly from the dev machine rather than bundle all the code and deploy it through the marketplace. We will leverage the (somewhat hidden) capability in Azure DevOps to load content from localhost, which will enable us to use hot reload and debug in VS Code.

更多详细信息和方式,请参考以下链接: