We Keep Coding

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

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.

Debug electron-forge app with VSCode

I'm trying to debug my electron-forge project with VSCode (electron main process, not render) but getting erros everywhere. I installed electron-forge package with all dependencies and init my project.
I followed this instruction and my launch.json for VSCode was:
{
"version": "0.2.0",
"configurations": [
{
"type": "node",
"request": "launch",
"name": "Electron Main",
"runtimeExecutable": "${workspaceRoot}/node_modules/.bin/electron-forge-vscode-win.cmd",
"cwd": "${workspaceRoot}"
}
]
}
But when I hit F5 in VSCode to debug, I got Attribute "runtimeExecutable" does not exist because electron-forge is installed globally so there is no such file in node_modules/.bin/ dir.
Then according to this I changed "runtimeExecutable" and my launch.json was as follows:
{
"version": "0.2.0",
"configurations": [
{
"type": "node",
"request": "launch",
"name": "Electron Main",
"runtimeExecutable": "electron-forge-vscode-win.cmd",
"cwd": "${workspaceRoot}"
}
]
}
The comand line was:
electron-forge-vscode-win.cmd --debug-brk=17423 --nolazy
√ Locating Application
√ Preparing native dependencies
√ Launching Application
But still nothig happened. My electron app started but didn't stop as --debug-brk argument supposed.
Next, I added one line to my launch.json:
{
"version": "0.2.0",
"configurations": [
{
"type": "node",
"request": "launch",
"cwd": "${workspaceRoot}",
"name": "Electron Main",
"runtimeExecutable": "electron-forge-vscode-win.cmd",
"protocol": "inspector"
}
]
}
Launched with this command line:
electron-forge-vscode-win.cmd --inspect=11172 --debug-brk
√ Locating Application
√ Preparing native dependencies
√ Launching Application
Note: 11172 is a random port number
And now I'm getting this error: Cannot connect to runtime process, timeout after 10000 ms - (reason: Cannot connect to the target: connect ECONNREFUSED 127.0.0.1:11172).

I believe that you need to add
"protocol"="legacy"
To your launch config. This is with the assumption that you are using a Node version < 8.x

I've come to the conclusion that you cannot use VSCode to debug the main electron process if you use electron-forge or electron-compile. In both cases, the VSCode debugger ignores breakpoints. The BrowserWindow comes up directly and the following message appears in the VSCode debug console window:
Debugging with inspector protocol because a runtime executable is set.
c:\Users\paulk\OneDrive\dev\forge-debug/node_modules/.bin/electron.CMD --inspect=16988 --debug-brk .
Debugger listening on ws://127.0.0.1:16988/9cead160-c448-4b33-a8a2-2dff6f51ed59
Sometimes when I close the browser window, a breakpoint in the "close all windows" event handler is hit. After closing the window, the following message appears in the debug console:
Debugger attached.
Perhaps this indicates that the VSCode debugger does not attach until after the BrowserWindow closes.
I believe the problem originates with electron-compile, which eletron-forge uses. Perhaps it has something to do with compiling on the fly.
Use VSCode to debug a simple Electron app is a breeze. Further, plain Electron emits a different message in the debugger window:
Debugging with inspector protocol because a runtime executable is set.
c:\Users\paulk\OneDrive\dev\electron-quick-start/node_modules/.bin/electron.CMD --inspect=37884 --debug-brk .
Debugger listening on port 37884.
Warning: This is an experimental feature and could change at any time.
This indicates that plain Electron is using a different method of connecting to the debugger than does electron-compile.
It is a shame that electron-forge does not work with VSCode main process debugging. This makes it useless for me. Also, the developers of electron-forge and electron-compile do not seem to consider this a problem. It would be helpful to know what debuggers the developers of electron-forge and electron-compile and the users of these packages are using to debug main process code.

Just add 【"port": 11172】 in launch.json after protocol.

Remote debug V8 Engine (not Node.js but ClearScript)

