Is it possible to debug a .vue ponent 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 acplished?
Is it possible to debug a .vue ponent 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 acplished?
Share Improve this question asked Apr 18, 2018 at 5:50 decdec 6042 gold badges10 silver badges18 bronze badges 4- 1 Orange marked source? Have you tried source maps? – Lassi Uosukainen Commented Apr 18, 2018 at 5:52
- this is great if you use VS code medium./@brockreece/… – Jacob Goh Commented Apr 18, 2018 at 5:55
- Tried the Vue.js devtools extension? – Phil Commented Apr 18, 2018 at 6:01
- @Phil: yes but I want to debug the source, the plug in does not help – dec Commented Apr 18, 2018 at 7:56
1 Answer
Reset to default 5Yes 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./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/configuration/devtool/