chrome 浏览器下安装vue-devtools总结

发布时间:2024-01-08 18:00

这几天给项目浏览器安装vue-devtools, 弄了好长时间, 安装了几个tag版本 都在install 时失败, 尝试了很多办法, 最后成功了,总结分享给大家
源码编译安装

  1. 从git仓库下载vue-devtools 代码
https://github.com/vuejs/vue-devtools.git
  1. 切换到vue-devtools 目录, 执行

    yarn install
  2. 编译

    yarn build
  3. 修改vue-devtools\packages\shell-chrome 下的manifest.json 文件

     "persistent": false    // 把false 改成true
  4. 打开chrome 浏览器的扩展程序, 点击:加载已解压的的扩展程序, 从目录中选中shell-chrome
    加载成功后, 点devtools 的详情, 把允许访问文件网址等选项开启
    chrome 浏览器下安装vue-devtools总结_第1张图片

到此, 浏览器的右上角就会出现vue 绿色logo
image.png

  1. 打开项目主入口文件main.js 在其中添加
    Vue.config.devtools = true
  1. 项目中使用vue 要使用开发版本, 不能使用压缩的生产版本, 否则vue-devtools会出现如下的提示

    Devtools inspection is not available because it’s in production mode or explicitly disabled by the author.
  2. 完成成功后, 在开发者控制台模式会出现Vue tab
    chrome 浏览器下安装vue-devtools总结_第2张图片
  3. 具体怎么使用devtools 提高开发效率 ,不再讲师

ItVuer - 免责声明 - 关于我们 - 联系我们

本网站信息来源于互联网,如有侵权请联系:561261067@qq.com

桂ICP备16001015号