vue-devtools插件最简单的安装方式,不需要安装npm环境

1、下载 vue-devtools插件

网址:https://chrome.zzzmh.cn/info?token=nhdogjmejiglipccpnnnanhbledajbpd

2、在chrome浏览器中打开扩展程序页面,并打开开发者模式

可以在地址栏输入:chrome://extensions/
vue-devtools插件最简单的安装方式,不需要安装npm环境_第1张图片

3、将下载好的带crx后缀的文件,直接拖到页面里

vue-devtools插件最简单的安装方式,不需要安装npm环境_第2张图片
安装成功后会出现下图中的vue插件
vue-devtools插件最简单的安装方式,不需要安装npm环境_第3张图片
注:这一步可能会出现crx文件无法安装的情况,可以试一下下面的解决方法
1.将 crx 文件后缀改为 zip 然后解压出来。
2.在chrome插件页面中点击
vue-devtools插件最简单的安装方式,不需要安装npm环境_第4张图片
3.选中刚刚解压出来的文件夹

4、点击详细信息,将下图中的选项都打开

vue-devtools插件最简单的安装方式,不需要安装npm环境_第5张图片

5、打开网站查看vue-devtools是否可以正常使用

vue-devtools插件最简单的安装方式,不需要安装npm环境_第6张图片

#可能会遇到的问题

1、插件安装完成后,在F12中没有看到vue的标签
解决方法:
1.首先看一下项目中引入的是不是vue.min.js,必须引入vue.js才能使用vue-devtools
2.chrome浏览器中输入chrome://version/,在我的电脑中打开下图中的路径vue-devtools插件最简单的安装方式,不需要安装npm环境_第7张图片
2.1定位到文件夹以后,打开插件列表查看vue-devtools的id,并进行搜索
vue-devtools插件最简单的安装方式,不需要安装npm环境_第8张图片
在这里插入图片描述
2.2搜到以后用编辑工具打开下图的文件
vue-devtools插件最简单的安装方式,不需要安装npm环境_第9张图片
2.3下图中的位置改为truevue-devtools插件最简单的安装方式,不需要安装npm环境_第10张图片

你可能感兴趣的:(vue)