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

Question

我正在为Azure Devops仪表板写一个仪表板小组件，我发现周期性的 修改-发布-刷新仪表板-在Chrome工具中设置断点-再次刷新页面。 是相当繁琐的。

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

我正在使用 添加一个仪表板小部件 作为我的小组件的起始模板--但也很乐意更改

Answer 1

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

默认情况下，当你启动开发者工具时，开发者控制台的上下文如果是主页面，或者是顶部窗口。换句话说，你能够访问顶部窗口的DOM和状态。使用 "目标 "下拉菜单（如上图所示）将上下文切换到你的扩展框架。现在你能够访问你的扩展框架的DOM和全局状态了。

此外，你也可以使用官方的扩展 Azure DevOps 扩展热重启和调试。.

这个存储库演示了如何直接从开发机器加载Azure DevOps扩展的代码，而不是捆绑所有代码并通过市场部署。我们将利用Azure DevOps中的（有点隐藏的）能力从本地host加载内容，这将使我们能够在VS Code中使用热重载和调试。

更多细节信息和方法，请参考以下链接。

• 调试一个网络扩展
• 如何在不部署到VSTS服务的情况下调试VSTS扩展构建汇总表？
• 如何在不部署的情况下调试和开发Azure DevOps扩展？