Vue 3 Debugging with Breakpoints

So being a Vue newbie, one of the first thing I wanted to do for my Vue project is to setup the debugger, using Vue 3 and the Vue CLI specifically. I thought it would be a no-brainer, but it took me a while to get it going. While there is a good page from the official Vue website, this post is more intended for newbies to outline what I did to get debugging going.

Debugging in Chrome or Firefox

According to the official documentation, debugging in the browsers is as simple as installing the Vue DevTools extensions (or add-on) on Chrome or Firefox. Easy, right? No! At the time of writing, the Vue DevTools extensions for Vue 3 are either in beta or not available in the browser extension stores. Only the Vue DevTools for Vue 2 are available to install. However, it is not clearly documented – which caused me time trying to figure out what I did wrong.

Chrome

The Vue DevTools Chrome extension for Vue 3 is currently in beta, and can be installed here. Alternatively, do a search for Vue DevTools in the Chrome Web Store.

Either way, make sure the extension states that it is made for Vue 3.

Firefox

I use Firefox as the main web browser for debugging web apps. The obvious thing is to search for the Vue DevTools on the Mozilla add-on website, which was easy enough. However, at the time of writing, the version listed on the website is for Vue 2 only. Disappointingly, the documentation does not state that it is only for Vue 2. So the extension was never enabled after the installation.

After an hour or research and trying to figure it out, I realised that I had an incompatible extension installed. Fortunately, I found this link here that has the beta version of the Vue 3 Vue DevTools, which I downloaded and installed and all is working now.

Setup Sourcemap

One final thing I had to do was to enable source map in my Vue CLI project. This was done by creating a new vue.config.js file in my project and add the following code:

module.exports = {
  configureWebpack: {
    devtool: 'source-map',
  },
}

This enabled the source code mapping between the local source code and the scrambled output built files, allowing the Vue DevTools extension to show the source code on the browser developer tools.

Debugging in Visual Studio Code

Another way of putting breakpoints on your code is to use Visual Studio Code. The official documentation has clear instructions on how to set this up. The only thing that was not clear – for newbies like myself anyway – is that I had to create the vue.config.js file manually and enable the sourcemap just like above.