I know that any command in the "scripts" of package.json can easily be run from the "Run and Debug" menu in Vscode, but am wondering whether this could be done via the launch.json configurations, because i need to tell Vscode which directories to ignore during debugging.
My startup command requires ts-node and nodemon, so I can't simply refer to my index.ts file, like in the standard configuration:
"configurations": [
{
"type": "pwa-node",
"request": "launch",
"name": "Launch Program",
"skipFiles": [
"<node_internals>/**"
],
"program": "${workspaceFolder}\\src\\index.ts",//This doesn't help
"outFiles": [
"${workspaceFolder}/**/*.js"
]
}
]
Can i configure this to run a certain npm command?
Related
I get an error when I want to run the project that I pulled from github and wanted to run.I've been coding for 1 week yet and I don't understand how to fix this, I would appreciate if you help me
All the steps and the errors I encountered are in the photos below.
{
// 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",
"skipFiles": [
"<node_internals>/**"
],
"program": "${workspaceFolder}/Referans/src/Navigation/Login/Login.js"
}
]
}
Just try to run via terminal, cmd+j for terminal then
npm install
npx react-native run-android or npx react-native run-ios
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 :)
I want to debug both workout.js and test.js but vscode is debugging only the workout.js
how do I set the file name dynamic. so I can debug any js file with one launch.json config
Like
"program": "${workspaceFolder}/${currentFileName}.js",
Refer to the documentation for details.
{
"version": "0.2.0",
"configurations": [
{
"name": "Node js",
"program": "${file}",
"request": "launch",
"skipFiles": ["<node_internals>/**"],
"type": "node"
}
]
}
Take a look at the official documentation about variable substitution in Debugging and Task configuration files, there are a few that can be used to achieve what you want.
The easy way is to add multiple settings inside your single lunch config file. and whenever you want to debug any then choose that name while debugging
I have created launch.json file exactly as this for debugging my Electron Application on VS Code. But the console.log() not printing anything to the debug console.
If I add "console": "integratedTerminal" to launch.json the log displays on the built in terminal. I want the log to be displayed on debug console. How can I fix it?
In the launch.json configuration you are using, add
"outputCapture": "std"
example
{
"version": "0.2.0",
"configurations": [
{
"type": "node",
"request": "launch",
"outputCapture": "std",
...
}
]
}
I've got a configuration file where in the webpack devServer config
Withing the webpack devServer config, I have defined a express middleware function:
devServer: {
before(app){
init(app);
},
...
}
Where init is a function of the form:
init(app){
app.get('/endpoint', (req,res,next)=> {...;debugger; next();});
...
}
How can I debug this webpack-dev-server code?
I would prefer if I could debug it straight in VSCode, but I'm happy to use in-browser debugging if necessary.
As it turns out, there was a pretty simple way to debug webpack-dev-server in VSCode. Just debug the executable as a node file!
Here was my launch.json:
{
"type": "node",
"request": "launch",
"name":"launch webpack-dev-server",
"program": "${workspaceFolder}/node_modules/webpack-dev-server/bin/webpack-dev-server.js",
"args": ["--progress", "--inline", "--config", "build/webpack.dev.conf.js"]
}
Note: For anyone who copies this, you will have to change the webpack configuration file path arg to whatever it is on your machine.
You can debug webpack build scripts in the exact same way:
{
"type": "node",
"request": "launch",
"name":"launch webpack",
"program": "${workspaceFolder}/node_modules/webpack/bin/webpack.js",
"args": ["--progress", "--config", "build/webpack.prod.conf.js"]
},
Note: this debugs the build / server itself. If you want to debug the output files, you need to also attach a debugger to the url. You can do that using using something like the chrome debugger.