debugger on VSCode not working with Javascript

Question

UPDATE: This is a question about how to configure VSCode to debug Javascript. I understand it uses Node.js, which I don't know about, javascript always works in the browser, but I would like to be able to step through the code rather than write hundreds of console.log() statements just to see what it is doing.

Trying to set up debugging for Javascript in VScode, but it's not picking it up, it keeps opening the launch.json file, but I've no idea what I need to put in there to make this work. I'm new to Javascript and just run things in a browser, I am assuming Node.js is kind of standalone JavaScript engine, so I did install it. I have Node v4.2.6 installed on linux mint computer and:

which node

resulted in:

/usr/bin/node

I'm confused, is this the correct path for node, and how do I add it to this config, I can't work out what the key/value pair is supposed to be. here is the launch.json file is spits out:

{
    // 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}/app.js"
    },
}

Any help on this would be much appreciated.

Dominik Schreiber · Accepted Answer · 2019-10-07 12:01:00Z

1

If I understand you correctly, you want to debug JavaScript running in the browser with VSCode. Right?

If that's the case, debugging your JavaScript running in node would not be of much value, because node may be missing the APIs your code relies upon (e.g. the DOM). Instead, you'll want to let your JavaScript run in the browser and just debug it with VSCode.

There are extensions for the different browsers that allow that, they mostly utilize the DevTools Protocol: vscode-firefox-debug, vscode-chrome-debug, vscode-edge-debug2.

Merely quoting from vscode-firefox-debug project page:

{
    "version": "0.2.0",
    "configurations": [
        {
            "name": "Launch index.html",
            "type": "firefox",
            "request": "launch",
            "reAttach": true,
            "file": "${workspaceFolder}/index.html"
        }
    ]
}

This will open ${workspaceFolder}/index.html in a new FireFox tab and you'll be able to debug that using VSCode. It'll get nasty with bundlers, source maps and all that jazz, but this is the gist you should get: run JavaScript in the browser, connect VSCode to the DevTools using an extension.

answered Oct 7, 2019 at 12:01

Dominik Schreiber

2,8011 gold badge26 silver badges38 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

iFunction Over a year ago

Apologies, was unable to finish my comment now can't find it so starting again or in 10 minutes when stack overflow lets me. What I want is the ability to step into my code, like I can with python or any other debugging. I am learning javascript as I've never learned it, and I am using VSCode as my editor. Personally I think putting in a console log every other line is not productive. I just want to be able to step into the code in vscode, and apparently it needs node.js. I have it installed it, but vscode can't find it, and I don t' know what path to put in to make it run.

iFunction Over a year ago

Dominik Schreiber, thank you, I think you've just answered all of my questions.

Collectives™ on Stack Overflow

debugger on VSCode not working with Javascript

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related