Webpack-vue-debug-loader NPM

Install

1. install `webpack-vue-debug`

Execute the following command at the root of the project:

yarn add webpack-vue-debug -D
# or
npm install webpack-vue-debug -D

2. configure `vue.config.js`

Add the following configuration to the vue.config.js.(Note that you need to determine the environment, this configuration is only used in the development environment):

// vue.config.js
module.exports = {
  // ...other code
  chainWebpack: (config) => {
    if (process.env.NODE_ENV === 'development') {
      // add this configuration in the development environment
      const DebugPlugin = require('webpack-vue-debug-plugin');
      config.module
        .rule('vue')
        .test(/\.vue$/)
        .use('webpack-vue-debug-loader')
        .loader('webpack-vue-debug-loader')
        .end();
      config.plugin('webpack-vue-debug-plugin').use(new DebugPlugin());
    }
  },
};

3. configure device environment(Mac)

windows can ignore this step

If you use Mac and the editor is Vscode, you need to do the following:

Execute command + shift + p command in vscode, search and click shell Command: Install 'code' command in Path:
If the following popup window appears, your configuration is successful:
If the editor doesn't open automatically when you click on a page element with the plugin enabled, it could be because of system permissions or other issues that prevent the plugin from reading the programs currently running on your computer. Please add a file named .env.local to your project root directory, the contents of the file are as follows:
```
# editor

VUE_EDITOR=code
```

Use and effect

As shown in the figure below, click the floating window with V mark in the page. When it turns green, it means that the function is turned on. (click again to turn off the function)

When the function is turned on, the information will appear when the mouse moves to the page element. Click the element, it will open vscode and jump to the source code of element.

npm.io