I am using Microsoft.ClearScript.V8 to embed a simple instance of a V8 Engine in a C# console application. I want to remote debug what is happening in the Google Chrome devtools but I fail.
Searching the interwebz, the only solution I can find is to install Eclipse and debug from there. This however is not desired. I want to understand what happens in the background and be able to reproduce the functionality.
I already know that the remote debugger talks through WebSockets but I don't know the implementation details. Can you guys perhaps point me in the right direction here?
My code:
int debugPort = 8888;
var ctx = new V8ScriptEngine(V8ScriptEngineFlags.EnableDebugging, debugPort);
ctx.AllowReflection = true;
/* This is not required but allows me to console log things. */
ctx.AddHostType("Console", typeof(Console));
When I attempt to connect using the V8 inspector (https://chrome.google.com/webstore/detail/nodejs-v8-inspector/lfnddfpljnhbneopljflpombpnkfhggl), I get the following error:
Could not launch debugger
Unexpected token T in JSON at position 0
This makes complete sense because it expects a JSON formatted string as Node implements it that way.
When I open http://127.0.0.1:8888/ in my browser, I receive the following output:
Type: connect
V8-Version: 5.3.332.45
Protocol-Version: 1
Embedding-Host: V8Runtime
Content-Length: 0
How do I remote debug my non-Node application from the Google Devtools?

You need at least ClearScript 5.5. Older versions don't support the V8 Inspector protocol. The latest version (5.5.2) works with chrome://inspect and fixes a few bugs.

Reading https://stackoverflow.com/a/50695896/5288052 seems that local debug of JavaScript code with ClearScript and Visual Studio Code is a complex thing, but is not. Here follows instructions to do it:
setup Visual Studio Code editing the Launch configuration in settings.json as stated in "VII. Debugging with ClearScript and V8"
start the V8 engine with V8ScriptEngineFlags.EnableDebugging + V8ScriptEngineFlags.AwaitDebuggerAndPauseOnStart option
run the C# code from Visual Studio or directly from the compiled executable; the C# code will pause waiting for the Visual Studio Code debug process to attach to it
start debug in Visual Studio Code (menu Debug | Start Debugging)
At this point VSCode connects and stops at the first JavaScript line executed and then stops at all "debugger;" commands. The current script is loaded and debuggable, and all previously executed scripts are visible inside VSCode.
See also Issue 159 and Issue 24.

This is the part of the answer (and not the answer).
Well so far I've have spent 2 days trying the same, and figured out that
ClearScript doesn't use node for debuging javascript code =/=.
have managed to run node.exe and attach debugger:
node process list output is (http://127.0.0.1:9229/json/list):
[ {
"description": "node.js instance",
"faviconUrl": "https://nodejs.org/static/favicon.ico",
"id": "574da142-2ee2-44da-a912-03f96868339c",
"title": "Administrator: IA-32 Visual Studio 2008 mode - node --inspect[6416]",
"type": "node",
"url": "file://"
} ]
But it doesn't look anything like ClearScript.V8 device (http://127.0.0.1:9222/):
Type: connect
V8-Version: 5.5.372.40
Protocol-Version: 1
Embedding-Host: V8Runtime
Content-Length: 0
Similar to yours.
Reading further V8 implements it's own debug protocol, which I didn't manage to find any definitive documents. All of internet has bits and pieces but nothing is complete.
I've managed in Chrome Dev Tools to recognize Remote Device, but beyond that there is no option to Inspect Device, not sure why (maybe due fact we both are using older version of ClearScript 5.4.x).
CDT > Remote Devices: Remote Target #127.0.0.1 / Target (and that's it, no button, no link, nothing can be done with it).
Last hope is to build my own inspector to some extent to see at least js stack traces if nothing (which was originally my goal).
--- Edit: to conclude and finish answer (for op, me, and others):
Found something that works correctly "Microsoft Code". It took little tweaking of configuration example, reading their helps, but made it work.
Loading script sources, break points, console, everything just works (as advertised).
How to:
Download Microsoft Code (I've took zip package - no installation needed)
https://code.visualstudio.com/
Run Microsoft Code, create workspace (launch.json file will be created there)
Edit launch.json (by switching to View->Debug and pressing configuration button - it automatically opens launch.json file).
add last 3 configurations from code provided below. The tweak is "protocol" : "legacy" ie 5.4.x versions uses NodeJS < 8.x version and debug protocol is much different. The CS V8 5.5.x uses "protocol" : "inspector", and "protocol" : "auto" covers them both (guess and the future extensions to debug protocol).
launch.json source code:
{
// 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",
"name": "Launch Program (NodeJS)",
"program": "${workspaceRoot}/bin/Debug/",
"cwd": "${workspaceRoot}",
},
{
"type": "node",
"request": "attach",
"name": "Attach by Process ID",
"processId" :"${command:PickProcess}",
"cwd": "${workspaceRoot}",
},
// works with 5.5.x V8 Runtime
{
"type": "node",
"request": "attach",
"name": "Attach to CSV8:9222 (Inspector)",
"protocol": "inspector",
"address": "127.0.0.1",
"port": 9222,
},
// works with 5.4.x V8 Runtime
{
"type": "node",
"request": "attach",
"name": "Attach to CSV8:9222 (Legacy)",
"protocol": "legacy",
"address": "127.0.0.1",
"port": 9222,
},
// works with 5.4.x and 5.5.x V8 Runtime
{
"type": "node",
"request": "attach",
"name": "Attach to CSV8:9222 (Auto)",
"protocol": "auto",
"address": "127.0.0.1",
"port": 9222,
},
]
}
run your ClearScript application (make sure you have debugging enabled, and that debug port matches).
from Microsoft Code Debug toolbar select Attach to CSV8:9222 (Auto) and press run. In this moment MS Code will load all remote JS source code. and you can select source and put break points there. Debuging works just as advertised.
Hope this helps you too

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.