CODEWITHSUNDEEP
javascriptvisual-studio-code
Sparky
Sparky

Reputation: 883

Debugging JavaScript in VS Code Console

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

Upvotes: 7

Views: 8455

Answers (3)

Code on the Rocks
Code on the Rocks

Reputation: 17566

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}"
          }
    ]
}
  1. After your app is running, launch the new run configuration using the green arrow in VS Code

Upvotes: 0

Arizon
Arizon

Reputation: 56

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

Upvotes: 0

Tobiah Rex
Tobiah Rex

Reputation: 2358

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.

Upvotes: 9

Related Questions