VS Code debugs the Vue project

The preparatory work

1. Debugger for Chrome

Before debugging the Vue front-end project, you need to install the VS Code plugin: Debugger for Chrome

The installation process will not be repeated here.

2. Configuration lanuch. Json

Click the debug icon in the sidebar to open the debug page.

Click Add Configuragion on the debug page and the Chrome Debugger will generate.vscode/launch.json. You can add debug start parameters to this file.

{
  "version": "0.2.0"."configurations": [{"type": "chrome"."request": "launch"."name": "vuejs:launch Chrome"// The name of this configuration is displayed in the configuration selection drop-down box on the debug page."url": "http://localhost:8080", // The url that chrome opens when it automatically starts (the local debug entry for the development environment to start)."webRoot": "${workspaceFolder}", // The local directory where the static files are located (usually the project root directory)."sourceMaps": true}}]Copy the code

The Chrome Debugger needs to know where the project code is stored, so it needs to be configured with webRoot. Path.resolve (__dirname, ‘somePath’) or devServer:{contentBase: ‘somePath’}), otherwise configure it as the project root (${workspaceFolder}).

3. Configure devtool: “source-map”

The vue front-end engineering used in this example is built using @vue/ CLI 3.0. If you configure devtool to run “source-map”, you need to add the following configuration to vue.config.js in the root directory:

module.exports = {
  configureWebpack: {
    devtool: 'source-map'}}Copy the code

Debugging code

1. Run the local debugging environment

As the normal development process, enable the local debugging environment: YARN Serve.

  App running at:
  - Local:   http://localhost:8080/
  - Network: http://192.168.1.102:8080/

  Note that the development build is not optimized.
  To create a production build, run yarn build.
Copy the code

Note: The entry address of the local debugging environment: http://localhost:8080/ must be the same as the URL configured in the launch.json.

2. Debug code

In this case, I put a breakpoint in the createdHandler method in app.vue. As shown below:

Pressing F5 to start debugging will automatically open a Chrome browser and go to: http://localhost:8080/. After a while, it will stop at the breakpoint. $route = this.$route = this.$route = this.

Now it’s time to have fun debugging your code!

VS Code debug @vue/ CLI plug-in

In today’s project, I happened to need to debug the Webpack plug-in or @vue/ CLI plug-in, so I wrote it down

Add the following configuration to launch.json, as above, mark the code where the break point is needed and press F5 to debug.

  "version": "0.2.0"."configurations": [{"type": "node"."request": "launch"."name": "plugin debugger"."program": "${workspaceFolder}/node_modules\\@vue\\cli-service\\bin\\vue-cli-service.js"."args": [
        "build"."--mode"."wcm"]]}}Copy the code

VS Code debugs the Vue project