Debug single javascript file in “Visual Studio Code” - node.js

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

Related

How "Run-Script" works in VS Code for node.js applications when debugging?

I added a config start:debug manually but then again VS Code shows another one as well. Both executes the application but when I run mine it does not show all the app console outputs in terminal e.g. errors, logs, etc. but when I run VS Code's one then everything works perfectly and I prefer to the use that config across our team.
Problem is I cant checkin the config so in another machine it does not show up as expected. How does VS Code get that config and execute it? If I can replicate that in my config then I can check it in my repo for others to use.
Here are the steps to solve your mystery: by following along, you'll both discover the task configuration settings for the elusive option, and discover how it was added to your list:
Create an empty folder (I named mine so-70196209 after this question ID), and open it in a new VS Code workspace.
Create a package.json file in the folder. Make sure it has a start:debug script entry like this:
package.json:
{
"name": "so-70196209",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"start:debug": "echo \"Success\"",
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "MIT"
}
In the VS Code menu, select "Run" > "Add Configuration..."
In the list that appears, select "Node.js":
A file at .vscode/launch.json will be created with a default task like this:
.vscode/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-node",
"request": "launch",
"name": "Launch Program",
"skipFiles": [
"<node_internals>/**"
],
"program": "${file}"
}
]
}
You can delete this default task later if you don't want to keep it, but just leave it for now and follow along to the end.
Select the "Run and Debug" icon in the Activity Bar.
In the "Run and Debug" Side Bar, select the dropdown menu and choose "Node.js...":
In the list that appears, find the entry with the text "Run Script: start:debug". Find the gear icon on the right, and select the gear.
If you hover over the gear, a tooltip will appear with the text "Edit Debug Configuration in launch.json"
This will add a new entry to .vscode/launch.json, and this entry is the one that you've been searching for. (The reason why it wasn't in your launch config, but was in your dropdown list, is because you previously clicked the entry line at some point, but not the gear. I don't know why this adds it to the dropdown and not the config, but that's how it works right now.)
The config file now looks like this:
.vscode/launch.json:
{
"version": "0.2.0",
"configurations": [
{
"type": "pwa-node",
"request": "launch",
"name": "Launch Program",
"skipFiles": [
"<node_internals>/**"
],
"program": "${file}"
},
{
"type": "node-terminal",
"name": "Run Script: start:debug",
"request": "launch",
"command": "npm run start:debug",
"cwd": "${workspaceFolder}"
}
]
}
The "Run and Debug" dropdown menu now has the entry you want:
Problem solved! 🥳
You can certainly commit your .vscode folder as suggested by a VS code developer here and a video on it here
The additional Run:Script you see is added by VScode when you have start:debug defined in the scripts in your package.json.
In already existing projects, to share configs, committing your VScode folder is the only option and for new projects, best approach to share the configurations would be to have your own boilerplate creator with all the required configs added.
Create a wrapper around create-react-app to spawn the application boilerplate or your own custom webpack boilerplate with all the configurations needed ( the one I'd created with redux setup: https://www.npmjs.com/package/mytidbit-react-redux-app ), and have the configs added to .gitignore like below.
#IDE
.vscode/*
!.vscode/launch.json
When your team uses this boilerplate creator to spawn/start a project from scratch, they all will have uniform configs as you wanted. so the entire team is in sync. Only issue would be cross-platform compatibility with respect to LF/CRLF EOL etc.
with start:debug in the package.json scripts and your custom config. VScode adds that Run-Script
After removing start:debug from the package.json scripts, delete vscode/launch.json and recreate/add. launch config below

VSCode launch.json to debug node project within subfolder

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

trying to debug electron app, and window not showing up

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

In vscode using node.js, ctrl+F5 always asks for “select environment”. This didn't happen a few weeks ago

Whenever I press F5 or Ctrl+F5, vscode asks me to "select Environment". I have to choose Node.js every time. Somebody has given this solution:
Run > Add Configuration > select Environment. It works for that particular folder.
However, when I change folders the problem persists. How can I set up configurations globally?
The worst part is that this problem started appearing since 4-5 weeks. Before that vscode was automatically debugging & running my files on node.js
I found a workaround.
Installed this free extension code runner.
https://marketplace.visualstudio.com/items?itemName=formulahendry.code-runner
I had to set a custom shortcut key for enabling it to run since Ctrl+Alt+N didn't work for me.
The type key is missing in /.vscode\launch.json (Access it from the top left gear icon or open it in vscode), please see #Andy's answer:
{
"version": "0.2.0",
"configurations": [
{
"type": "node", // to avoid the environment Select
"request": "launch",
"name": "Debug File",
"program": "${file}"
}
]
}
If the type key is not there, Vscode asks you about the type.
There is actually an official solution for this and there is no need to install other extensions, as Visual Studio Code comes with support of Node.Js
The configuration file for running and debugging is in .vscode\launch.json, which can be found in the Run panel.↓
Then you can change the configuration file to the desired effect. If you want to run or debug the current file directly, the configuration is like this
{
"version": "0.2.0",
"configurations": [
{
"type": "node",
"request": "launch",
"name": "Debug File",
"program": "${file}"
}
]
}
it is also possible to run the index.js file in the current working directory.
"program": "${workspaceFolder}/src/index.js"
More information:
https://go.microsoft.com/fwlink/?linkid=830387
Debugging current file in VS Code

Attribute 'Program' does not exist - error in VS Code

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

Resources