|
vue-devtools是一款基于chrome游览器的插件，用于调试vue应用，这可以极大地提高我们的调试效率。接下来我们就介绍一下vue-devtools的安装。
chrome商店直接安装vue-devtools可以从chrome商店直接下载安装，非常简单，这里就不过多介绍了。不过要注意的一点就是，需要翻墙才能下载。 手动安装（参考链接：https://segmentfault.com/a/1190000009682735） 百度链接如下： 链接:https://pan.baidu.com/s/139hspAnspD7bJbo81xigmg 密码:1hsv 下载完成后，将压缩包进行解压，打开google浏览器，点击右上角的三个点，选择“更多工具”=》扩展程序，启动开发者模式，选择加载已解压的扩展程序，然后选择从解压包，注：一定要是直接包含文件，不能在套文件夹了。 到此，vue-devtools就安装好了，关闭浏览器重新后，按F12,会发现控制到有个vue的选项。 重点来了（如果使用webpack模板，可以向下看） （参考：https://blog.csdn.net/liyijun4114/article/details/73863228） 说明 ： vue+webpack调试要从webpack入手，webpack配置提供了devtool这个选项，如果设置为 ‘source-map’，在chrome浏览器中调试的时候可以显示源代码。 webpack官方给出了7个配置项供选择: 这里不同的配置有些不同的效果，比如是否保留注释、保留行信息等，具体每一条什么意思这里不详解释，有兴趣的童鞋可以参考这篇文章 官方默认的是用 ‘cheap-module-eval-source-map’ 使用方法： 1. 脚手架项目中：config => index.js => dev 对象中的 devtool 改为“source-map”，注意是dev中，不要改成build中的了。 图片：vdv.png 
2. 在要调试的代码前，写上关键字，debugger 3. 运行到加debugger的代码时，通过f12 ，选择“sources” ，可以看到程序停到了debugger处 图片：vdv2.png
4. 通过右边的控制上的，工具条，让代码一步步执行，就可以观察对应的变量变化。在根据这些来找到对应的执行情况，帮助你找到bug. 图片：vdev3.jpg |
|
最新喜欢： 814282...
|
公众号
