title: How to debug Vue application with google chrome
body: <p>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 <a href="https://medium.com/datadriveninvestor/stopping-using-console-log-and-start-using-your-browsers-debugger-62bc893d93ff" rel="nofollow noreferrer">How to stop using console.log() and start using your browser’s debugger</a> about debugging in general (setting breakpoints, executing line by line etc.)</p>
  
  <p>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.</p>
  
  <p>All my files are combined into more complex javascript files, which I cannot debug.</p>
  
  <p><a href="https://i.stack.imgur.com/Iy9kF.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Iy9kF.png" alt="enter image description here"></a></p>
  
  <p>I then found this post:
  <a href="https://stackoverflow.com/questions/49892107/debugging-vue-component-in-chrome">Debugging .vue component in Chrome</a>
  Which I thought would shed light onto this matter, but unfortunately I don't know what to do.</p>
  
  <p>I added this:</p>
  
  <pre><code>configureWebpack: {
    devtool: 'source-map'
  },
  </code></pre>
  
  <p>To my nuxt.config.js</p>
  
  <p>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?</p>