As a front-end developer, I have to debug the Vue/React code every day. I don’t know how to debug the Vue/React code, but I guess there are several kinds:

  • Instead of debugging, look directly at the code to find problems
  • Console. log Displays logs
  • Use Chrome Devtools debugger to debug
  • Use VSCode debugger to debug

Different debugging methods have different efficiency and experience. Now I basically use VSCode debugger to debug, which is efficient and enjoyable.

Maybe many students do not know how to use VSCode to debug web pages, this article I will introduce.

React and Vue:

Use VSCode to debug React code

I used create-react-app to create a demo project with this component:

Run up the development server:

The browser displays something like this:

How do I debug it with VSCode?

Let’s add a.vscode/launch.json configuration file to the root directory:

Creates a debug configuration of type Chrome and specifies that the debug URL is the address of the development server.

Create two breakpoints in the React code:

Then click Run:

Look, XDM, it’s broken! Call stack, variables for the current environment, and so on.

Release the breakpoint and continue.

You can also get the corresponding event object when clicking:

Isn’t it super convenient?

When you are tired of writing and want to see the react source code, you can click on a frame in the call stack to see it:

The workInProgress object is the current Fiber node, and the memorizedState property is where the hooks store their values:

After using VSCode to debug React code, it is a great experience to debug business code or see source code.

Take a look at Vue’s:

Debug Vue code with VSCode

Vue debugging will be a little more troublesome, in addition to the above on the basis of the path to do some mapping.

React we write JSX and TSX directly, which correspond to compiled JS files one by one, while Vue does not. Vue we write SFC (Single file Component) files, and need vue-loader to divide them into different files. So the path is mapped separately to the source location.

SourceMapPathOverrides in the debug configuration:

So how do we map that?

You can add a debugger to the source code and see what the mapping path is in the browser:

The webpack here: / / test – vue – debug/SRC/App. Vue? 11C4 is the path we want to map to, so where do we map to?

The path is obviously mapped locally, i.e. :

WorkspaceRoot is an environment variable provided by vscode, which is the project and path. After mapping, the address becomes a local file. Then the break point will work in local files:

If you look at the path here, it clearly maps to the files under the project.

But when I map it, I have a hash behind it, and that hash is going to change to, what do I do?

This path can be configured, this is really a webpack generated sourcemap file paths, can pass the output. The devtoolModuleFilenameTemplate to configure:

Available variables you can look at the documentation and not expand (just look around) :

Let’s say I set the path like this:

The debug file path looks like this:

Don’t worry about the prefix, just look at the back part, don’t you get rid of it? The hash?

Then map it to a local file:

The breakpoint in vscode is now in effect:

Whether you want to debug Vue business code, or you want to see Vue source code, the experience will be great.

conclusion

As a front-end engineer, I have to debug Vue and React codes every day. Different debugging methods have different experience and efficiency. So I want to introduce the way I use VSCode to debug web pages.

React debugging is relatively easy. Just add a Chrome dubug configuration. Vue debugging is a bit more difficult.

Use VSCode to debug React/Vue code, whether debugging business code, or want to see the source code is very convenient. You might as well try it, it will make debugging this thing very pleasant.