Shulou(Shulou.com)06/02 Report--

Editor to share with you how VSCode debug js code, I hope you have something to gain after reading this article, let's discuss it together!

This paper introduces two methods of debugging js with VS Code:

Quokka.js plug-in

Debugger for Chrome and Live Server collocation

Quokka.js plug-in

Plug-in address: https://marketplace.visualstudio.com/items?itemName=WallabyJs.quokka-vscode

Search for installation in the extension Store:

In VS code, use the shortcut key ctrl+shift+P to call up the facet, and type quo:

You can see that there are two options, one for debugging js and the other for debugging ts. Let's pick the first one.

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

Try entering a few lines of code in the open edit box:

You will find that the code runs in real time. The green square on the left indicates that the statement was executed successfully, and if not, it turns red.

Debugger for Chrome and Live Server collocation

Debugger for Chrome plug-in address: https://marketplace.visualstudio.com/items?itemName=msjsdiag.debugger-for-chrome

Live Server plug-in address: https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer

Please download and install these two plug-ins first; this method requires the installation of Google browser.

Suppose you have a front-end project like this:

When you install Live Server, you will find a small Go Live button in the lower right corner of VS Code:

Click it!

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

Http://127.0.0.1:5500/

At the same time, there will be hints:

You can close the browser window temporarily, and don't worry, you can still open the web page through http://127.0.0.1:5500/ without clicking the small button in the lower right corner again or closing VS Code.

Please remember this port number: 5500, because it will be used later. When you open more Live Srever or other programs to occupy this port number, the port number will automatically + 1.

As the name implies, Live Server is updated in real time. When you modify the project file or code, Live Server will immediately update and automatically refresh the page.

Go back to the editor.

Click: run icon-> create launch.json file:

Overwrite the original configuration with the following configuration and save it:

{/ / use IntelliSense to learn about the relevant properties. / / hover to see a description of an existing property. / / 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}"}]}

VS Code saves the relevant configuration in the directory where the project is located:

Note: the port number 5500 in the "url" field corresponds to the port number provided by Live Server.

Click:

You will see:

As you wish, it is already working properly.

We move the mouse to the location of the icon and click to hit the breakpoint:

Then click the button on the page:

You will see that the breakpoint successfully intercepted the execution:

If you are careful, you may find that when you click the Go Live button once, a browser window opens, and when you click the debug button again (keyboard shortcut F5), a second window opens for debugging. This may not be necessary, all we need is a window.

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

Click the gear next to "chrome debugging":

Click in the edit box that opens:

Get the following configuration and save it:

Search the extension Store for Live Server and open its extension settings:

There are two configurations that need to be modified:

1 、 Chrome Debugging Attachment

Click to enter and change "liveServer.settings.ChromeDebuggingAttachment": false to true.

"liveServer.settings.ChromeDebuggingAttachment": true

2 、 Custom Browser

Click the drop-down box in this option, and we select chrome:

The modification is complete!

Next let's restart the Live Srever service:

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

After that, for each debugging of this project, all you have to do is click the Go Live button and go back to VS Code and press F5.

Of course, the chrome debugging option may still be in effect, and you can try to open it again when you close the browser window that Live Server opens.

If you encounter the situation that the port number is occupied, you can click on the gear next to debugging to modify it.

Wish:

There will never be BUG!

The code used:

Document, please click the button below to get the current time acquisition time / /. / js/index.jslet getTimeBtn = document.getElementById ("getTime"); getTimeBtn.onclick = function (e) {let time = document.getElementById ("time"); let now = new Date () .toLocaleString (); time[ XSS _ clean] = now;} / / .vscode / launch.json {/ / use IntelliSense to learn about the relevant attributes. / / hover to see a description of an existing property. / / 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} "}]} have finished reading this article I believe you have a certain understanding of "how to debug js code in VSCode". If you want to know more about it, you are welcome to follow the industry information channel. Thank you for reading!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.