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

Posted 2023-03-22

【中文标题】如何轻松快速地调试 Azure Devops 仪表板小部件？

【英文标题】：How to easily and quickly debug a Azure Devops dashboard widget?

【发布时间】：2020-09-28 01:53:59

【问题描述】：

我正在为 Azure Devops 仪表板编写仪表板小部件，并且我发现 修改-发布-刷新仪表板-再次在 Chrome 工具中设置断点-刷新页面的循环乏味。

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

我使用 Add a dashboard widget 作为我的小部件的起始模板 - 不过很高兴改变！

【参考方案1】：

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

默认情况下，当您启动开发者工具时，开发者控制台位于主页面或顶部窗口的上下文中。换句话说，您可以访问顶部窗口的 DOM 和状态。使用“目标”下拉菜单（如上所示）将上下文切换到扩展程序的框架。您现在可以访问扩展框架的 DOM 和全局状态。

此外，您还可以使用官方扩展名Azure DevOps Extension Hot Reload and Debug。

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

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

Debug a web extension How to debug VSTS extension build summary tab without deploying to VSTS service? How to debug and develop Azure DevOps extension without deployment?

【讨论】：

谢谢帕特里克 - 这是一个很好的答案，它应该被认为是开始使用 devops 扩展的规范答案！