两步安装vue.js devtools调试工具

文章目录

• 安装
• • 1.下载vue.js devtools插件
  • 2.扩展程序
• 使用

安装

1.下载vue.js devtools插件

去谷歌浏览器插件下载中心，搜vue
https://www.chromefor.com/

找到如下图，点进去

点击本网站下载

有三个可选下载路线，下载中国HongKong的

2.扩展程序

打开谷歌浏览器，安装扩展程序

直接把你下载好的vue.js devtools 拖进来

上面就会显示如下图的小图标，当你开启一个vue程序时，它就会变成绿色的。

使用

打开一个vue程序
此时我们发现浏览器上边的图标自动变亮了，按F12调试，点击出vue调试界面

如下图：
它会清楚的告诉你Vue页面所在的位置，以及用到的组件，vue是数据驱动的, 这样就能看到对应数据了, 方便我们进行调试。 怎么样, 是不是感觉工作效率提高了呢！