vue-devtools浏览器调试工具离线安装教程

vue-devtools浏览器调试工具离线安装教程

vue-devtools浏览器调试工具离线安装是下载源码,通过本地编译之后,在放到浏览器上

这里写目录标题

  • vue-devtools浏览器调试工具离线安装教程
    • 1.下载源码
    • 2.执行安装插件包命令
      • 3.安装插件

1.下载源码

[不推荐]在github下载devtools源码,地址:https://github.com/vuejs/vue-devtools
[推荐]在gitee(码云)下载devtools源码,地址:https://gitee.com/mirrors/vue-devtools?_from=gitee_search
我这边选择是标签里的v6.5.0
vue-devtools浏览器调试工具离线安装教程_第1张图片
vue-devtools浏览器调试工具离线安装教程_第2张图片
然后直接选择压缩包下载
vue-devtools浏览器调试工具离线安装教程_第3张图片

2.执行安装插件包命令

下载之后解压文件,在当前文件目录下,执行命令:

> yarn install

安装完成之后,再执行

> yarn run build

编译完成之后,我们找到shell-chrome
vue-devtools浏览器调试工具离线安装教程_第4张图片
修改shells-chrome目录下的mainifest.json 中的persistant为true
(有时候已经是true)
vue-devtools浏览器调试工具离线安装教程_第5张图片

3.安装插件

打开谷歌浏览器,找到拓展程序
vue-devtools浏览器调试工具离线安装教程_第6张图片
打开之后,把shell-chrome拖拽到这里界面就能安装
vue-devtools浏览器调试工具离线安装教程_第7张图片
安装之后成功之后
vue-devtools浏览器调试工具离线安装教程_第8张图片
在开发中模式F12里,会多出一项Vue
vue-devtools浏览器调试工具离线安装教程_第9张图片

你可能感兴趣的:(VueJS,vue.js,javascript,前端)