在这里插入图片描述

谷歌浏览器Vue devtools安装教程

第一步:在github上下载工具,网址:

https://github.com/vuejs/vue-devtools

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-8KSH6AR3-1572073311781)(F:\CSDN发布记录\56 谷歌浏览器Vue devtools安装教程\1.jpg)]

第二步:安装工具依赖(使用npm安装)

在vue-devtools-dev文件夹(下载的文件根目录)下,打开命令提示行或在文件夹下shift+鼠标右键打开powershell;

输入命令npm install 安装依赖,命令默认去找package.json中所需的依赖安装;

在这里插入图片描述

未安装依赖前:

在这里插入图片描述

安装依赖后会多一个文件夹node_modules;

在这里插入图片描述

第三步:修改manifest.json文件

在这里插入图片描述

  • 将代码中 “persistent”:false改成true,并保存文件

在这里插入图片描述

第四步.安装完成后同在该目录下(文件所在的目录)

在这里插入图片描述

shift+鼠标右键进入当前目录打开powershell
输入npm run build

在这里插入图片描述

第五步:在谷歌浏览器地址栏中输入

chrome://extensions/

在这里插入图片描述

在这里插入图片描述

选择工具包下的shells>chrome文件夹(建议将文件放到安全地磁盘,路径或文件损坏会导致工具无法使用)

在这里插入图片描述

在这里插入图片描述

第六步:测试工具

—>重启浏览器

—>进入开发者工具

—>在调试工具栏选择vue

—>出现下图,表示安装成功(数据不必在意);但页面没有vue数据时,不会显示插件

打开vue项目, 打开f12, 选择vue就可以使用了.

vue是数据驱动的, 这样就能看到对应数据了, 方便我们进行调试 ：

在这里插入图片描述

Logo
Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^

avatar Vue
cover

echarts堆叠柱状图

avatar Vue

Vue里echarts根据页面大小动态调整/自适应

Vue里echarts根据页面大小动态调整/自适应

avatar Vue