CODEWITHSUNDEEP
javascriptdebuggingsharepointvisual-studio-code
ComputerHabit
ComputerHabit

Reputation: 31

VS Code debug in Edge Browser json.config explanation

Could someone please tell me how to use the Edge browser extension for debugging? I read the doc but I'm very unfamiliar with the json.config thing and it makes no sense to me. I don't understand where I'm supposed to put this file or how it's generated.

I understand the json.config from a powershell perspective because there was an explanation. I don't seem to be able to draw from that knowledge to get debugging happening in the browser.

Because I'm new to the interface. When I click the cog in the debugger I get:

{
"folders": [],
"settings": {}
}

Is this the json.config? I'm not sure really.

I'm trying to do Launch mode following the instructions here: https://github.com/Microsoft/vscode-edge-debug

It says put this in the json.config:

{
"version": "0.1.0",
"configurations": [
    {
        "name": "Launch localhost with sourcemaps",
        "type": "edge",
        "request": "launch",
        "url": "http://localhost/mypage.html",
        "webRoot": "${workspaceRoot}/app/files",
        "sourceMaps": true
    },
    {
        "name": "Launch index.html (without sourcemaps)",
        "type": "edge",
        "request": "launch",
        "file": "${workspaceRoot}/index.html"
    },
]
}

I have no clue if I'm supposed to wipe out all the other settings or nest this in one of the predefined areas.

Hopefully someone can explain this.

Ultimately I'm trying to get some form of javascript debugging working with SharePoint but for now I just want to get the plugin working.

Upvotes: 1

Views: 554

Answers (2)

Mark
Mark

Reputation: 182821

From https://github.com/microsoft/vscode-docs/blob/vnext/release-notes/v1_43.md#remote-debugging

Remote Debugging

You can now debug browser code from a remote workspace--like VS Online or remote SSH--in the new debugger. To set this up, port forward your web server (or a use a simple static web server), and then create a chrome or pwa-msedge launch configuration that points to the forwarded port. For example:

{   "version": "0.2.0",   "configurations": [
     {
       "type": "pwa-msedge",
       "request": "launch",
       "name": "Debug my App",
       "url": "http://localhost:5000", // <- debug an app forwarded on port 5000
     }   
  ] 
}

When you start it, a browser will open on your machine and you can debug like you normally would from the comfort of VS Code.

In general see https://github.com/microsoft/vscode-docs/blob/vnext/release-notes/v1_43.md#new-javascript-debugger and the v1.42 release notes https://github.com/microsoft/vscode-docs/blob/vnext/release-notes/v1_42.md#new-javascript-debugger.

Upvotes: 1

ComputerHabit
ComputerHabit

Reputation: 31

I had to watch the videos and read the instructions to figure this out. The website does have it but I just couldn't figure out where. The debugging guide helped.

My problem was that I was trying to launch a remote site and just couldn't get it to work. I found out it doesn't do remote. Files have to be local.

Upvotes: 0

Related Questions