vue - devtools 安装
devtool: 'source-map'
持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第18天，点击查看活动详情
vue是现在比较火的一个框架，加上去年vue3的发布，更推动了vue一个层级
vue开发项目，自然少不了他的调试工具 vue-devtools ,这个非常好用，对vue开发者来说，这简直是福音，下面我们一起来看一下他的安装使用吧。
-
方式一：通过 Chrome 应用商店安装
-
简单方便
-
但是需要梯子
-
-
方式二：通过离线安装包安装
- 稍微麻烦一点
-
方式三：下载源码编译安装
通过 Chrome 应用商店安装
- 打开 Chrome 应用商店：chrome.google.com/webstore/ca…
- 搜索 vue-devtools
- 安装
通过离线安装包安装
1、安装vue-devtools 在本地文件夹中建个Vue的目录，然后使用Git下载vue-devtools工具。命令如下
git clone https://github.com/vuejs/vue-devtools
复制代码2、在vue-devtools目录中安装依赖包
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项目环境默认配置如下
process.env.NODE_ENV === 'production'
Vue.config.devtools = false
复制代码导致很多使用vue框架开发的项目生产环境无法使用调试工具进行调试。自研项目可以手动开启生产环境的devtools，参考 vue-devtools
// 该配置需要放在import之后，new Vue执行之前才能生效
Vue.config.devtools = true
复制代码如何在不修改代码并重新打包发布的情况下开启vue-devtools呢？
- 打开需要开启开发工具的网站，并进入F12开发者模式
- 选择源码/Sources选项卡，找到当前项目的基础库所在的js文件，一般名称以app.开头，使用浏览器格式化工具，进行代码格式化
- ctrl + f全局搜索$mount或.config.productionTip，如果都找不到，就直接从new开始搜，一个一个查，直到找到真正的vue实例初始化入口
- 在new关键字所在的那一行打断点，并f5刷新进入该断点，拿到vue原型的配置对象
- 在控制台中将该值设为true
- 取消断点，关闭F12/开发者调试面板，再次打开F12即可看到vue菜单已经出来了
