I have a node project as a subfolder within my main project. I am trying to create a launch config for VS Code so that it starts debugging index.ts file when I open the parent folder. Here's what my folder structure looks like:
So my node project is in the subfolder called NodeBackend. I want to press F5 or THE GREEN BUTTON on VS Code and start debugging my typescript file.
When I do that from within the parent folder I get an error:
Warning: To load an ES module, set "type": "module" in the package.json or use the .mjs extension.
However, I can debug it without issues when I load the "NodeBackend" project in VS code and press F5 or THE GREEN BUTTON.
My launch.json:
{
"version": "0.2.0",
"configurations": [
{
"type": "node",
"request": "launch",
"cwd": "${workspaceFolder}\\NodeBackend",
"name": "Launch Program",
"skipFiles": [
"<node_internals>/**"
],
"program": "${workspaceFolder}\\NodeBackend\\src\\index.ts",
"outFiles": [
"${workspaceFolder}/**/*.js"
]
}
]
}
Here's my source code:
https://github.com/Kayes-Islam/SimpleProject
Related
Could I please ask for help with the following?
I have an electron app (basically the quick start app so very very simple).
I am viewing the code with Visual Studio Code. I run the project from the terminal window in Visual Studio Code with the command "npm start". All works fine.
I want be able to debug the electron code in main.js. So I clicked on "Run and Debug" and selected "Create a launch.json file". From the subsequent drop down I then selected "Node.js". This produces the 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": [
{
"type": "pwa-node",
"request": "launch",
"name": "Launch Program",
"skipFiles": [
"<node_internals>/**"
],
"program": "${workspaceFolder}\\main.js"
}
]
}
If I now click on "launch Program" I get:
Error: Cannot find module 'electron'
I have electron installed globally, so I added this line:
"runtimeExecutable": "C:\\Users\\MyUserName\\AppData\\Roaming\\npm\\node_modules\\electron\\dist"
Now I get:
C:\Users\MyUserName\AppData\Roaming\npm\node_modules\electron\dist .\main.js
Error: spawn C:\Users\MyUserName\AppData\Roaming\npm\node_modules\electron\dist ENOENT
at Process.ChildProcess._handle.onexit (internal/child_process.js:269:19)
at onErrorNT (internal/child_process.js:465:16)
at processTicksAndRejections (internal/process/task_queues.js:80:21)
Thanks for any advice that enables me to run and debug this via the "Run and Debug" button rather than just running it via "npm start" from the terminal window.
The solution I found is here: https://www.electronjs.org/docs/latest/tutorial/debugging-vscode
The launch.json that they give at that address is:
{
"version": "0.2.0",
"configurations": [
{
"name": "Debug Main Process",
"type": "node",
"request": "launch",
"cwd": "${workspaceFolder}",
"runtimeExecutable": "${workspaceFolder}/node_modules/.bin/electron",
"windows": {
"runtimeExecutable": "${workspaceFolder}/node_modules/.bin/electron.cmd"
},
"args" : ["."],
"outputCapture": "std"
}
]
}
I copy and pasted the above in to my launch.json and my Electron app immediately started working in VS Code just like when I manually call 'npm start' from the console. Except it's better than just 'npm start' because for the server-side js files, debug breakpoints actually work!
I am just starting to learn using the Nodejs debugger. It has been really helpful already but I spent a a lot of time changing a js file I was debugging but I did not know that the changes I made were not being implement right away.
Is this an expected behavior? Can I set the debugger up so that it restarts on each save and notices the new changes?
Edit 1 :
Here is my debuf config:
{
// 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}\\app.js"
}
]
}
Normally, after every save, you have to restart your node program to see the changes. I'm sure there are other programs but one I use exclusively (I never use node alone) is nodemon. It's globally installed npm package program. Here is sample config for vs code debugger:
{
"type": "node",
"request": "launch",
"name": "Launch app - nodemon",
"runtimeExecutable": "nodemon",
"runtimeArgs": [
"--inspect=9250"
],
"program": "${workspaceRoot}/api/app",
"cwd": "${workspaceRoot}/api",
"autoAttachChildProcesses": true,
"restart": true
},
nodemon will monitor all the files and restart node every time it detects changes.
Add runtimeArgs to change debugger port.
So I have created a new folder called "Node Projects" and I added it to "Workspace" on VS Code. I then created two sample files called "test.js" and "test2.js". In these files I simply have a single log command to determine which is running.
When I run the test.js, I get the error message "Attribute 'program' does not exist (C:\Users\MyName\Documents\NodeProjects/Node Projects/test.js' so I click on "Open launch.json" button and see this:
{
// 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}/Node Projects\\test.js"
}
]
}
Based on my search here on stackoverflow, I believe the problem is with the "program" line, so I go ahead and change it to
"program": "${workspaceFolder}\\test.js"
So now, when I do a F5, the debugger runs the test.js which is great. But because the test.js value is hard-coded, even when I open test2.js on the editor and do an F5, it runs test.js again! So I tried removing the file name (i.e. test.js) from launch.json. But now when I try to run a file, I get the error that "Cannot launch program". Oh and deleting the launch.json didnt help either (it just recreated the initial launch.json file and I was back to square one).
Try this,
"program": "${file}"
${file} is a predefined variable in VS Code for the current opened file.
See https://code.visualstudio.com/docs/editor/variables-reference
Add another key "cwd", and it works for me.
"version": "0.2.0",
"configurations": [
{
"type": "node",
"request": "launch",
"name": "Launch Program",
"program": "${workspaceFolder}/xxx/xxx.js",
"cwd": "${workspaceFolder}"
}
]
While running my nodejs server code through the VSCode Debugger it pauses weirdly in multiple node module library files. Then I just have to hit play button like a hundred times to finally run the whole code. This is so annoying. I have no idea how to fix it. I even tried skipping node module files and folder in launch.json file but it just doesn't seem to work. Below is my launch.json file.
{
// 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": [
{
"type": "node",
"request": "launch",
"name": "Launch Program",
"program": "${file}",
"cwd": "${workspaceRoot}",
"skipFiles": [
"${workspaceRoot}/node_modules/**/*.js",
"<node_internals>/**/*.js"
]
},
{
"type": "node",
"request": "attach",
"name": "Attach to Process",
"address": "localhost",
"port": 5858
}
]
}
uncheck them and it will work smoothly
Is there a way to debug a single javascript file step by step without launching a node server?
For example seed files by knex.
Node is definitely needed, but I do not know how to start the VSC debugger with only the file.
There are two ways to achieve this:
Just add launch.json and give your file_name. and start
debugging.
For example, If your file_name is index.js. create a folder
called .vscode and inside this folder create launch.json, structure looks like this:
main_folder
|___ index.js
|___ .vscode
|___ launch.json
and provide path as below in launch.json:
{
"version": "0.2.0",
"configurations": [
{
"type": "node",
"request": "launch",
"name": "Launch Current Opened File",
"program": "${file}"
}
]
}
The second option is to create a package.json and give your file an entry point. when you press F5, vscode will consider this file as starting point.
main_folder
|___ index.js
|___ package.json
you can create package.json manually or can create it using npm init, This will ask you a bunch of questions, and then write a package.json for you.
{
"name": "application_name",
"version": "0.0.0",
"description": "for single page debugging",
"main": "index.js",
"author": "",
"license": "ISC"
}
To launch(debug) currently opened/active *.js file, you should have the following configuration in your launch.json file:
{
"version": "0.2.0",
"configurations": [
{
"type": "node",
"request": "launch",
"name": "Launch Current Opened File",
"program": "${file}"
}
]
}
You can run your current file in a Node environment without creating a launch.json.
With the file you want to debug open, go to the debugger panel, click the green arrow and choose Node as your environment.
From the folks at VS Code.
To help with any confusion, your debug options depend on how your workspace is setup:
If you have not created a launch.json file, you will see the following options in the debug panel. Clicking Run and Debug will debug the currently active file.
If you have a package.json file, you will still see the same view shown above; however, VSCode will first try to debug the file name you have specified in the main attribute of your package.json. If it does not find that file, it will then debug the currently active file. So, for instance, if my package.json shows index.js as my main file, then VSCode will always run that file in the debugger if it can find it instead of your currently active file.
Finally, you can be more explicit by adding configurations to launch.json. When you do this you can then choose which file to debug from the drop-down. In my environment, I add an option to be able to run the currently active file (the first entry in the JSON below), as well as, any other files I want to access quickly (the second entry in the JSON below). Now, the dropdown will show these options to choose from.
{
// 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": "Debug this file",
"program": "${file}",
"skipFiles": [
"<node_internals>/**"
]
},
{
"type": "node",
"request": "launch",
"name": "Debug testing.js",
"program": "${workspaceFolder}/testing.js",
"skipFiles": [
"<node_internals>/**"
]
}
]
}
For more details, check-out Debugging in Visual Studio Code.
The easiest way for me...
Right-click on the file in VS file explorer.
Click "open in Terminal".
Then in terminal type node myFile.js