Skip to content
Branch: master
Find file History
mika76 Updated readme with info gathered from issues
Specifically #201 (comment)

Also warning removed since that issue was resolved as a babel issue...
Latest commit 2737884 May 21, 2019

README.md

Vue.js debugging in Chrome and VS Code

by Kenneth Auchenberg

This recipe shows how to use the Debugger for Chrome extension with 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. Make sure to the latest version of Debugger for Chrome extension installed in VS Code.

  3. Use NPM to install vue-cli

    npm install -g vue-cli
    
  4. Use Vue CLI to create a new Vue.js app.

    vue init webpack vuejs-webpack-project
    
  5. Change to the newly created application directory and open VS Code.

    cd vuejs-webpack-project
    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 2.X

  • Go to config/index.js and find the devtool property. Update it to:
devtool: 'source-map',

Make sure you updated both your build and dev configuration!

Vue CLI 3.X

  • 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. Update the generated launch.json's configurations to include the "vuejs: chrome" configuration as seen below:

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

Start Debugging

  1. Set a breakpoint in src/components/HelloWorld.vue on line 90 where the data function returns a string.

breakpoint-renderer

  1. Open your favorite terminal at the root folder and serve the app using Vue CLI:
npm start
  1. Go to the Debug view, select the 'vuejs: chrome' configuration, then press F5 or click the green play button.

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

breakpoint-renderer

  1. Party 🎉🔥
You can’t perform that action at this time.