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.

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.

Chrome crashed when using visual studio code debug console

[Description]
I'm building an IDE for developing a chrome extension by using visual studio code + debugger for chrome extension. After some trial & error, I ran source java-script successfully by using Attach to chrome, with sourcemaps debug mode. But chrome always crash immediately when I use the debug console ...
How can I fix that?
[Symptoms]
Debugger paused on breakpoint, but chrome always crash immediately when I use the debug console.
chrome crash log
[Environment]
Ubuntu 17.10
Visual Studio Code 1.18.1
Debugger for Chrome 3.5.0
Google Chrome 63.0.3239.84
launch.json
{
// Use IntelliSense to learn about possible Node.js debug 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 Chrome against localhost, with sourcemaps",
"type": "chrome",
"request": "launch",
"url": "http://10.19.202.100:8080",
"sourceMaps": true,
"webRoot": "${workspaceRoot}"
},
{
"name": "Attach to Chrome, with sourcemaps",
"type": "chrome",
"request": "attach",
"port": 9222,
"sourceMaps": true,
"webRoot": "${workspaceRoot}/src"
}
]
}

[Root cause]
Exception: Natives disabled
Chrome stable version can't enable native client
[Solution]
Uninstall Chrome (stable channel)
Install Chrome (dev channel)
Start Chrome from console
google-chrome --remote-debugging-port=9222 --enable-nacl
Run VSCode debug with Attach to chrome, with sourcemap
Enjoy it!!
[Reference]
How to enable Native Client in Google Chrome

Waiting for debugger to disconnect... - Node.js in VSCode

I'm trying to step through a simple javascript example in Visual Studio Code, but the debugger hangs trying to disconnect.
macOS Sierra version 10.12.6
VSCode version 1.18.1 (up to date)
Node.js v8.9.2 (up to date) installed with Homebrew
Debugging with inspector protocol because Node.js v8.9.2 was detected.
node --inspect-brk= /*(port)*/ jsSandbox.js
Debugger listening on ws:// (ip address)
Debugger attached.
Waiting for the debugger to disconnect...
This seems like it's been a closed issue with both Code and Node already, which is why I'm so confused. Am I doing something wrong?
Here is the only javascript file I'm trying to debug:
// learning about closure
function increase() { // — gets called once
var getBig = 0;
return function() { // — — gets called each time
getBig += 1; // — — increments each time
console.log(getBig);
};
}
var bigOne = increase(); // -- a reference to the instance of the function
bigOne(); //1
bigOne();//2
...and the project's launch.json config:
{
"type": "node",
"request": "launch",
"name": "Launch Program",
"program": "${workspaceFolder}/jsSandbox.js",
"console": "internalConsole"
}

click on the button as shown below to open launch.json-
Give your correct file name here, where your server is starting. In my case it is app.js
"version": "0.2.0",
"configurations": [
{
"type": "node",
"runtimeVersion": "10.21.0",
"request": "launch",
"name": "Launch Program",
"program": "${workspaceFolder}/app.js"
}
]
runtimeVersion is optional, its required if you want to run it on a specific node version.And that node version should be installed on your system.

I found a syntax error in my code. The problem was that I wasn't catching the exception.
Using VS Code, I just ticked "Uncaught Exceptions" and found the faulty code.

You should make sure the tab showing problems is empty, i.e., you should address all problems. In cases where the problems are from the files in node_modules, the problems go away just by closing those windows.
For example in the following pictures, there are 4 issues in Problems tab. Fixing them will make the debugger to work correctly!

For me a dependency crashed while debugging, which seems to also crash the vscode debugger itself. Restarting VSCode would allow me to debug again. Removing the faulty dependency (i.e. fixing the code, as suggested in the other answer), allows the debugging process to close, although the Debug Console message still was confusing:
Debugger listening on ws://127.0.0.1:48673/54esaf46-659e-sd92-5e45-01e78845825e
Debugger attached.
Waiting for the debugger to disconnect...
It would appear the debugger can't disconnect. But I have no trouble starting a new debug session afterwards.

Use $'{file}
for active window:
{
"version": "0.2.0",
"configurations": [{
"type": "node",
"request": "launch",
"name": "Active window",
"program": "${file}"
}]
}

Check your launch.json file. Its present in folder .vscode in your project. In launch.json change program value to ${workspaceFolder}/.

