How to use VSCode to debug JS code on the browser

How to use VSCode to debug JS code on the browser? The following article will introduce to you how to use VSCode to debug the JS code of a web page. I hope it will be helpful to you!

Compared to looking at the code purely, I recommend looking at it in conjunction with the debugger, which allows us to see the actual execution route of the code and the changes in each variable. You can jump through large sections of code, or you can execute a certain piece of logic step by step. [Recommended learning: "vscode tutorial"]

Javascript code mainly has two running environments, one is Node.js and the other is the browser. Generally speaking, I will use VSCode’s debugger to debug JS code running on Node.js, and I will use chrome devtools to debug JS code running on the browser. Until one day I discovered that VSCode can also debug JS code on the browser. I tried it and it was really good.

How fragrant is it? Let's take a look together.

There is a .vscode/launch.json file in the root directory of the project, which saves the debugging configuration of VSCode.

We click the Add Configuration button to add a debugging chrome configuration.

The configuration is like this:

url is the address of the web page, we can run the local dev server , and then fill in the address here.

Then click debug to run:

VSCode will start a Chrome browser to load the web page and stop at our breakpoint. The call stack, scope variables, etc. will be displayed on the left panel.

The lowest level is of course the entrance to webpack. We can single-step debug the runtime part of webpack.

You can also take a look at the process from render, such as ReactDOM.render to rendering to a subcomponent, and what is done in the middle.

Or look at how the value of hooks of a component changes (the values ​​of hooks are stored in the memerizedState attribute of fiberNode of the component):

As you can see, it is very convenient to debug webpack runtime code, or debug React source code, or business code.

Maybe you will say, this is also possible in chrome devtools. Is there anything special about it?

Indeed, chrome devtools can also do the same thing, but VSCode has two main benefits for debugging web page code:

1. Type the code in the editor Breakpoints allow you to change the code while debugging.

2. Use the same tools to debug Node.js code and debug web page code. Experience can be reused and the experience is consistent.

Regarding the first point, the sources of chrome devtools can actually modify the code and save it, but after all, it is not a specialized editor, so it is awkward to use it to write code. I personally am more accustomed to debugging and modifying code at the same time, and VSCode wins in this regard.

We usually use VSCode to debug Node.js, but you can also use VSCode to debug web pages. So as long as you are familiar with a tool, you don’t have to learn how to use chrome devtools, and the debugging experience is better with VSCode. , after all, it is the editor we use every day, and it is more convenient, which is why VSCode wins.

But you may say, what if I want to see profile information? That is, the time consumption of each function, which is important for analyzing code performance.

VSCode debugger also supports this:

Click the button on the left to record time-consuming information for a period of time, and you can manually stop, You can specify a fixed time or a certain breakpoint, which are three ways to select the execution process of a certain piece of code to record profile information.

It will save a xxx.cpuprofile file in the project root directory, which records the time it takes to execute each function. It can analyze the time consuming of a certain piece of code layer by layer to locate problems and optimize performance.

If you install the VSCode extension of vscode-js-profile-flame, you can also switch to flame graph display.

Some students may not understand flame diagrams, let me explain:

We know that the execution path of a certain function has a call stack. We can see which function is called step by step, which is a line.

But in fact, there is not just one function called by this function, it may be multiple:

The call stack is just saved It represents a route of execution to a certain function, while the flame graph saves all execution routes.

So you will see such a fork in the flame graph:

In fact, this is the execution process:

Let’s calculate a question:

Function A takes a total of 50 ms, the function B it calls takes 10 ms, and the function C it calls takes 20 ms. Question: Function A How many ms does the rest of the logic take?

Obviously it can be calculated as 50 - 10 - 20= 20 ms. Maybe you think function D takes too long, then take a look at the specific code and then see See if it can be optimized, and then check the time consumption.

It's that simple. This is how profile performance analysis is done, simple addition and subtraction.

The width of each box in the flame graph also reflects the time taken, so it is more intuitive.

The JS engine uses event loop to continuously execute JS code. Because the flame graph reflects the execution time of all codes, you will see how much time each event loop code execution takes.

The width of each strip represents the time consumption of each loop. Of course, the thinner the better, so that it will not block rendering. Therefore, the performance optimization goal is to turn the flame graph into small thin bars, not thicker.

Going back to the topic, compared to the performance of chrome devtools, VSCode’s cpu profile and flame graph are actually simpler and easier to use, and can meet most needs.

I think, unless you want to see rendering and memory information, because VSCode does not support it, you need to use chrome devtools. For debugging JS code, looking at profile information and flame graphs, VSCode is enough.

Anyway, I think VSCode is pretty cool for debugging JS code on web pages, what do you think?

Original address: https://juejin.cn/post/7010768454458277924

Author: zxg_God said there must be light

For more programming-related knowledge, please visit: Programming Video! !

The above is the detailed content of How to use VSCode to debug JS code on the browser. For more information, please follow other related articles on the PHP Chinese website!