vue devtools插件 附使用教程

vue devtools插件是Chrome谷歌浏览器常用的一款适用于调试Vue.js应用程序的插件，当开发者开发完成vue项目后，可以直接通过谷歌浏览器中的vue devtools插件进行解析和调试，可以极大提升开发者开发vue的效率，为了方便大家的安装和使用，小编为大家制作了详细的vue devtools插件安装和使用教程。

vue devtools安装教程

一、谷歌安装

1、下载本站为您提供的vue devtools插件安装文件，然后打开Chrome谷歌浏览器，点击右上角的三点按钮，进入设置界面

2、点击扩展程序按钮，进入扩展程序界面

3、直接将vue devtools插件拖拽至扩展程序界面，弹出扩展功能安装提示信息，点击继续按钮

4、这时Chrome谷歌浏览器右上角出现了插件的图标，通过webstrom打开vue项目后，图标变亮，但是报错，控制台没有出现vue调试，原因是用了生产环境的版本或是压缩的vue版本，或是没有勾选：允许访问文件网址

5、进入设置，Vue.js devtools4.1.4devtools的详情信息，勾选允许访问文件网址

6、修改vue的引入源码

7、刷新页面，按下f12，vue控制台出现，安装成功

二、火狐安装

安装web-ext

npm install --global web-ext

然后编译运行firefox浏览器

npm run build

npm run run:firefox

上述指令会打开firefox浏览器，你便可在打开的窗口运行调试vue应用了。

三、如果你希望在所有浏览器中使用vue-devtools，那可以按如下步骤安装

安装工具

// 全局安装，也可本地安装

npm install -g @vue/devtools

运行

vue-devtools // 适用于全局安装

该指令会打开一个窗口，如下所示

如果你想在电脑浏览器调试，则在vue应用的最顶部加上

如果你想在移动端浏览器调试，则在vue应用的最顶部加上

vue devtools使用说明

打开这个vue后，依次按照下面图文说明进行