foexl-vue-debugger

Show the page component border and quickly open the vscode editor according to the page component.

important:it only works in development mode.

Your development environment must support exposeFilename options in vue-loader and dependent webpack. For more information, please see vue-loader

before install

You should configure your vscode first.

Let it support the command to run.

Follow the steps below

• Press the shortcut key ctrl+shift+p or command+shift+p in vccode

• Enter the following code

install code command in PATH

install

npm install foexl-vue-debugger -D #or yarn add foexl-vue-debugger -D

use

First you should introduce it in the following entry file. Usually in main.js

vue2.x

import Vue from "vue";
// You should set it to take effect in the development environment.
if (process.env.NODE_ENV === "development") {
  Vue.use(require("foexl-vue-debugger"));
}

vue3.x

import { createApp } from "vue";
// You should set it to take effect in the development environment.
const app = createApp(App);
if (process.env.NODE_ENV === "development") {
  app.use(require("foexl-vue-debugger"));
}

Then you should modify the vue.config.js or webpack.config.js file. add a option in devServer option to start a local service.

before: function (app) {
  const child_process = require("child_process");
  app.get("/code", function (req, res) {
    // This line code will helps us open vscode.
    child_process.exec(`code ${req.query.filePath}`);
    res.send("%c " + req.query.filePath);
  });
}

open the selected component

When you press the alt key and click the left mouse button, the component file will be opened through vscode.

Open the parent of the selected component

When you hold down the alt+ shift key and click the left mouse button, the parent of the component is opened through vscode and the nested structure of the component is output