Debugging JavaScript in VS Code Console

Question

How can I quickly test JavaScript in the VSCode Console as shown in the picture below? Do I have to install an extension to do this? I'm using VSCode in both Ubuntu and Windows 10 but I'm not seeing Console. All I see is Debug Console, Problems, Output and Terminal. I'm currently using the Quokka extension but I would really like to test JS in the way pictured below without having to open a browser to do that.

EDIT 2 Chrome JavaScript Console is used in conjunction with an index.html file and VSCode. I really wish the JS Console was built into VSCode.

Also, this is what unit tests are for. You should write some. Jest is pretty easy to set up. — Phil
– Phil, Commented Apr 3, 2020 at 0:36
That picture looks exactly the same as the chrome devtools. I reckon they just got a devtools window and put it on the side of the screen. — Aplet123
– Aplet123, Commented Apr 3, 2020 at 0:46
You might find it difficult to test your JS files if you're writing them for the browser (eg functions declared in the window scope). I'm not actually sure what best practices are for that these days but hopefully somebody here does — Phil
– Phil, Commented Apr 3, 2020 at 0:52

Tobiah Rex · Accepted Answer · 2020-04-24 01:54:14Z

9

Open launch.json

Then paste this entire chunk if empty, or add the single object to an existing list.

{
    "version": "0.2.0",
    "configurations": [
        {
            "name": "Node: Current File",
            "type": "node",
            "request": "launch",
            "program": "${file}",
            "console": "integratedTerminal"
        }
    ]
}

Now when you click on the Debug menu (the bug 🐞> button) on the side panel (or press F5), You'l have a Node: Current File as a run time dropdown option that will execute your JS via Node, and display the results in the attached VSC terminal.

Click the green triangle (my first image) to start debugging (or press F5) and pay attention to the terminal output (in VS code).

NOTE: If you attach break points, by clicking on the line numbers, indicated with red dots, you can use the Debug Console (left of Terminal tab)as a namespace environment to check variables etc (much like Quokka), during control flow evaluation.

I took this snippet from the VS Code documentation. It's a solid read.

edited Apr 24, 2020 at 1:54

answered Apr 3, 2020 at 1:20

Tobiah Rex

2,4072 gold badges16 silver badges19 bronze badges

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

1 Comment

HarvB Over a year ago

Thanks @Tobiah. Incidentally, if launch.json doesn't exist this needs to be inside a .vscode directory.

Arizon · Accepted Answer · 2023-02-14 08:49:54Z

I just want to add to this. I had this working as accepted answer with the "Chrome debugger" plugin, which is now deprecated and the built-in js-debug is referenced as the replacement. I spent a good 2 hours for this to work with Angular yesterday. I tried both using the node configuration and also the chrome and edge type like the documentation says should work. Didn't get it to work.

What actually solved it for me was:

ng serve in the terminal to bring up the angular dev server on https://localhost:4200 (I have added a localhost certificate to use SSL/TLS, out of the box, dev server runs on http)
open chrome and go to https://localhost:4200
using ctrl+shift+P >Debug: Open Link and then typing the url https://localhost:4200 to my dev chrome instance

It is now attached properly and the debug console is reflecting that it is actually attached. I can set break points and debug the code.

I should add that I am running WSL and using vs code remote to point to my WSL instance, where my code also resides, within the wsl filesystem.

Typescript debugging documentation, Angular

Code on the Rocks · Accepted Answer · 2024-02-01 02:11:33Z

0

React Debugging

There is an awesome section in the official VS Code docs that explains how to debug React apps:

https://code.visualstudio.com/docs/nodejs/reactjs-tutorial#_debugging-react

In short, you need to ...

Run your app using npm start
Create a launch.json file with the following contents

{
    "version": "0.2.0",
    "configurations": [
        {
            "type": "msedge",
            "request": "launch",
            "name": "Launch Edge against localhost",
            "url": "http://localhost:3000",
            "webRoot": "${workspaceFolder}"
          }
    ]
}

After your app is running, launch the new run configuration using the green arrow in VS Code

answered Feb 1, 2024 at 2:11

Code on the Rocks

18.8k6 gold badges81 silver badges98 bronze badges

Collectives™ on Stack Overflow

Debugging JavaScript in VS Code Console

3 Answers 3

1 Comment

Comments

React Debugging

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

React Debugging

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related