Having Trouble executing javascript in VScode debugger - javascript

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

Related

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

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

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.

how to debug AngularJs and NodeJs code in Visual Studio Code

i need some help from you guys i am new in AngularJs,i want debug my code in Visual Studio code how do this please help me, i was installed Debugger for Chrome but its shows
breakpoints ignored because generated code not found
when i switch option Attach to Chrome, with sourcemaps Application does not start its show belo error,
Cannot connect to runtime process, timeout after 10000 ms - (reason:
Cannot connect to the target: undefined).
when i select Launch Chrome against localhost, with sourcemaps option my application run perfectly but debugger does not run
how to solve this type of problem,
{
"version": "0.2.0",
"configurations": [
{
"name": "Launch Chrome against localhost, with sourcemaps",
"type": "chrome",
"request": "launch",
"url": "http://localhost:8080",
"sourceMaps": true,
"webRoot": "${workspaceRoot}"
},
{
"name": "Attach to Chrome, with sourcemaps",
"type": "chrome",
"request": "attach",
"url": "http://localhost:8080",
"port":8080,
"sourceMaps": true,
"webRoot": "${workspaceRoot}"
}
]
}

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.

Categories