💻Visual Studio Code — Debugging Vue.js

Photo by Kevin Ku on Unsplash

Debugging Vue.JS applications using Chrome’s developer tools is easy enough yet uncomfortable.

Is there a way to debug Vue.JS using Visual Studio Code?

Fortunately enough, there is! 🐞

Prerequisites

Before you begin, you need the following:

1. Visual Studio Code
2. Debugger for Chrome extension which you can get from Visual Studio market place

Setting it up

After installing the “Debugger for Chrome” extension, Open Visual Studio Code and follow the next steps.

Debugger for Chrome

1. Press the “Bug” 🐞 Icon at the sidebar menu to open “Debugger for Chrome”
2. Press the “Configuration” ⚙️ icon at the top menu which will open the launch.json file and at the following configuration:

launch.json

Please note: set the URL and port according to your project configuration

Now, debugging is possible, however, breakpoints in the source code will be ignored. You will need to add it during runtime just the same as it is done using Chrome developer tools. To fix it, follow the next step.

Webpack source-map

In order for the debugger to be able to link the file in the ./src directory to the file in the Webpack directory during runtime, you need to enable source-map in vue.config.js like so:

vue.config.js

Please note: if vue.config.js does not exist in your project root directory, you must create it. Kudos to Stackoverflow thread for pointing that out.

Debugging

Now you are all set!

1. Launch your Vue.js application in your preferred fashion. Either manually:

npm start serve

Or directly from Visual Studio Code.

2. In the “Debugger for Chrome” window, Press the “Play” ▶️ icon

Debugger For Chrome window

• A new Chrome window attached to the Visual Studio Code debugger will be launched
• The console output will appear in the lower DEBUG CONSOLE tab
• You can now safely put breakpoints and debug it from Visual Studio Code

Old school style! 👊🏽

Final thoughts

If you find an easier or better way to debug, please share 🙏🏼