Vue生产环境调试的方法步骤

目录
  • 前言
  • 原理
  • 方法步骤
  • 代码
  • 缺点
  • 长期解决方法
  • 总结

前言

vue 生产环境默认是无法启用vue devtools的，如果生产应用出了问题，就很难解决。用本文提供的方法就可以实现线上debug vue，也不需要在浏览器上打断点。

原理

先说下vue如何判断devtools是否可用的。

vue devtools扩展组件会在window全局注入__VUE_DEVTOOLS_GLOBAL_HOOK__变量，Vue就是根据这个变量判断是否需要调试的。

vue根实例初始化之前判断Vue.config.devtools是否为true。若为true，

则调用window.__VUE_DEVTOOLS_GLOBAL_HOOK__.emit('init', Vue)方法初始化调试面板。

本方法的原理都写在代码的注释当中

方法步骤

1.复制下面的js代码，按F12 粘贴到控制台执行

2.关闭控制台，再打开控制台 就能看到Vue面板了

代码

function openVueTool(){
//在方法中执行，避免污染全局变量
//开启vue2 production调试的方法

//1.找vue实例，可以说99%的应用是用的app.__vue__
//如果实在找不到,那么就到找到任意组件，用组件元素.__vue__.$root来获取
var vue = app.__vue__

//2.vue构造函数
var constructor = vue.__proto__.constructor

//3.Vue有多级，要找到最顶级的
var Vue = constructor;
while(Vue.super){
    Vue = Vue.super
}
console.log(Vue)

//4.找到config，并且把devtools设置成true
Vue.config.devtools = true;

//5.注册到Vue DevTool上
var hook = window.__VUE_DEVTOOLS_GLOBAL_HOOK__
hook.emit('init',Vue)

//6.如果有vuex store，也注册//这部分代码参考了https://blog.csdn.net/weixin_34352449/article/details/91466542
if(vue.$store){
    var store = vue.$store;
    store._devtoolHook = hook;
    hook.emit('vuex:init', store);
    hook.on('vuex:travel-to-state',function(targetState){
        store.replaceState(targetState);
    });
    store.subscribe(function(mutation, state){
        hook.emit('vuex:mutation', mutation, state);
    });
}

}

openVueTool();

缺点

这个方法只是对当前标签页有效，就是说，如果你不小心（出于习惯）刷新了一下页面，或者有新标签页打开其他路由的需求，就需要重新走一遍上面的步骤。

长期解决方法

在浏览器安装Tampermonkey插件，推荐用edge浏览器

安装后点开插件的管理面板，新建一个脚本 粘贴下面的代码

总结

