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?