当前位置: 首页 > Web前端 > HTML

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

时间:2023-03-28 12:23:15 HTML

这几天给项目浏览器安装了vue-devtools。我花了很长时间安装了几个tag版本,但都安装失败。我尝试了很多方法,终于成功了,总结分享给大家源码编译安装从git仓库下载vue-devtools代码https://github.com/vuejs/vue-devtools.git切换到vue-devtools目录,执行yarninstall编译yarn构建并修改vue-devtools\packages\shell-chrome下的manifest.json文件"persistent":false//将false改为true打开chrome浏览器扩展,点击:加载解压后的扩展,从中选择shell-chromedirectory并加载成功,点开devtools的details,至此开启允许访问文件URL等选项,此时浏览器右上角会出现一个vue绿色的logo。打开项目主入口文件main.js,添加Vue.config.devtools=true,在项目中使用vue要使用开发版,不能使用压缩生产版,否则vue-devtools会显示如下提示Devtools检查不可用,因为它处于生产模式或被作者明确禁用。成功完成后,开发者控制台模式会出现Vue选项卡具体如何使用devtools提高开发效率,不再讲师