Vue-dev-tools installation tread hole

Vue-dev-tools is a tool that makes it easy to debug our vue projects in the browser. Today, I summarized the bugs I encountered during the installation process and how to fix them.

why

On Baidu, we can search for many versions of dev-Tools, but the popularity of Vue3 now makes the old version seem a little unsupported. To make debugging tools available to your VUE3 project, you need to install the latest version of dev-Tools. (PS: This is also a pitfall where you write vue3 code and find that dev-Tools doesn’t work, and you don’t know why, and you need to install the latest version.)

download

As programmers, we must go to Github to download the latest version.

vue-dev-tools

Here there will be a lot of versions, there is a pit, the need to download the latest stable version, the development version of the last is not successful installation.

The latest development version I have here is the following version

The stable version is as follows

Be sure to download the latest version

The installation

Download and unzip

As a rule of thumb, our first thought would be to drag this folder into Chrome

But here’s the problem. Just drag it in to report an error

what? Missing files or unable to load? I downloaded it from the official website.

Together baidu later found that the code needed to install the library and build

CD devTools-5.3.4 YARN or NPM install YARN build or NPM run buildCopy the code

Added: ak47 schematic item and loot added: this item will be added when the developer build is not installed.

The next step is to drag the built folder into the browser

The corresponding file is as follows, we can find it by ourselves, I saw that the file said here is different from mine, it may be the version problem, but it is still very easy to recognize through the file name.

The ~ installation is complete