在Chrome中调试.vue组件 [英] Debugging .vue component in Chrome
问题描述
是否可以在Chrome中调试.vue组件。
到目前为止，我只得到橙色标记的来源，铬没有记录调试，即我无法检查变量等。
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.
如何实现？
推荐答案
当然可以。
首先，您需要确保使用Vue.js的非缩小/非生产版本您可以通过在控制台输出中查看开发工具来验证这一点。如果您的Vue版本是允许进行debuging的开发版本，您应该在控制台中看到以下消息。
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.
其次你需要安装Vue.js Devtools插件in。
Secondly you need to install Vue.js Devtools plug in.
https://chrome.google.com/webstore/detail/vuejs-devtools/nhdogjmejiglipccpnnnanhbledajbpd?hl=en
注意：如果你是不使用Web服务器，只是在浏览器file：//somefile.htm中加载本地文件，您需要进入chrome扩展和插件设置并允许插件访问文件URL的权限
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"
第三，你可以打开源地图根据你的设置，有不同的方法可以解决这个问题。如果你的项目刚刚使用CLI设置，那么找到你的 config / index.js 文件并制作 dev-tool 属性设置为 devtool：'source-map'
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'
如果您使用的是Webpack或Laravel mix，则可以使用Webpack配置文件中的 .sourceMaps（）方法启用源映射。也可能需要进行其他更改。 https://webpack.js.org/configuration/devtool/
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/
这篇关于在Chrome中调试.vue组件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
