关于chrome:chrome-浏览器下安装vuedevtools总结

7次阅读

共计 618 个字符,预计需要花费 2 分钟才能阅读完成。

这几天给我的项目浏览器装置 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 的详情,把容许拜访文件网址等选项开启

到此,浏览器的右上角就会呈现 vue 绿色 logo

  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
  3. 具体怎么应用 devtools 进步开发效率,不再讲师

正文完
 0