Set a breakpoint in src/components/HelloWorld.vue on line 90 where the data function returns a string. If you use Vue CLI 3, set or update the devtool property inside : module. If you use Vue CLI 2, set or update the devtool property inside config/index.js: devtool : 'source-map' , This ensures that you can debug an application even after your assets have been optimized by Webpack.

We do this so that our debugger has a way to map the code within a compressed file back to its position in the original file. Displaying Source Code in the Browserīefore you can debug your Vue components from VS Code, you need to update the generated Webpack config to build sourcemaps. Change into the newly created application directory and open VS Code. Install and create a project with the vue-cli, following the instructions in the Vue CLI Guide. Make sure you have VS Code and the browser of your choice installed, and the latest version of the corresponding Debugger extension installed and enabled: If you know how to setup VS Code debugging with other browsers, please consider sharing your insights (see bottom of the page).

Note: This recipe covers Chrome and Firefox.

This recipe shows how to debug Vue CLI applications in VS Code as they run in the browser. In this recipe, we explore a few workflows for VS Code users who would like to debug their application in the browser. Every application reaches a point where it’s necessary to understand failures, small to large.

Visual studio code javascript browser