Debugging standalone single JavaScript file with VS Code

Question

I have a standalone piece of JS code that makes an HTTP request and does some work on it. Now, normally I'd debug such scripts by running them in repl.it and then console.loging the data. However, VS Code has a neat side panel of "Variables", "Watch", "Call stack" that I wish to make good use of.

I used the "Debugger for Chrome" extension from the VS Marketplace. However, every time I hit F5, the Chrome browser opens and attempts to connect to a localhost, which my JS code doesn't need. This is my launch.json file (generated on default):

{
    "version": "0.2.0",
    "configurations": [
        {
            "type": "chrome",
            "request": "attach",
            "name": "Attach to Chrome",
            "port": 9222,
            "webRoot": "/FolderName"
        }
    ]
}

What I expect to happen is that my JS code should run inside VS Code, and the call stack and variables of my code should be displayed in the left sidebar.

So, how to achieve this task?

Example: The following script represents what my script does to a certain degree:

var xhttp = new XMLHttpRequest();
xhttp.open("GET", "https://some.website.org/numbers/", true);
xhttp.setRequestHeader("Content-type", "text/plain");
xhttp.send();

xhttp.onload = function (e) {
    var numbers = JSON.parse(e.srcElement.response));
    add(numbers);
};

function add(numbers){
    console.log(numbers);
}

It is of course more complicated than this, but the gist is the same: make one API call and do some manipulation on the data received.

@SLaks it is a small simple JS code. Even when you open the F12 DevTools Console on Chrome, and paste the code in there, it can run. It can also run on repl.it. It is not supposed to run on Node. It may work there, but I have not tried it and do not wish to. — Gaurang Tandon
– Gaurang Tandon, Commented May 18, 2018 at 16:01
Then you need a web server to serve an HTML page that runs it. — SLaks
– SLaks, Commented May 18, 2018 at 16:35
@SLaks Sorry, but my JS code runs just fine in repl.it, so I really cannot understand I would need to open an entire web server just for that. In fact, my JS code can run without the need for any HTML at all. I thought web servers are only for storing sensitive information, or for doing some secret manipulation that shouldn't be done the client side. — Gaurang Tandon
– Gaurang Tandon, Commented May 19, 2018 at 3:06
No; web servers are for serving HTTP responses (such as web pages). Repl.it is a server. You should use a simple static server, such as github.com/isaacs/st. — SLaks
– SLaks, Commented May 22, 2018 at 14:25

L0uis · Accepted Answer · 2018-05-18 16:20:06Z

1

Can you try to open an HTML page with your script in chrome, then use the Attach feature of the debugger for chrome?

There is an example launch setting at https://marketplace.visualstudio.com/items?itemName=msjsdiag.debugger-for-chrome where you can specify a file:

{
    "version": "0.1.0",
    "configurations": [         
        {
            "name": "Launch index.html (disable sourcemaps)",
            "type": "chrome",
            "request": "launch",
            "sourceMaps": false,
            "file": "${workspaceFolder}/index.html"
        },
    ]
}

answered May 18, 2018 at 16:20

L0uis

7295 silver badges9 bronze badges

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

1 Comment

Gaurang Tandon Over a year ago

Thanks. I tried that new code, but I got the error "Cannot connect to runtime process; timeout after 10000ms"

mdajobs · Accepted Answer · 2021-11-22 14:12:13Z

0

Here is the article that explains how to do it:

Easier browser debugging with Developer Tools integration in Visual Studio Code

https://blogs.windows.com/msedgedev/2021/07/16/easier-debugging-developer-tools-in-visual-studio-code/

Extensions are no longer required to debug JavaScript with Chrome browser, Edge browser, or Node.js since the integrated debugger was first launched in VS Code since version 1.4.6.

Lastly, here is a YouTube video that demonstrates how to debug JavaScript based on the above article:

Are you debugging JavaScript in VSCode? | YOU SHOULD!

https://youtu.be/68wO-sl5vXg

-Cheers

answered Nov 22, 2021 at 14:12

mdajobs

11 bronze badge

1 Comment

Gino Mempin Over a year ago

While this link may answer the question, it is better to include the essential parts of the answer here and provide the link for reference. Link-only answers can become invalid if the linked page changes. - From Review

Collectives™ on Stack Overflow

Debugging standalone single JavaScript file with VS Code

2 Answers 2

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related