Develop Reference

How to configure VS Code to run npx vite dev when debugging

I am new to VS Code and JavaScript, and I am trying to make a simple app using Vite and Svelte, but I have a problem which I can't seem to resolve. (My code is currently just the default code given when a new project is created; I haven't changed it at all.)
When I run my app through Windows Terminal (by navigating to the project root directory and running npx vite dev), the app runs fine and my browser can connect to localhost:3000.
However, when I press on either:
Run > Start Debugging, or
Run > Run Without Debugging
in Visual Studio Code, it opens up Chrome to localhost:3000 but I just see localhost refused to connect. I think VS Code is never actually running the command npx vite dev, but I don't know how to change this.
When I open up .vscode/launch.json, I see this:
{
"version": "0.2.0",
"configurations": [
{
"name": "Debug with Chrome",
"type": "pwa-chrome",
"request": "launch",
"url": "http://localhost:3000",
"webRoot": "${workspaceFolder}",
}
]
}
And I am not sure what I should add here to get this to work. Any help would be appreciated, and sorry if this is a bit of a stupid question, but I couldn't fund any help searching Google or SO.
EDIT:
I have almost got this working by adding a preLaunchTask, but now chrome no longer automatically opens when I start debugging, so I might as well just run npm: dev on its own.
Here is .vscode/launch.json now:
{
"version": "0.2.0",
"configurations": [
{
"name": "Debug with Chrome",
"type": "pwa-chrome",
"request": "launch",
"url": "http://localhost:3000",
"webRoot": "${workspaceFolder}",
"preLaunchTask": "npm: dev"
}
]
}
I think this might be because the npm: dev task (which effectively runs npx vite dev) is blocking, and only finishes when I press the stop button (or double-click ctrl+c), so chrome is not opened because VS Code thinks the pre-launch task is still running.
If there any way I can tell VS Code to open Chrome while continuing to run npm: dev?

Here's the VSCode way to start the Vite Dev server (npx vite) and then automatically open Chrome and attach a debug session to it.
// launch.json
{
// 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": "Launch Vite DEV server",
"request": "launch",
"runtimeExecutable": "npx",
"runtimeArgs": [
"vite",
],
"type": "node",
"serverReadyAction": {
"action": "debugWithChrome",
"pattern": "Local: http://localhost:([0-9]+)",
"uriFormat": "http://localhost:%s"
}
},
],
}
Many things can be customized in the launch.json. I recommend you to read the documentation linked above.
The "magic" happends in "serverReadyAction" where you set the "action" to "debugWithChrome" to open chrome.
The "pattern" is a regex used to capture the port on which the server have been launched.
Finally, you add the port to the URL in the "uriFormat" by using %s. %s represent the capture done with the regex in "pattern"

Instead of having it run npx vite dev (which is the npm: dev task), have it run npx vite dev --open :)

Unbound breakpoint in VS Code (Chrome debug session, Vanilla JS application (Node backend))

VSCode debugger with chrome is working with my react projects, but with vanilla JS projects breakpoints are unbound.
All the solutions for this issue seem to be for frameworks. I cannot locate a fix for plain JS projects.
Launch.json
{
// 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",
"url": "http://localhost:3016",
"webRoot": "${workspaceFolder}"
}
]
}
Note, I have a node backend.
Thanks :)

What does "." (Dot) do in Visual Studio Code "runtimeArgs" property of launch.json

Today, I opened up my Visual Studio Code and saw that a new update has been released. Like any other normal (and ignorant) user, I just installed the update without any research about the changes. It's been months since I haven't had a problem with the updates so I assumed this one would be no different. But after the update, "launch" options would no longer work!
I have an Electron/Angularjs app. This launch config simply runs the app. Everything was working fine before the VS Code update but after the latest update (v 1.22.1), the app fails to launch from within VS Code.
I can, however, run my app through command line, so there are no changes/problems with Electron or others. The main Electron process would fail to find a module at $workspaceFolder (something about electron.asar resolvePaths?).
After a couple of hours of research, I found out that adding this simple property, grants my wish:
"runtimeArgs": [
"."
]
Does anyone know what this little guy does in VS Code launch.json?
Here's the full launch.json in case you need it:
"version": "0.2.0",
"configurations": [
{
"type": "node",
"request": "launch",
"name": "Electron",
"runtimeExecutable": "${workspaceFolder}/node_modules/.bin/electron",
"windows": {
"runtimeExecutable": "${workspaceFolder}/node_modules/.bin/electron.cmd"
},
"program": "${workspaceFolder}/Src/main.js",
"protocol": "inspector",
"console": "integratedTerminal",
"cwd": "${workspaceRoot}",
"runtimeArgs": [
"."
]
}
]

dot "." would pass your current working directory(cwd) to runtimeExecutable
,which in this case is .bin/electron.
So this executes
$ electron .
I'm guessing"program": "${workspaceFolder}/Src/main.js" is redundant and can be removed, because electron accepts a directory as path , given there's a package file in it.

Non consistent bug - debugger not starting in VS code

VSCode Version: 1.13.1
OS Version: Windows 10
Steps to Reproduce:
Open a node project
Press F5 or Click play button from debugger pane
Does this issue occur when all extensions are disabled?: Yes
A few times I have noticed that the debugger does not start in Visual Studio. Anyone know any fix to this?

Do you have a launch.json file? It should be at .vscode/launch.json
With the following format:
{
// 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",
"program": "${workspaceFolder}/myscript.js"
}
]
}
You can find more information here: https://code.visualstudio.com/Docs/editor/debugging

How to debug an electron app main process step by step?

I have tried devtron (it give lot of tools to inspect but does not let you step by step debug the electron app.)
Also I have tried electron-inspector along with electron-inspector.
With the release of new version electron. electron-inspector rebuild is breaking. I have raised the bug here

Any other method with node-inspector or electron-inspector is not working for electron version 1.6.x.
After much research the only simple and out of the box way to debug electron application step by step is visual studio code, Just install it.
Create a folder .vscode in your source app directory
Create a file launch.json and add
{
"version": "0.2.0",
"configurations": [
{
"name": "Debug Main Process",
"type": "node",
"request": "launch",
"cwd": "${workspaceRoot}",
"runtimeExecutable": "${workspaceRoot}/node_modules/.bin/electron.cmd",
"program": "${workspaceRoot}/main.js"
}
]
}
Press F5 or (Debug --> Start debugging). Your break point will hit.
steps copied from
https://electron.atom.io/docs/tutorial/debugging-main-process-vscode/