8

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?

jessehouwing
  • 106,458
  • 22
  • 256
  • 341
Bandara
  • 780
  • 8
  • 29

3 Answers3

6

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

jporcenaluk
  • 966
  • 10
  • 25
  • 2
    You said *You can develop locally*, but then it is followed with *Then, publish your extension and run it locally*.. Does that mean we need to publish our application first after all? Is there a way to not publishing the app first at all? Like for example when we are on the early stage of the development, so we want to only debug the app without publishing it and not getting the `No handler found on any channel for message` error.. – samAlvin Jul 31 '17 at 09:50
  • You need to publish it first if you want to access the VSTS API. If you don't want anyone else to see your extension, set the `public` flag to `false` in your `vss-extension.json` file and it will not publish to the marketplace. But in order to view the app inside of VSTS and access the APIs, it needs to be published first, yes. But you can just publish once with a reference to your local web server and run it locally from then on, until you are ready to publish the real thing. – jporcenaluk Aug 02 '17 at 12:18
  • 1
    Thanks for the clarification :) – samAlvin Aug 02 '17 at 14:47
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.

starian chen-MSFT
  • 33,174
  • 2
  • 29
  • 53
0

After initial deployment you may be able to use Fiddler to return your files directly from disk using FiddlerScript or the AutoResponder feature.

Community
  • 1
  • 1
jessehouwing
  • 106,458
  • 22
  • 256
  • 341