vue - devtools 安装

vue是现在比较火的一个框架，加上去年vue3的发布，更推动了vue一个层级

vue开发项目，自然少不了他的调试工具 vue-devtools ,这个非常好用，对vue开发者来说，这简直是福音，下面我们一起来看一下他的安装使用吧。

• 方式一：通过 Chrome 应用商店安装

  • 简单方便

  • 但是需要梯子

• 方式二：通过离线安装包安装

  • 稍微麻烦一点

• 方式三：下载源码编译安装

通过 Chrome 应用商店安装

• 打开 Chrome 应用商店：chrome.google.com/webstore/ca…
• 搜索 vue-devtools
• 安装

通过离线安装包安装

1、安装vue-devtools 在本地文件夹中建个Vue的目录，然后使用Git下载vue-devtools工具。命令如下

bash

代码解读

复制代码

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

2、在vue-devtools目录中安装依赖包

bash

代码解读

复制代码

cd vue-devtools cnpm install

3、修改packages

• 文件夹中的shell文件→Chrome→manifest.json文件，把"persistent":false改成true
• 把manifest.json中的"persistent":false改成true。保存

4、chrome

• 然后用谷歌添加扩展程序，更多工具→扩展工具。点开就能看到

• 找到vue-devtools中的Chrome目录，选择就行。

• 上面这个提示显示我们的路径不对，所以我们找回刚刚的那个manifest.json的文件。作者看了js的文件应该没什么问题，就是启动的main里面没配置

• 找到 vue-devtools 在 Chrome 应用商店的扩展 ID：nhdogjmejiglipccpnnnanhbledajbpd

• 打开离线下载 Chrome 扩展的工具网站：chrome-extension-downloader.com/

• 加压下载好的离线安装包

• 打开扩展程序面板

• 启用开发者模式

• 加载已解压的扩展程序

 生产环境开启 vue-devtools

因为在没有手动修改devtools/build设置的情况下，当npm run build执行时，vue项目环境默认配置如下

js代码解读

process.env.NODE_ENV === 'production' Vue.config.devtools = false

导致很多使用vue框架开发的项目生产环境无法使用调试工具进行调试。自研项目可以手动开启生产环境的devtools，参考 vue-devtools

js代码解读

// 该配置需要放在import之后，new Vue执行之前才能生效 Vue.config.devtools = true

如何在不修改代码并重新打包发布的情况下开启vue-devtools呢？

1. 打开需要开启开发工具的网站，并进入F12开发者模式
2. 选择源码/Sources选项卡，找到当前项目的基础库所在的js文件，一般名称以app.开头，使用浏览器格式化工具，进行代码格式化
3. ctrl + f全局搜索$mount或.config.productionTip，如果都找不到，就直接从new开始搜，一个一个查，直到找到真正的vue实例初始化入口
4. 在new关键字所在的那一行打断点，并f5刷新进入该断点，拿到vue原型的配置对象
5. 在控制台中将该值设为true
6. 取消断点，关闭F12/开发者调试面板，再次打开F12即可看到vue菜单已经出来了