Vue.js debugging in Chrome and VS Code

by Kenneth Auchenberg

This recipe shows how to use the built-in JavaScript deubgger in VS Code to debug Vue.js applications generated by the Vue CLI.

If you're using Vue.js through the Nuxt.js framework, see https://codeburst.io/debugging-nuxt-js-with-visual-studio-code-724920140b8f

Getting Started

Make sure to have Google Chrome installed in its default location.
Use NPM to install vue-cli
```
npm install -g @vue/cli
```
Use Vue CLI to create a new Vue.js app.
```
vue create hello-world
```
You will be prompted to pick a preset. You can either choose the default preset which comes with a basic Babel + ESLint setup,or select "Manually select features" to pick the features you need.
Change to the newly created application directory and open VS Code.
```
cd hello-world
code .
```

Update your webpack configuration

Before you can debug your Vue components from VS Code you need to update the generated webpack config to build sourcemaps that contains more information for our debugger.

Vue CLI 3.X and above

The devtool property needs to be set inside vue.config.js. Create the file in your project's root directory if it doesn't already exist.

module.exports = {
  configureWebpack: {
    devtool: "source-map"
  }
};

Configure launch.json File

Click on the Debugging icon in the Activity Bar to bring up the Debug view. Then click on the gear icon to configure a launch.json file, selecting Chrome for the environment:
Replace content of the generated launch.json with the following configurations:

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "chrome",
      "request": "launch",
      "name": "vuejs: chrome",
      "url": "http://localhost:8080",
      "webRoot": "${workspaceFolder}",
      "breakOnLoad": true,
      "pathMapping": {
        "/_karma_webpack_": "${workspaceFolder}"
      },
      "sourceMapPathOverrides": {
        "webpack:/*": "${webRoot}/*",
        "/./*": "${webRoot}/*",
        "/src/*": "${webRoot}/*",
        "/*": "*",
        "/./~/*": "${webRoot}/node_modules/*"
      },
      "preLaunchTask": "vuejs: start"
    }
  ]
}

Add the following npm task to your tasks.json file:

{
  "version": "2.0.0",
  "tasks": [
    {
      "label": "vuejs: start",
      "type": "npm",
      "script": "serve",
      "isBackground": true
    }
  ]
}

Start Debugging

Set a breakpoint anywhere in src/components/HelloWorld.vue
Go to the Debug view, select the 'vuejs: chrome' configuration, then press F5 or click the green play button.
Your breakpoint should now be hit as the new instance of Chrome opens http://localhost:8080.

Party 🎉🔥

Other Devtools for Vue also exist in Firefox and Chrome. Devtools

Serve & Debug at once

Create a task in tasks.json as below:

{
        "label": "serve",
        "type": "npm",
        "script": "serve",
        "isBackground": true,
        "problemMatcher": [{
            "base": "$tsc-watch",
            "background": {
                "activeOnStart": true,
                "beginsPattern": "Starting development server",
                "endsPattern": "Compiled successfully"
            }
        }],
        "group": {
            "kind": "build",
            "isDefault": true
        }
    }

Amend the launch.json accordingly

...
"name": "vuejs: chrome",
"url": "http://localhost:8080",
"webRoot": "${workspaceFolder}/src",
"breakOnLoad": true,
"preLaunchTask": "serve",
...

The debugger will now run the serve task and upon successful compilation, open Chrome with the debugger.