Search code examples
javascriptvisual-studio-codegoogle-chrome-devtoolsmicrosoft-edgevisual-studio-debugging

Visual Studio code debugging


I am trying to debug javascript code in visual studio code but it gives me the following error

Could not read source map for chrome-error://chromewebdata/: Unexpected 503 response from chrome-error://chromewebdata/edge-elixir-neterror.rollup.js.map: Unsupported protocol "chrome-error:"

the launch.json file has foll configurations

{
    // Use IntelliSense to learn about possible attributes.
    // Hover to view descriptions of existing attributes.
    // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
    "version": "0.2.0",
    "configurations": [
       
        {
            "name": "Launch Edge",
            "request": "launch",
            "type": "msedge",
            "url": "http://localhost:8080",
            "webRoot": "${workspaceFolder}"
        },
        
    ]
}

I tried to delete .vscode folder alongwith launch.json file and next time when trying to add microsoft edge again nothing works. when starting again it show me this page Localhost refused to connect . I dont understand why its giving me chrome error when i am trying to use Edge for debugging.

I have, Visual studio code: 1.90.2 version Edge : Version 126.0.2592.68


Solution

  • First I like to thank @Kendrick for guiding me in the right direction, I tried the things as he said and found out that the following launch.json file configuration works. The debugger can be launched for any subfolder javascript file for debugging.

    {
        // Use IntelliSense to learn about possible attributes.
        // Hover to view descriptions of existing attributes.
        // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
        "version": "0.2.0",
        "configurations": [
            {
                "type": "msedge",
                "request": "launch",
                "name": "Launch Edge against localhost",
                "url": "http://localhost:5500/${relativeFileDirname}",
                "webRoot": "${workspaceFolder}"
            }
        ]
    }

    Here the relativeFileDirname is the keyword that is important and this can be used for any browser configuration.