Debugger make the life of developers a breeze. But at the same time, if they don’t work properly, it can quickly turn into a nightmare. With a JavaScript framework like Vue.js, we have options to debug our app either through VS Code or using the DevTools provided by the web browser. In most cases, I prefer using the DevTools. If your debuggers are pointing to wrong line numbers, or file locations, you’re most likely hit by any of the following issues:

Your web browser has malfunctioned or is corrupted.

To check if that is the case, you can try running your application in a different web browser. Perhaps even try running on different ports. If you were originally running your app on Chrome, you may try Firefox. Or the opposite. Should you see the issue fixed, you may want to update your web browser to the latest edition. If not, you may follow ahead.

Source-map generated by your project is invalid

Source mapping helps you in your debugging process by creating breakpoints to the exact location (where you put the debuggers) in the converted code, which browsers would understand. However, if the source-map generated is invalid or doesn’t sync with your actual code, it might cause issues. Not only would it break the debugging process but might also lead to issues causing improper file imports in your code.

If you’re using Vue.js with vue.config.js file, you can try an alternative source-map for your dev-tool. You can also, of course, try the same if you’re using a customized webpack configuration. Under the hood, vue.config.js too relies on Webpack only. It’s worth notifying that with different source maps, you get different quality of converted code. This conversion also affects the build and re-build time required by your project.

For development / debugging purpose, you may use cheap-source-map, otherwise source-map. cheap-source-map has a slow rebuild process (if you can spare a few more seconds to your build time). The quality of code produced is also transformed, that is, it doesn’t keep the original source and you might see a bit more temporary variables floating here and there. However, it solves the issues dealt with wrong source-mapping easily. You can learn more about different source-maps on the official Webpack’s website.

Here’s how my vue.config.js looks like:

const sourceMapType = 
      process.env.NODE_ENV == 'production' 
      ? 'source-map' 
      : 'cheap-source-map';

module.exports = {
  devServer: {
    proxy: 'http://localhost:1337',
  },
  configureWebpack: {
    devtool: sourceMapType,
  },
}Code language: JavaScript (javascript)