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菜单已经出来了