Maybe this problem is quite basic, but I did not find it after searching for a long time. Some said to install plug-ins, and some said to change what configuration, which made me feel dizzy. I always thought that I could not debug directly in the engineering development environment, until one day, I accidentally found that… (By the way, this is VUE3, never tried vuE2.)

Where did the code go?

As a rule of thumb, if you want to debug your JS code, press F12 to find the Soursces tag, find your code, and set a breakpoint.

But for projects that are done in an engineering way, this is what you see in development mode, where is the code that I wrote?

The code is lost, the JS files above are all don’t understand the code, don’t worry, the code is not lost, just moved.

The code is below

It was only by chance that I found the code hiding there, which caused me to use console for a long time.

The file structure is exactly the same as the code we wrote, finally found, but so many twins? Is that true? Just count them all.

To set breakpoints

The next step is to set a breakpoint, try it, and sure enough, it works.

Mouse on the above can also view variables, but the screenshot did not cut down.

See what the Node object actually has.

Write the object name between the following places to see the content.

It’s really complicated. I can’t understand it.

Finally, I don’t need to write console.log.