1. Introduction

Hi, I’m Wakawa. Welcome to add my wechat ruochuan12 and follow my public account Ruochuanvision for long-term communication and learning. Recently, a source code co-reading was organized. Read about 200 lines of source code per week. Many first time to read the source code friends feel very harvest, interested can add my wechat Ruochuan12, pull you into the group to learn.

The first week read: 99% of people don’t know that Vue-devtools can open the corresponding component file directly? This paper reveals the principle. Even though I’ve written about it, I’m sure some of you still don’t know this feature.

The project in this article uses VUe3, so vue-devtools corresponding to vuE3 need to be installed.

But a lot of people don’t have access to the Google Marketplace. Some people say it’s not the Google App Store. But it is often this step that stops a lot of users, but also has a lot of business opportunities. For example, a variety of plug-in websites have emerged. So I wrote an article about how I packaged and installed devTools plugins.

A friendly reminder. The article is relatively simple. Some people might say, well, that’s an article. In fact, a lot of people don’t know how to pack. Writing is also a reminder to read the official documentation and github README.

2. Package plug-ins and install them

When I opened github Vue-devtools, I found that the name had been changed. Before it was called Vue-devtools, it was now called Devtools.

2.1 Package vuE3 vue-devtools

Check out the official README: Vue-devtools Contributing

git clone https://github.com/vuejs/devtools.git
cd devtools
# NPM I yarn -g if yarn is not installed
# Install dependencies
yarn install
# building
yarn build
Copy the code

Devtools /packages/ shell-Chrome/directory

2.2 Packing VuE-devTools corresponding to VUE2

Check out official README: vue2 devtools reamde.md

# You can copy the project cloned above
Replication under terminal or manual replication
cp -rf devtools devtools-v2
cd devtools-v2
# After the replication is successful, switch the branch tag to V5.3.4, which is the devTools corresponding to vuE2.Git checkout v5.3.4# remove node_modules
rm -rf node_modules
# Install dependencies
yarn install
# building
yarn build
Copy the code

Similarly, devtools-v2/packages/ shell-Chrome/directory is available after a successful build.

2.3 installation

// Extensions/open developer mode and load the devtools-v2/packages/ shell-Chrome/folder. Plug-ins for vuE2 and VUE3 can coexist.

After the installation, can be happy debugging, incidentally can view the details of the plug-in. The current version of VUE3 is 6.0.0-beta-15. Vue2 corresponds to 5.3.4. In the details, access to the file url is allowed. This function is enabled by default. You are advised to enable this function.

3. Summary

This is a relatively short post, so if you have new colleagues who are still struggling to install devTools, share this post with them.

Hint: Get in the habit of checking official documents or github README. For good open source projects, readMes are generally very well written. In addition to any new functions, generally in the official document or README will be reflected. Although README is usually in English and will be blocked by some people, if you really don’t understand it, you can also use translation tools such as Google Translate.

about

Author: often with the name of Ruochuan mixed in rivers and lakes. The front road lovers | | PPT know little, only good study. Wakawa’s segmentfault blog has opened the front view column, welcome to follow the front view column ~ nugget column, welcome to follow the front view column ~ zhihu front view column, welcome to follow the front view column ~ github blog, find a star^_^~