Debugging .vue component in Chrome

Question

Is it possible to debug a .vue component in Chrome. So far I only get orange marked source that chrome does not recordnize for debugging i.e. I can't inspect variables etc.

How can this be accomplished?

Answer 1

Yes of course it is possible.

---

First you need to make sure you are using a non-minified / non-production version of Vue.js You can verify this by looking in development tools at the console output. If your Vue version is a development version allowing for debuging you should see the following message in the console.

You are running Vue in development mode.
Make sure to turn on production mode when deploying for production.

---

Secondly you need to install Vue.js Devtools plug in.

https://chrome.google.com/webstore/detail/vuejs-devtools/nhdogjmejiglipccpnnnanhbledajbpd?hl=en

Note: if you are not using a web server, but simply loading local files in the browser "file://somefile.htm" you need to go into the chrome extention and in the plug-in settings and allow the plug-in "Permission to access file URLs"

---

Third, you can turn on "source map" Depending on your setup there are different ways to go about this. If your project is just set up using the CLI then find your config/index.js file and make the dev-tool property is set to devtool: 'source-map'

If you are using Webpack or Laravel mix you can enable source maps with the .sourceMaps() method in the Webpack config file. Other changes may be necessary as well. https://webpack.js.org/configuration/devtool/