How to debug Vue application with google chrome

Question

I would like to step away from using console.log all the time and use the Chrome Developer Debug Tool more often. I found this nice How to stop using console.log() and start using your browser’s debugger about debugging in general (setting breakpoints, executing line by line etc.)

But when I tried to use this in real life – which means to use it in a vue (nuxt) application I am working on – I could not get it to work.

All my files are combined into more complex javascript files, which I cannot debug.

I then found this post: Debugging .vue component in Chrome Which I thought would shed light onto this matter, but unfortunately I don't know what to do.

I added this:

configureWebpack: {
  devtool: 'source-map'
},

To my nuxt.config.js

But I would not see any sourcemaps of all my .js files in the debugger. It would be nice if I could find all the js files for each vue component, for each store file, and for other utility files I wrote. I am not sure if this is even possible, but I guess there must be a way to find my Javascript code within the debugger tool to actually debug it. Or am I wrong?

Answer 1

Nuxt.js defines sourcemap in build property from nuxt.config.js file: Step 1:

 build: {
        extend (config, { isClient }) {
          // Extend only webpack config for client-bundle
          if (isClient) {
            config.devtool = '#source-map'
          }
        }
 }

Step 2: run npm command line again (nuxt will not apply code in nuxt.config.js unlike another page

npm run dev

Step 3: Open chrome , press ctrl + shift + I or press F12 to open source via : ///webpack ...

I found this in this official's url: https://nuxtjs.org/api/configuration-build#extend

Answer 2

Use below configuration in nuxt config file

    build: {
        filenames: {
          chunk: '[name].js'
        },
      extend(config, ctx) {
          const path = require('path');
          // Run ESLint on save
          if (ctx.isDev && ctx.isClient) {
            if (ctx.isDev && ctx.isClient) {
              config.devtool = '#source-map'
            }
          }
        }
}

Hope it will serve your purpose, and you can use debugger keyword into your javascript code for setting break point by your own intentionally, as well as you can set break point into browser .