Hello, I am Cangcang Liangliang, a front-end developer. At present, I am publishing some interesting and knowledge about front-end learning on Nuggets, Zhihu and my personal blog. Welcome to follow me.

When writing Vue projects, have you ever encountered the embarrassment of not being able to find a corresponding interface file after taking over someone else’s project?

Have you ever written so many modules after a project that when you change an interface you can’t find the corresponding files for that module (even if you wrote them yourself)?

Sometimes it takes a minute to find the corresponding file for a module, but after reading this article you will learn to click on the corresponding element on the page and open its corresponding Vue file in the editor with one click.

We usually use the browser’s Console for debugging, but the DOM tree presented in the Console is already compiled, and you can’t tell which file the DOM element is in the Vue project. You can only guess, or look up the interface route, but there are more convenient ways. That is the vue.js devTools tool.

So without further ado, let’s take a look at how vue.js devTools should be used:

1. Install

As a qualified programmer, you can go to the outside world, so directly search for Vue. Js DevTools in the Chrome App Store.

There are two. The following beta is for Vue3. X project and the above beta is for Vue2

After the installation is complete, start the Vue project directly, open the console, and see the following two Vues (there may be only one of course) :

One is Vue3 and the other is Vue2. Click on both. If you see a DOM element, that’s the tool:

Of course, this is directly through the Vue scaffolding (Vue create XXX) project, that is, the use of the official webpack configuration, I believe many friends hands of the project may be through the Vue init webpack XXX old project, It directly exposes all webPack configurations (don’t do this if you are a small team and don’t have webPack configuration expertise! Because once a project is created this way, the WebPack configuration has to be manually updated, whereas vue create XXX officially updates the Webpack configuration.

If you are building a project using vue init webpack XXX, you may not see the title bar on the console. You need to force the vue. Js devTools tool to open.

// Add the following code before new Vue
Vue.config.devtools = process.env.NODE_ENV === 'development'

// Add the following code after new Vue
window.__VUE_DEVTOOLS_GLOBAL_HOOK__.Vue = app.constructor

// Add the following code to the vuex. /store.js entry file
Vue.config.devtools = process.env.NODE_ENV === 'development'
Copy the code

Then open the extension Settings inside the allowed access file URL:

Finally, go to the project page and refresh several times and try to open the console several times, and you should see the Vue menu.

2. Use

The method is very simple, just as we normally use Chrome developer tools to select DOM elements, vue.js DevTools also has a way to select elements:

As you can see, the element selected by vue.js devTools points directly to the name of the component in which the element is located:
, then look for the appropriate module in the project.

3. Go to the corresponding file

Although the above method can directly find the component name, it is not very easy to find the corresponding file when the project is large and many components, so vue.js devTools also provides a function:

When a component is selected, there is an Open in Editor option

Click it to open the corresponding file directly in the editor.

But! A project created using vue init webpack XXX may not respond to a click, just output a paragraph in the console, so you need to install:

npm install launch-editor-middleware -d
Copy the code

Then edit the webpack.dev.conf.js file:

// Import the launch-editor-middleware package
const openInEditor = require('launch-editor-middleware')

devServer: {... before (app) {/** * Open Visual Studio Code * Code is the name of the environment variable configured in the system, which must be configured in the editor * note that webStorm is usually filled with webStorm64 */
    app.use('/__open-in-editor', openInEditor('code'))}}Copy the code

Restart the project and you can have fun writing code.

4. The last

It is not recommended to use vue init webPack XXX as the webPack configuration of your project will not be updated with the official release of the new package. If the project was created using this method a long time ago, some convenient features will have to be manually configured.

Vue. Js DevTools can also monitor vuex state changes, view component properties, etc. It is a powerful tool for developing Vue projects!

The more time you spend coding, the more time you have to learn new things, and the better you learn new things, the better you can jump ship and raise your salary!