Skip to content

Latest commit

 

History

History
153 lines (116 loc) · 3.94 KB

README.md

File metadata and controls

153 lines (116 loc) · 3.94 KB

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

  1. Make sure to have Google Chrome installed in its default location.

  2. Use NPM to install vue-cli

    npm install -g @vue/cli

  3. 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.

  4. 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

  1. 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:

    config_add

  2. 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

  1. Set a breakpoint anywhere in src/components/HelloWorld.vue

  2. Go to the Debug view, select the 'vuejs: chrome' configuration, then press F5 or click the green play button.

  3. Your breakpoint should now be hit as the new instance of Chrome opens http://localhost:8080.

breakpoint-renderer

  1. Party 🎉🔥
  • Other Devtools for Vue also exist in Firefox and Chrome. Devtools

Serve & Debug at once

  1. 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
        }
    }
  1. 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.