Debug single javascript file in “Visual Studio Code”

Question

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.

kgangadhar · Accepted Answer · 2020-09-14T15:47:38.623

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

Thanks for this solution. So basically I have always to provide the path to the single js file. Is there a way to automate this? — Carol.Kar, Nov 08 '17 at 05:27

score 14 · Answer 2 · edited Mar 17 '22 at 16:08

14

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

edited Mar 17 '22 at 16:08

kgangadhar

4,886
5
36
54

answered Apr 26 '19 at 14:45

Maksim Shamihulau

1,219
1
15
17

1

To have a global way to debug any file search for "Launch" in the VS Code settings. Find this text: "Global debug launch configuration. Should be used as an alternative to 'launch.json' that is shared across workspace". Press "Edit in settings.json" and add "configurations" posted above under the field "launch" – Joakim L. Christiansen Oct 06 '20 at 13:28

score 4 · Answer 3 · answered Feb 01 '19 at 04:20

4

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.

answered Feb 01 '19 at 04:20

samlandfried

801
9
11

1

This does not work. My debugger panel has no green arrow. – Scorb Oct 28 '22 at 21:09

score 2 · Answer 4 · edited May 06 '20 at 01:18

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.

score -4 · Answer 5 · answered Sep 23 '19 at 10:47

-4

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

answered Sep 23 '19 at 10:47

Rob McFeely

2,823
8
33
50

Debug single javascript file in “Visual Studio Code”

5 Answers5

Linked