We Keep Coding

VSC Debuging React, cannot create breakpoints / attach to process

I've been trying out a lot of the potential fixes from so, but none of them helped me so far.
I cannot get the debugger to attach properly, it does attach, but it doesn't give me breakpoints (breakpoint set but not yet bound).
What I've done so far :
I created the entry in launch.json
{
"type": "node",
"request": "launch",
"name": "Launch debug client",
"sourceMaps": true,
"runtimeExecutable": "node",
"runtimeArgs": [
"--inspect-brk",
"./node_modules/webpack-dev-server/bin/webpack-dev-server.js"
],
"cwd": "${workspaceFolder}/client/"
}
That resulted in this error.
Is the second --inspect-brk=PORT the one that I should strive to attach to? The second PORT is always random, how would I get the debugger to attach to that? It also seems like webpack-dev-server doesn't care about inspect-brk because the client launches and works ...
I'm also not sure if I got webpack-dev-server to build source maps - are they saved in memory?
I did try to set a fixed port, remap sourceMapPathOverrides, set outFiles and setting the program path to no avail. Prior to writing this I did not even see that it tried to generate it's own new port ...

If anyone stumbles upon this: Webpack-dev-server is already launched in debugger mode, and the only way to currently attach to that process (as far as I could find) is through the browser.
You will need to install a debugger extension for vsc for the browser that you are using (currently only available for chrome and firefox). Then you can just attach / launch to the url that webpack-dev-server is starting on and vscode will hook into that instance.
Example
launch.json
{
"type": "firefox",
"name": "firefox debug",
"request": "launch",
"url": "http://localhost:8080",
"webRoot": "${workspaceFolder}/client"
}

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
},
]
}

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.

How can I debug a React app running inside a Vagrant VM with VS Code?

I created my app with create-react-app, and run it inside a VM managed by Vagrant. The sources are in the shared /vagrant folder and create-react-app claims out of the box debuggability with VS Code. I'm using VS Code on the host.
However, I'm not sure how to set my Chrome launch configuration for my use case, and no matter what I try I keep getting this message on any breakpoint I set:
breakpoint ignored because generated code not found (source map problem?)

Here's a sample configuration:
{
"version": "0.2.0",
"configurations": [
{
"type": "chrome",
"request": "launch",
"name": "Launch Chrome",
"url": "http://127.0.0.1:3000/",
"webRoot": "${workspaceRoot}",
"sourceMapPathOverrides": {
"/vagrant/*": "${workspaceRoot}/*"
}
}
]
}
Where:
"sourceMapPathOverrides": {
"/vagrant/*": "${workspaceRoot}/*"
}
is really the secret ingredient to make source maps workable for VS Code. This maps the /vagrant/ directory that is normally the root of your project on the VM, to ${workspaceRoot} which is the root of your project on the host, when opened as a directory in VS Code.
A very simple fix, in hindsight.

How do you create basic content to run on localhost with Visual Studio Code?

So I am noob with most web hosting technologies so this is probably a very basic question. I know a decent amount about coding in general and how the CSS, Javascript and HTML work together but am lost with the concept of hosting/running something and attaching to it, versus just having a browser open with the file up(file:///C:/Test/index.html). I know you can use a tasks.json file that can jump to your favorite browser and open a page up in it: How to view my HTML code in browser with Visual Studio Code?. However that is not creating a running process on localhost to attach to.
I have been trying to look at the Visual Studio Code tutorials here: https://code.visualstudio.com/docs/editor/debugging. But they seem to be thinking I have an ability to make a process run on the localhost and attach to it, when I don't.
I downloaded an extension for the debugger for Chrome and my launch.json now looks like this:
{
"version": "0.2.0",
"configurations": [
{
"name": "Launch Chrome against localhost, with sourcemaps",
"type": "chrome",
"request": "launch",
"url": "http://localhost:3000",
"sourceMaps": true,
"webRoot": "${workspaceRoot}"
},
{
"name": "Attach to Chrome, with sourcemaps",
"type": "chrome",
"request": "attach",
"port": 9222,
"sourceMaps": true,
"webRoot": "${workspaceRoot}"
}
]
}
I have tried to change this based on tutorials to launch content but it does not work as there tutorial specifies they are doing it with node.js as an example and was curious if you could do just a basic one.
How do I host code for just plain jane html, javascript, and css with Visual Studio Code? I want to just start testing a bit of javascript over and over with no NPM, Gulp, or other platforms. Can I just hijack this file or another to get it up and running in IIS or some other hosting platform? Or does it not matter? I was doing a tutorial for Angular 2 with NPM and with npm you just do a console command of 'npm start' in your location and then, bam it does it all for you and reserves a port on local host and does it all(http://localhost:3000 now shows my content). Can I do that with some process in VS Code or some command I can create?

You will need some kind of web server.
The angular 2 quickstart guide uses the lite-server. This is a small node based web server. You can just install it with npm.
npm init
npm install lite-server --save-dev
Than in your package.json add this to scripts
"start": "lite-server"
Make sure you have an index.html file within this folder and than just run
npm start
And your webserver starts and displays your page in the browser.
You can also create your own web server and then attach the debugger to that but this does involve using node or some other tools.
an easy way to go is create a server.js file with a simple express server.
Initialize npm: npm init
Install express with npm: npm install express --save
Than create a server.js file:
var express = require('express');
var app = express();
app.listen(3000, function() {
console.log('Listening on port 3000');
});
//Change the './' to point to the root of your angular app
app.use(express.static(path.resolve('./')));
//Send everything to your index.html page
app.get('/*', function(req, res) {
res.sendFile(path.resolve('./index.html'));
});
Now in your launch.json add the right configuration. For example:
{
"name": "Launch",
"type": "node",
"request": "launch",
"program": "${workspaceRoot}/index.js",
"stopOnEntry": false,
"args": [],
"cwd": "${workspaceRoot}",
"preLaunchTask": null,
"runtimeExecutable": null,
"runtimeArgs": [
"--nolazy"
],
"console": "internalConsole",
"sourceMaps": false,
"outDir": null
},
If you start the visual studio code debugger your webpage will be served from localhost:3000
Hope this is what you looking for:)

I use a node package called reload for this purpose. The good thing about this is it automatically refreshes on file changes and you do not need any configuration files. So serving up simple static html content is easy.
First you need to install reload:
npm install [-g] [--save-dev] reload
Then cd into a folder with index.html to serve the index file.
reload -b