I am attempting to debug an electron app in vs code (the main process, not the renderer process). The project I am trying to debug is this repo:
https://github.com/hello-efficiency-inc/raven-reader
it works really nice, once you have it cloned, and the right things are installed. Then I can just run:
yarn electron:serve
And boom, it runs nicely.
But I would like to also debug this. So I look around a bit, and find that I should probably use this launch.json file in the .vscode directory:
{
"version": "0.2.0",
"configurations": [
{
"type": "node",
"request": "launch",
"name": "Electron: Main",
"protocol": "inspector",
"runtimeExecutable": "${workspaceFolder}/node_modules/.bin/electron",
"runtimeArgs": ["--remote-debugging-port=9223", "."],
"windows": {
"runtimeExecutable": "${workspaceFolder}/node_modules/.bin/electron.cmd"
}
}
]
}
In my package.json, I have this line for finding the startfile:
"main": "./src/background.js",
So, I try to run by clicking the debug icon, and then green triangle where it says
run and debug | Electron:Main
Which gives me this in the call stack menu:
But nothing actually seems like it's running, I dont see any desktop window which I would like so I can actually debug, and I can't hit my breakpoints either
Best way to sort this is to install code runner extension in vscode
Related
Currently attempting to setup VS Code to run a node app, however, unable to get it to work correctly. I can run it however manually without an issue. With the goal once it's running to be able to attach to the node process for breakpoint debugging:
Manual operation that works:
navigate to the directory: /Users/me/source/app_modules/main-api/
run nvm use 12 to be using v12.22.1
run node -r esm dev-server.js
Runs correctly, and loads the esm package module so imports work correctly.
When running with launch.json:
{
"version": "0.2.0",
"configurations": [
{
"envFile": "${workspaceFolder}/app_modules/main-api/.env.local",
"type": "node",
"request": "launch",
"name": "Launch API",
"cwd": "${workspaceFolder}/app_modules/main-api/",
"runtimeVersion": "12",
"runtimeArgs": ["-r esm"],
"program": "${workspaceFolder}/app_modules/main-api/dev-server.js",
}
]
}
Running with this results in: /Users/me/.nvm/versions/node/v12.22.12/bin/node: bad option: -r esm
It's not finding the node_modules even though I request it to use the main-api directory as the main working directory.
I am having a super annoying problem, that started unexpected.
I have two NodeJS projects, and both projects uses TypeScript and they are symlinked. I usually debug by just attaching to the running process.
When debugging with VSCode, if I put a breakpoint in the projectA it work just fine, and the breakpoint is bonded to the actual TS file I want.
But then, I need call projectB from my projectA, and here the debugger goes directly to the projectA/node_modules/projectB/dist/**.js files, and shows that my TS files are breakpoint set but not yet bound.
This is kind of unexpected, since it was working before, and the debugger went directly to the projectA/node_modules/projectB/src/**.ts files.
I am not sure what happened, but I don't recall changing anything, and I also can't make it work again.
If I try debugging with WebStorm (attaching, just like I do with VSCode) it works just fine, this is only happening with VSCode.
I even tried to install VSCode Insiders, but no luck.
Node version: 14.16.1
launch.json:
{
"version": "0.2.0",
"configurations": [
{
"name": "Attach",
"port": 9229,
"request": "attach",
"skipFiles": [
"<node_internals>/**"
],
"type": "node",
"runtimeArgs": ["--preserve-symlinks", "--preserve-symlinks-main"],
},
]
}
PS: Both projects has the sourceMaps: true defined in the tsconfig.json file
I want to set up my VS Code debugger to debug my Next.js app. My launch.json contains the below settings:
{
"version": "0.2.0",
"configurations": [
{
"type": "node",
"request": "attach",
"name": "Launch Program",
"skipFiles": ["<node_internals>/**"],
"port": 9229,
"resolveSourceMapLocations": [
"${workspaceFolder}/**",
"!**/node_modules/**"
]
}
]
}
I also added the debug script to my packege.json:
"debug": "NODE_OPTIONS='--inspect' next dev"
First, I run npm run debug in my terminal, then I launch the debugger in the VS Code Run and Debug tab. The debugger is attached, but when I start adding breakpoints, some of them work properly (the dot indicating the breakpoint is red and the app stops when the breakpoint is hit), but most of them are ignored despite the red indicator. There're also some unbound breakpoints.
I spent a few days figuring this out with no effect. I really look forward to moving past console-logging for debugging purposes.
VS Code version: 1.57.0
I am having trouble finding a solution for running the VS Code integrated Debugger with Browser-Sync. Instead of launching chrome with the VS Code Debugger, my current launch.json looks like this:
launch.json
{
"version": "0.2.0",
"configurations": [
{
"name": "Attach to Chrome",
"port": 9222,
"request": "attach",
"type": "pwa-chrome",
"url": "http://localhost:3002",
"webRoot": "${workspaceFolder}/dist"
}
]
}
This solution let's me launch browser-sync via my taskrunner ("gulp") in my terminal, however, it does not let me set breakpoints within VS Code:
As soon as I pause the debugger, I will end up somewhere in the depths of the browsersync.js files (see Screenshot here)
Is there a better way of debugging within VS Code whilst using gulp and retaining automatic browser reload?
Ok, after making the comment I decided to give another try and it seems that everything is working finally!
My case is a little bit special because I have a browser-sync setup mapping to several other folders + typescript compilation + rollup + multi-root workspace + an in-house made framework + other things to handle. But in the end, a simple solution was the one that worked for me:
{
"version": "0.2.0",
"configurations": [
{
"type": "pwa-chrome",
"request": "launch",
"name": "Launch Chrome against localhost",
"url": "http://localhost:3000",
"pathMapping": {
"/": "${workspaceFolder}/dist",
}
}
]
}
The thing here is the pathMapping property that helps the debugger find the source map files. In my case, these files are mapped (with browser-sync) to the '/' path but they are inside the '/dist' folder inside my project root.
Keep in mind that if you have typescript source files like I do, you absolutelly need to generate source map files setting "sourceMap": true inside your tsconfig.json file.
EDIT Another thing that I forgot to mention is that the browser-sync server must be running in another terminal before you start the debug.
Normally, I run npm run start to run my program. I am trying to use the VS Code debugger to debug my program while running it.
Here's 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": "0.2.0",
"configurations": [
{
"name": "(Windows) Launch electron",
"type": "cppvsdbg",
"request": "launch",
"program": "npm",
"args": ["run", "start"],
//"preLaunchTask": "build:win32",
"stopAtEntry": false,
"cwd": "${workspaceFolder}",
"environment": [],
"externalConsole": true
}
]
}
When I run this using VS Code the error I get is: launch program '' does not exist.
This all works fine if I use node under program for my debug sessions.
Other things:
$ which npm
/c/Program Files/nodejs/npm
I tried changing program to exactly that path but it didn't work.
I think the reason is in your "program" field, which is supposed to locate the executable files. Some common values are like "program": "${workspaceFolder}/app.js"
program - executable or file to run when launching the debugger