We Keep Coding

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

I have installed javascript debugger for Edge browser in my VSCode
It modifies the launch.json file like this.
"configurations": [
{
"name": "Attach to Edge",
"port": 9222,
"request": "attach",
"type": "pwa-msedge",
"webRoot": "${workspaceFolder}"
}
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

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:
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.

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.

I uninstalled Debugger for microsoft Edge extension and reinstalled it
Then I disabled Javascript debugger extension globally.
I closed all instances of edge browser and ran the following command.
start msedge.exe --remote-debugging-port=9222
Attached debugger and added breakpoint and it started working.

I can't run Chrome Debugger in VS Code on Linux Mint

Hi I've got a problem to run Chrome Debugger directly in VS Code. I'm working on Linux Mint. This is how my launch.json file looks like:
{
// 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": "pwa-chrome",
"request": "launch",
"name": "Launch Chrome against localhost",
"file": "${workspaceFolder}/index.html"
}
]
}
Now i try to run debugger and error message says: Unable to launch browser: "Unable to find Chrome version stable. Available auto-discovered versions are: ["dev"]. You can set the "runtimeExecutable" in your launch.json to one of these, or provide an absolute path to the browser executable."
Following the sugesstion I've added runtimeExecutable to chrome executable like this:
runtimeExecutable:"/opt/google/chrome/google-chrome" and now error message says:
Unable to Attach to the browser.
Google Chrome is installed on my machine version: 83.0.4103.116-1.
Thanks for help in advance
Error
Current Config

I'm also using Chromium on Linux Mint.
I solved the problem with
debug.javascript.usePreview: false in VS settings,
as explained in This answer

You need to add the webroot property too try this
{
"name": "Launch Chrome",
"request": "launch",
"type": "pwa-chrome",
"url": "${workspaceFolder}/index.html",
"webRoot": "${workspaceFolder}"
},

How to set up Visual Studio Code for multiple debuggers?

I'm using VS Code as my IDE and need multiple debuggers available for the various projects. I have Extendscript as one and would like to have Chrome for other files.
This is my launch.json file:
{
// 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": "1.0.0",
"configurations": [
{
"type": "chrome",
"request": "launch",
"name": "Launch Chrome",
"url": "http://localhost:8080",
"webRoot": "${workspaceFolder}"
},
{
"type": "extendscript-debug",
"request": "launch",
"name": "Ask for script name",
"program": "${workspaceFolder}/${command:AskForScriptName}",
"stopOnEntry": false
}
]
}
VSC is complaining about it "Matches multiple schemas when only one must validate." having two schema.
Also VSC is providing this: "Configuration 'Launch Chrome against localhost' is missing in 'launch.json'."
I'm able to debug the Extendscript files (jsx) but not the JS or HTML/JS/CSS files.
I am totally lost as used to use ESDK for jsx files and did Chrome in the browser. There seems to be no way to select the debugger I need.
I'm on Win10 very latest 1909 and VSC Version: 1.44.2 (user setup)
Commit: ff915844119ce9485abfe8aa9076ec76b5300ddd
Date: 2020-04-16T16:36:23.138Z
Electron: 7.1.11
Chrome: 78.0.3904.130
Node.js: 12.8.1
V8: 7.8.279.23-electron.0
OS: Windows_NT x64 10.0.18363
Thanks,
RONC

Regarding the complaining message, this might be a mismatch. Please restart the VS Code first. The messages should disappear after restart.
For setup of multiple debuggers, you need to add configuration separately to launch.json, like what you have done in your current launch.json, and you can choose the debugger you want to run in the option.
Try the following steps to get the Chrome debugger working:
Go to Extensions View (⇧⌘X) and search for Debugger for Chrome extension and then install.
You have specified http://localhost:8080 in your chrome url of the configuration, so you have to run a web server on that URL. Like step 1, go to Extensions View to search for Live Server extension and then install. Moreover, go to Command Palette (⇧⌘P) with Preferences: Open Settings (JSON), add the below snippet:
{
"liveServer.settings.port": 8080,
}
This will set custom port number of Live Server. In your case, 8080.
Click Go Live at the bottom right of VS Code to start the server. This will open a new Chrome browser. You can close it or leave it there.
Go to Run View (⇧⌘D) and select Launch Chrome option to run the debugger. It will launch a new Chrome browser, and at this point you should be able to start debugging by setting breakpoints.
You can see https://code.visualstudio.com/docs/debugging for more useful information and https://github.com/Microsoft/vscode-chrome-debug#using-the-debugger for Debugger for Chrome in specific.

Allow extensions using Debugger for Chrome

I am using the extension Debugger For Chrome on Visual Studio Code to debug JavaScript client code
As you know, it starts a new Chrome instance, without any extension.
Is there a way to allow Chrome extensions on that instance?

I could not find how to do what I asked. But a workaround that worked for my problem is to attach the debugger to an opened instance of Chrome.
So I can use extensions when debugging on Visual Studio Code.
In the file ./.vscode/.launch.json I edited the object that has "type": "chrome"
From:
{
"type": "chrome",
"request": "launch",
"name": "Meteor: Chrome",
"url": "http://localhost:3000/",
"webRoot": "${workspaceFolder}"
},
To:
{
"type": "chrome",
"request": "attach",
"name": "Meteor: Chrome",
"url": "http://localhost:3000/*",
"webRoot": "${workspaceFolder}",
"port": 9222
},
And add to the Chrome shortcut the remote-debugging-port parameter as you can see in the following image:
Once this is done, you have to open Chrome from your modified shortcut, go to the URL that you want to debug (The same that is on the URL value) and then attach the debugger on Visual Studio Code clicking on Start Debugging.
Note that:
The port of the JSON and the port of the Chrome shortcut must match.
I edited the URL value from "http://localhost:3000/" to "http://localhost:3000/*". The asterisk is because when you open your project, maybe it will redirect you to and URL like "http://localhost:3000/dashboard" or something similar. So when you try to attach the debugger it will no match. The asterisk says to the debugger that the last part of the URL could be anything.

Having Trouble executing javascript in VScode debugger

device: Macbook Pro 2016
OS: MacOS 10.13.5
editor software: Visual Studio Code
I installed VScode a few days ago and have been trying to run a simple hello world program in the debugger that is part of VScode. I initially had the issue that node was not installed but after I installed it I then got the error "Cannot connect to runtime process, timeout after 10000 ms - (reason: Cannot connect to the target: connect ECONNREFUSED 127.0.0.1:9229)."
I've tried a few other things such as: installing "node exec" and "code runner".
Also this is what my Launch.Json looks like
{
// 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": "node",
"request": "launch",
"protocol": "auto",
"name": "Launch program",
"port": 9229
},
]
}