如何在不部署到VSTS服务的情况下调试VSTS扩展生成摘要选项卡? [英] How to debug VSTS extension build summary tab without deploying to VSTS service?

问题描述

我需要为VSTS构建摘要"选项卡开发一个相当复杂的UI.我正在使用VS Code作为代码编辑器.后面的url描述了如何使用Edge浏览器进行调试，但是，这种方法需要不断地打包和部署VSTS扩展，从而使其费时. https://www.visualstudio.com/cn -us/docs/integrate/extensions/test/debug-in-browser

I need to develop a fairly complex UI for VSTS build summary tab. I'm using VS Code as the code editor. Following url describes how to debug using Edge browser, however this approach require constantly packaging and deploying extension to VSTS making it time consuming. https://www.visualstudio.com/en-us/docs/integrate/extensions/test/debug-in-browser

我尝试使用在浏览器中查看"扩展名和浏览器控制台中显示的以下消息直接加载.html(摘要"标签)，

I tried to directly load the .html (summary tab) using View In Browser extension and following message displayed in browser console,

No handler found on any channel for message: 
{"id":1,"methodName":"initialHandshake","instanceId":"VSS.HostControl","params":[{"notifyLoadSucceeded":true,"vssSDKVersion":2}],"jsonrpc":"2.0","handshakeToken":"4234q23rqfafaf23r"}

在开发时是否有更好的方法来调试应用程序?

Is there any better way of debugging the application while developing?

推荐答案

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

You can develop locally. Since VSTS uses an iframe to show your extension's content, you can run a local server and reference that in the vss-extension.json manifest.

首先，在vss-extension.json中，将baseUri属性设置为您在本地运行项目的位置，例如https://localhost:8889.您需要将其作为https运行，以便VSTS可以提供​​内容，否则您将收到混合内容"错误，而VSTS将拒绝显示扩展的内容.

First, in the vss-extension.json, set the baseUri property to where you are running your project locally, such as https://localhost:8889. You need to be running it as https for VSTS to serve the content, as otherwise you will get a "Mixed Content" error and VSTS will refuse to display your extension's content.

然后，发布您的扩展程序并在本地运行它.哇，您应该在本地进行开发.可能需要更多的反复试验，如果我缺少任何步骤，请告诉我.

Then, publish your extension and run it locally. Wha-la, you should have local development. There may be more trial and error needed, let me know if there's any steps that I'm missing.

如果链接仍然有效(您知道Interent的工作方式)，则此入门项目是一个不错的开始: https://github.com/Microsoft/vsts-extension-multivalue-control

If the link still works (you know how the Interent is), this starter project is a great start: https://github.com/Microsoft/vsts-extension-multivalue-control

这篇关于如何在不部署到VSTS服务的情况下调试VSTS扩展生成摘要选项卡?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！