For me what helped was the following:
created another new debugger anywhere in the program.
Run the new debugger
Stop the new debugger from the play/stop/step menu
It kind of resets the debugger I think from this "can't disconnect" glitch.

I found multiple "Node Debug" extensions installed. "React Native Tools" had a dependency on both of these. After I removed the "React Native Tools" and then the "Node Debug" extensions, VS Code resumed normal and expected behavior of running the debugger. I used the default launch configuration:
{
"version": "0.2.0",
"configurations": [
{
"type": "node",
"request": "launch",
"name": "Launch Program",
"program": "${workspaceFolder}/bin/www"
}
]
}

It happens when you break your code.
Start your project and you'll see that your app is crashing.
Fix the problem and you'll be able to debug again.

you may check .json
{
"type": "node",
"request": "launch",
"name": "启动程序",
"program": "${workspaceFolder}/main.js"
}

This happened for me when I added wrong file path in protractor.conf.js specs[]. I forgot to add file extension.

I opened the Task Manager and stopped this process:
qemu-system- X86_64.exe (4)
See example

I found I had the Chrome Debugger tools open in another tab, that was the one that was holding it up. Just close that one.

Please check your code firstly, there should be some issues when it compiles your code.

Launching Chrome and debugging from within Visual Studio Code

I am using Visual Studio Code to debug some front-end javascript (for a Wordpress plugin). I am having trouble configuring the launch.json file correctly.
I can launch chrome manually and then attach to it after the fact (using an Attach request), in which case javascript breakpoints work fine fine.
If I launch chrome from within vscode (using the Launch request), it does connect (I see console output) but I don't get my breakpoints firing. I assume there is some setting incorrect in my launch.json file.
{
"version": "0.2.0",
"configurations": [
{
"name": "Launch Signup Form",
"type": "chrome",
"request": "launch",
"url": "http://myclient.dev/signup-form",
"sourceMaps": true,
"webRoot": "../../..",
"runtimeArgs": [
"--remote-debugging-port=9222"
]
},
{
"name": "Attach",
"type": "chrome",
"request": "attach",
"port": 9222
}
]
}
I've tried whatever I could think of for web root (including the full local path to the web root at 'htdocs' and the relative path you see above. It doesn't seem to care what I put in there, so maybe I'm barking up the wrong tree.
The local project folder is here:
/home/me/code/vagrant-local/www/wordpress-myclient/htdocs/wp-content/plugins/cee-signup-form
On the server, that maps to:
http://myclient.dev/wp-content/plugins/cee-signup-form
In the page 'signup-form' I include the javascript file in question, using its full url.
Obviously, I can manually go the url and then attach every time I want to debug, but having a one-click launch and debug would be far superior.
What am I doing wrong?

Please follow below steps:
Check you have installed "VS Code - Debugger for Chrome" extention.
First Put this code in .vscode/launch.json :
{
"version": "0.2.0",
"configurations": [
{
"type": "node",
"request": "launch",
"name": "Node",
"port": 9229,
"protocol": "inspector",
"runtimeExecutable": "npm",
"runtimeArgs": ["run-script", "start"],
"console": "integratedTerminal"
},
{
"type": "chrome",
"request": "launch",
"name": "Chrome",
"url": "http://localhost:3000",
"webRoot": "${workspaceRoot}/client/src"
}
],
"compounds": [
{
"name": "Full-stack",
"configurations": ["Node", "Chrome"]
}
]
}
Go to the Debug mode in VS Code and start with 'Full-stack'.
Start npm
Refer this : https://github.com/auchenberg/timey

In my case, on Ubuntu 14.04, it worked after having added
"runtimeExecutable": "/usr/bin/chromium-browser"
I have however to start chrome in advance.

It turns out that it was a bug in VSCode, and it is fixed in the latest version (1.2.1). After updating, I had to do three things.
Update the Chrome Extension
In VSCode, hit CTRL+P to bring up the Command Palette, then:
Extensions: Show Outdated Extensions
At this point it will let you update them. Learn more here: https://code.visualstudio.com/Docs/editor/extension-gallery#_update-an-extension
Edit the launch config
They now require absolute paths for the web root. So, I had to change the webRoot property of the launch.json file to explicitly include the workspace root.
"webRoot": "${workspaceRoot}/../../..",
Close all copies of Chrome before debugging
This is annoying. But it works.