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.

Testing JS in VSCode Console

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. enter image description here

• Phil: You could always try running node from the Terminal
• Phil: Also, this is what unit tests are for. You should write some. Jest is pretty easy to set up.
• Aplet123: 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.
• Sparky: @Phil Thanks for recommending Jest. I'm researching it now.
• Phil: 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

Answer 1

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.

Debug Menu RUN Options See Terminal output on the right ?!

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.

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

Answer 2

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

Answer 3

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 ...

1. Run your app using npm start
2. 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}"
 }
 ]
}

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