CODEWITHSUNDEEP
javascriptmicrosoft-edgevscode-debugger
Harkirat singh
Harkirat singh

Reputation: 765

How to debug in VS Code by attaching to Edge browser?

  1. I have installed javascript debugger for Edge browser in my VSCode
  2. It modifies the launch.json file like this.
    "configurations": [
    {
        "name": "Attach to Edge",
        "port": 9222,
        "request": "attach",
        "type": "pwa-msedge",
        "webRoot": "${workspaceFolder}"
    }
  1. I have started the edge browser and enabled remote debugging on specified port through this command.

start msedge.exe --remote-debugging-port=9222

I am getting the following error

vscode error

Upvotes: 8

Views: 18769

Answers (4)

Vivek Kaushik
Vivek Kaushik

Reputation: 321

Install Microsoft Edge Tools for VS Code

Use this launch.json in .vscode


    {
        "version": "0.2.0",
        "configurations": [
            {
                "type": "msedge",
                "name": "Launch Microsoft Edge",
                "request": "launch",
                "cleanUp": "wholeBrowser",
                "cascadeTerminateToConfigurations": [
                    "Open Edge DevTools"
                ],
                "url": "http:localhost:3000",
                "presentation": {
                    "hidden": true
                }
            },
            {
                "type": "msedge",
                "name": "Launch Microsoft Edge in headless mode",
                "request": "launch",
                "runtimeArgs": [
                    "--headless",
                    "--remote-debugging-port=9222"
                ],
                "url": "http:localhost:3000",
                "presentation": {
                    "hidden": true
                }
            },
            {
                "type": "vscode-edge-devtools.debug",
                "name": "Open Edge DevTools",
                "request": "attach",
                "url": "http:localhost:3000",
                "presentation": {
                    "hidden": true
                }
            }
        ],
        "compounds": [
            {
                "name": "Launch Edge Headless and attach DevTools",
                "configurations": [
                    "Launch Microsoft Edge in headless mode",
                    "Open Edge DevTools"
                ],
                "stopAll": true
            },
            {
                "name": "Launch Edge and attach DevTools",
                "configurations": [
                    "Launch Microsoft Edge",
                    "Open Edge DevTools"
                ],
                "stopAll": true
            }
        ]
    }

Upvotes: 1

Harkirat singh
Harkirat singh

Reputation: 765

  1. I uninstalled Debugger for microsoft Edge extension and reinstalled it
  2. Then I disabled Javascript debugger extension globally.
  3. I closed all instances of edge browser and ran the following command.

start msedge.exe --remote-debugging-port=9222

  1. Attached debugger and added breakpoint and it started working.

Upvotes: 0

Yu Zhou
Yu Zhou

Reputation: 12999

Which version of JavaScript Debugger and Edge browser are you using? I test with JavaScript Debugger v1.57.0 and Edge browser Version 91.0.864.59, it works well.

Have you launched the page you want to debug in Edge first before you start to debug in VS Code? "request": "attach" means attaching the debug to an existing instance. For example, I need to debug this page https://localhost:44364/test.html, then I'll navigate to this url in Edge after start msedge.exe --remote-debugging-port=9222. The result is like this:

enter image description here

Update:

If you're using Debugger for Microsoft Edge, you can use the launch.json like below, then do what I said in the previous answer:

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "edge",
      "request": "attach",
      "name": "Attach to Edge",
      "port": 9222,
      "webRoot": "${workspaceFolder}"
    }
  ]
}

Note: Please install the latest version of Visual Studio. Debugging Microsoft Edge (Chromium) is supported for VS versions >= 15.9.19.

Upvotes: 5

iLuvLogix
iLuvLogix

Reputation: 6420

Microsoft Edge extension APIs don't support promises as stated in the official docs.

If it's an option, you could use callbacks in your app instead of promises..

Also see issue on github here and there.

Upvotes: 0

Related Questions