Foreword:
Chrome’s developer tools can be said to be very powerful, and a great tool for web developers. As I personally, I usually use it very often. I believe everyone is also very common, but we should not just stop at clicking Look at the elements at the level of style, and use its more powerful functions. For example, the devtools debugging tool mentioned in this issue is one of the powerful manifestations.
I believe that the front-end big guys who have used vue development have used the vue-devtools debugging tool, which can help you quickly lock the data stream at which step an error occurs. The following describes how to import and use.
first step
First download an official devtools file. Official file address However, downloading the official devtools file requires downloading dependencies and compiling, which requires a lot of operations. You can directly spend a few points to download the files I processed, and install the file addresses
directly and import them directly. Some friends may not have csdn points, you can go directly to my github to download, the point- free installation file address (the friends who download through this address give a little ✨ encouragement)
Second step
If the download is the second or third, it is assumed that the second file is downloaded. After downloading the file, open the browser and click on the upper left corner. As shown in the figure:
Click on the three dots in the upper left corner of the browser to find more tools-click on the extension.
Click on the extension and look like this: (when there is no such thing, see if the developer mode on the right is turned on)
Then click on Load to unzip Click to load the unzipped extension.
Find the downloaded file, click to select the chrome file and click to select (this is the interface of mac, if it is win, it is slightly different, and it is generally the same).
Then you can see that the devtools debugging tool has been installed.
Then restart the browser, open the F12 debugging mode, you can find that the browser has this thing: (provided that the local Vue project is running, the online project is not available)
At this time, on the left you can find the components you wrote on the page , And on the right, you can see the data in the state of the component following the changes of your different operations, allowing you to grasp the whereabouts and dynamics of the data flow, especially suitable for inexplicable data loss or abnormal bug finding.
This article purely shares the resources of the devtools debugging tool. I hope you can click a little star to support it. Later, I will share more dry goods to everyone.