This article introduces two ways to debug JS with VS Code:

  1. Quokka. Js plug-in

  2. Debugger for Chrome with Live Server

Quokka. Js plug-in

Plug-in address

Search for installations in the Extension store:

In VS Code, press CTRL + Shift +P and type quo:

You can see that there are two options, one for debugging JS and one for debugging TS. Let’s pick the first one.

There may be a prompt asking you if you want to buy the Pro version, which you can either turn off and ignore or choose to buy.

Try typing a few lines of code in the edit box that opens:

As you can see, the code runs in real time. The green square on the left indicates that the statement was successfully executed, and if not, it turns red.

Debugger for Chrome with Live Server

Debugger for Chrome plugin address

Address of the Live Server plug-in

Please download and install these two plug-ins first. This method requires the installation of Google Chrome.

Suppose you have a front-end project like this:

When you install Live Server you will notice the Go Live button in the lower right corner of VS Code:

Order it!

Live Srever creates a local development server and pops up a browser window with an address like this:

http://127.0.0.1:5500/

There will also be a hint:

You can close the browser window for a while, and don’t worry, you can still open the page at http://127.0.0.1:5500/ without clicking the little button in the lower right corner again or closing VS Code.

Remember this port number: 5500, because it will be used later. The port number will automatically +1 when you use Live Srever or other programs that use this port number.

As the name implies, Live Server is updated in real time. When you make changes to a project’s files or code, Live Server immediately updates and automatically refreshes the page.

Back to the editor.

Click on the Launch icon -> Create launch.json file:

Overwrite the original configuration with the following configuration and save:

{
    // Use IntelliSense to learn about related attributes.
    // Hover to view descriptions of existing properties.
    / / for more information, please visit: https://go.microsoft.com/fwlink/?linkid=830387
    "version": "0.2.0"."configurations": [{"type": "chrome"."request": "launch"."name": "Chrome debugging"."url": "http://localhost:5500"."webRoot": "${workspaceFolder}"}}]Copy the code

VS Code will save the relevant configuration in the project directory:

Note: Port 5500 in the “URL” field must correspond to the port provided by the Live Server.

Click:

You will see:

It’s working as you would expect.

Let’s move the mouse over the diagram and click to create a breakpoint:

Then click the button on the page:

You will see the breakpoint successfully intercepted execution:

If you’re careful, you might notice that clicking the Go Live button once opens a browser window, and clicking the Debug button again (F5) opens a second window for debugging. This may not be necessary, we just need a window.

Let’s edit the configuration so that this process only needs to open a browser window once.

Click on the gear next to “Chrome Debug” :

In the edit box that opens, click:

Get the following configuration and save it:

Search for Live Server in the Extension store and open its extension Settings:

The following configurations need to be modified:

  1. Chrome Debugging Attachment

Click to enter, “liveServer. Settings. ChromeDebuggingAttachment” : false to true.

"liveServer.settings.ChromeDebuggingAttachment": true
Copy the code
  1. Custom Browser

Click on the drop down box in this option and we select Chrome:

Modification complete!

Let’s restart the Live Srever service:

Go back to VS Code and press F5 to start debugging:

After that, you just need to click the Go Live button and Go back to VS Code and press F5 for each debugging of this project.

Of course, the Chrome debug option may still work, and when you close the Live Server open browser window, try using it again.

If the port number is occupied, you can click the gear next to debug to modify.

I wish:

Never BUG!

Code used:

<! -- ./index.html -->
<! DOCTYPEhtml>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="Width = device - width, initial - scale = 1.0">
    <title>Document</title>
</head>
<body>
    <div id="time">Please click the button below to get the current time</div>
    <button id="getTime">To get the time</button>
    <script src="./js/index.js"></script>
</body>
</html>
Copy the code
// ./js/index.js
let getTimeBtn = document.getElementById("getTime");
getTimeBtn.onclick = function (e) {
    let time = document.getElementById("time");
    let now = new Date().toLocaleString();
    time.innerHTML = now;
}
Copy the code
// ./.vscode/launch.json
{
    // Use IntelliSense to learn about related attributes.
    // Hover to view descriptions of existing properties.
    / / for more information, please visit: https://go.microsoft.com/fwlink/?linkid=830387
    "version": "0.2.0"."configurations": [{"name": "Attach to Chrome"."port": 9222."request": "attach"."type": "pwa-chrome"."webRoot": "${workspaceFolder}"
        },
        {
            "type": "chrome"."request": "launch"."name": "Chrome debugging"."url": "http://localhost:5500"."webRoot": "${workspaceFolder}"}}]Copy the code