到此这篇关于Vue生产环境调试的文章就介绍到这了,更多相关Vue生产环境调试内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • 基于Vue生产环境部署详解

    前面的话 开发时,Vue 会提供很多警告来帮助解决常见的错误与陷阱.生产时,这些警告语句却没有用,反而会增加载荷量.再次,有些警告检查有小的运行时开销,生产环境模式下是可以避免的.本文将详细介绍Vue生产环境部署 生产环境 如果用 Vue 完整独立版本 (直接用 <script> 元素引入 Vue),生产时应该用精简版本 (vue.min.js) 如果用 Webpack 或 Browserify 类似的打包工具时,生产状态会在 Vue 源码中由 process.env.NODE_ENV 决定,

  • 详解Vue前端生产环境发布配置实战篇

    前言 首先这篇文章是写给Vue新手的,老司机基本不用看了. 当我们刚接触vue的时候,特别是对于第一次用前端框架的同学来说,心情可以说是比较激动的,框架带来的种种新体验,是以前jQuery无法给你的兴奋和满足感.但是在体验了几个demo的新鲜感之后,我们就要考虑如何把框架结合到我们实际的开发中如何应用的问题了. 下面我主要总结三个和生产发布相关的问题:资源文件发布文件夹配置,图片文件的引用,以及后台接口调试方法. 一,资源文件发布配置 一般项目都是用vue-cli脚手架搭建项目,然后编写自己的代

  • Vue生产环境调试的方法步骤

    Vue生产环境调试的方法步骤

    目录 前言 原理 方法步骤 代码 缺点 长期解决方法 总结 前言 vue 生产环境默认是无法启用vue devtools的,如果生产应用出了问题,就很难解决.用本文提供的方法就可以实现线上debug vue,也不需要在浏览器上打断点. 原理 先说下vue如何判断devtools是否可用的. vue devtools扩展组件会在window全局注入__VUE_DEVTOOLS_GLOBAL_HOOK__变量,Vue就是根据这个变量判断是否需要调试的. vue根实例初始化之前判断Vue.config

  • Node.js+Vue脚手架环境搭建的方法步骤

    Node.js的下载 node下载地址:https://nodejs.org/zh-cn/download/ 下载后安装即可.新版Node.js自带npm包管理器 # 查看node的版本 node -v # v12.16.1 # 查看npm版本 npm -v #6.13.4 第一个Node.js程序,新建helloworld.js文件,内容如下 console.log("Hello World") console.log("第一个Node.js程序!") 进入终端

  • vs2022 qt环境搭建调试的方法步骤

    vs2022 qt环境搭建调试的方法步骤

    建议:先安装qt再安装vs! 1.安装qt6,如下图,勾选msvc2019即可,其它自行决定,剩下安装自动的: 2.vs2022安装没什么说的,因为已经是模块化安装了,如下图,这是最少勾选的了: 3.安装qt vs tools插件,vs扩展,扩展管理,搜索qt即可,然后安装,重启vs后生效. 4.一般会自动识别出,如果没有手动,在扩展中的qt versions中指定qt的路径,必须指定到qt安装目录下的,mscv2019_64文件夹. 5.新建项目,直接有qt项目菜单 ,按顺序下一步,下一步即可

  • Vue多环境代理配置方法思路详解

    背景: 多人协作模式下,修改代理比较麻烦,而且很容易某个开发人员会修改了vue.config.js文件后提交了. 第一,很容易引起冲突. 第二,很容易出现代理错误,需要排查.而且现在微服务盛行,在生产环境下有网关配置,不会出错,但是在本地调试会造成麻烦,如修改了代理地址需要同步修改代理中的地址,很麻烦也很容易出错. 解决思路: 1.开发中定义常量js文件,例如constants.js.用户存放各个服务需要代理的服务名. let api = "" let loginServer = &q

  • Spring5.2.x 源码本地环境搭建的方法步骤

    1 克隆Spring源码 github 下载可能较慢,可以先 fork 官方仓库到自己的账户下,再从 gitee 导入. 使用 sourceTree 拉取代码到本地. 切换到5.2.x版本 git checkout origin/5.2.x 添加阿里云镜像 将下面这行代码粘贴到build.gradle文件中的repositories节点下即可 , maven { url "http://maven.aliyun.com/nexus/content/groups/public" } 预先

  • React + webpack 环境配置的方法步骤

    本文介绍了React + webpack 环境配置的方法步骤,分享给大家,具体如下: 安装配置Babel babel-preset-es2015 ES6语法包,使代码可以随意地使用ES6的新特性. babel-preset-react React语法包,专门用于React的优化,在代码中可以使用React ES6 classes的写法,同时直接支持JSX语法格式 安装Babel loader // 安装babel-core核心模块和babel-loader npm install babel-c

  • Vue实现Layui的集成方法步骤

    前言 在写公司项目时,遇到了集成layim实现在线客服的一个需求,经过我的一番折腾后,终于将layui集成了进来,接下来就跟大家分享下我的解决方案,欢迎各位感兴趣的开发者阅读本文:grin: 获取layim layui官方提供了npm的安装方法,我司使用的是layui正版授权的layim,今天在折腾时发现,从npm仓库获取layui,里面自带了layim,大家可以去白嫖一波,不过大家需要注意版权问题(如下图所示,layui官网进行了声明). 商用项目的话还是建议大家获取正版授权,毕竟作者也不容易

  • PyTorch在Windows环境搭建的方法步骤

    一.安装Anaconda 3.5 Anaconda是一个用于科学计算的Python发行版,支持Linux.Mac和Window系统,提供了包管理与环境管理的功能,可以很方便地解决Python并存.切换,以及各种第三方包安装的问题. 二.下载和安装 个人建议推荐在清华的镜像来下载.选择合适你的版本下载,我使用的是Anaoonda3-5.1.0-Windows-x86_64.exe 可能安装速度有点慢,不太清楚是我电脑系统盘快慢的原因还是什么. 环境变量配置 将D:\ProgramData\Anac

  • Android Studio如何查看源码并调试的方法步骤

    背景 最近遇到一个Dialog问题,在6.0的手机上才可以重现,但是我们的工程已经是targetsdk=28了,点击Dialog的引用,只能看见28的class文件,现在我也越来越懒了,以前针对这种问题,我都会写个demo,去重现问题,但是现在希望能直接在当前工程快速定位出原因,能够基于源码debug肯定更好了,为了实现这个懒的目标,我找了很多办法,下面就一一介绍下 方法一 切换compilesdk studio默认使用的是gradle里配置的compilesdkversion,只要你把comp

随机推荐