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