How to debug VSTS extension build summary tab without deploying to VSTS service?

Question

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

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?

Answer 1

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.

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.

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

Answer 2

No, you can’t debug the extension code without deploying extension to VSTS, the extension must be deployed to the VSTS before debug the code.