Vue生产环境调试的方法

Python微信订餐小程序课程视频

https://blog.csdn.net/m0_56069948/article/details/122285951

Python实战量化交易理财系统

https://blog.csdn.net/m0_56069948/article/details/122285941
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面板了

代码

?

| 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748 | 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浏览器

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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/401084.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

RavenDB:基于Windows/.NET平台的NoSQL数据库

众所周知,NoSQL运动旨在成为大数据时代传统关系数据库管理系统的替代品。如今Microsoft对开源的态度有所转变,RavenDB就是很好的例子。Microsoft对RavenDB(NoSQL数据库)的认可令很多人感到惊讶。RavenDB可以轻易的替代关系数据库管…

JDBC实例--JDBC连接池技术解密,连接池对我们不再陌生

一、为什么我们要用连接池技术? 前面的数据库连接的建立及关闭资源的方法有些缺陷。统舱传统数据库访问方式:一次数据库访问对应一个物理连接,每次操作数据库都要打开、关闭该物理连接, 系统性能严重受损。 解决方案:数据库连接池&#xff08…

重温51汇编指令(附实验)

Python微信订餐小程序课程视频 https://blog.csdn.net/m0_56069948/article/details/122285951 Python实战量化交易理财系统 https://blog.csdn.net/m0_56069948/article/details/122285941 重温51汇编指令(附实验) 写在前面: 在电子控制…

第四章 C++数据类型

#include#includeusing std::cout;using std::cin;using namespace std;int main(){ // int a; //布尔 bool check; check0;//初始化为false check true; //字符 char ch; ch0; cout<< ch <<endl; cout<<(int)ch<<endl; for(int i32;i<128;i) { …

HttpClient 学习整理(转)

来自 http://www.blogjava.net/Alpha/archive/2007/01/22/95216.htmlHttpClient 是我最近想研究的东西&#xff0c;以前想过的一些应用没能有很好的实现&#xff0c;发现这个开源项目之后就有点眉目了&#xff0c;令人头痛的cookie问题还是有办法解决滴。在网上整理了一些东西&…

Hyperledger Fabric 通道配置文件和容器环境变量详解

Python微信订餐小程序课程视频 https://blog.csdn.net/m0_56069948/article/details/122285951 Python实战量化交易理财系统 https://blog.csdn.net/m0_56069948/article/details/122285941 摘要 Fabric 网络启动的过程中需要进行大量配置&#xff0c;新学时对各个配置的作…

课程作业二

课程作业二 github链接 题目要求&#xff1a; 编写一个程序&#xff0c;要求计算给定的圆的半径求圆的面积&#xff0c;并将所结果打印出来。需要建立一个工程&#xff0c;将程序写为两个.cpp与一个.h文件。 文件分离的感想&#xff1a; 对于本次作业&#xff0c;是一道我们平时…

SSH HTTPS 公钥、秘钥、对称加密、非对称加密、 总结理解

2019独角兽企业重金招聘Python工程师标准>>> 作者&#xff1a;shede333主页&#xff1a;http://my.oschina.net/shede333 && http://blog.sina.com.cn/u/1509658847版权声明&#xff1a;原创文章&#xff0c;版权声明&#xff1a;自由转载-非商用-非衍生-保…

windows下wamp安装

1.apache安装 php模块添加&#xff1a;LoadModel php5_module D:/wamp/php/php5apache2_2.dll 然后搜索“addtype”&#xff0c;在下方加入 AddType application/x-httpd-php .php 这句话&#xff0c;以使你的服务器能够识别php文件。 2.php安装 php.ini 打开mysql扩展 3.mysql…

图说Oracle基础知识

http://www.cnblogs.com/hsiang/ 本文版权归作者和博客园共有&#xff0c;欢迎转载&#xff0c;但未经作者同意必须保留此段声明&#xff0c;且在文章页面明显位置给出原文连接&#xff0c;谢谢。转载于:https://www.cnblogs.com/zbj815/p/6773508.html

petite-vue源码剖析-逐行解读@vue-reactivity之effect

Python微信订餐小程序课程视频 https://blog.csdn.net/m0_56069948/article/details/122285951 Python实战量化交易理财系统 https://blog.csdn.net/m0_56069948/article/details/122285941 当我们通过effect将副函数向响应上下文注册后&#xff0c;副作用函数内访问响应式对…

string.Format 格式化

1、格式化货币&#xff08;跟系统的环境有关&#xff0c;中文系统默认格式化人民币&#xff0c;英文系统格式化美元&#xff09; string.Format("{0:C}",0.2) 结果为&#xff1a;&#xffe5;0.20 &#xff08;英文操作系统结果&#xff1a;$0.20&#xff09; 默认格…

8步教你打开Android之门 NDK入门教程

这是一篇Android NDK开发的入门教程&#xff0c;在这一教程结束后&#xff0c;你将创建你自己的项目&#xff0c;从Java代码简单地调用原生C语言代码。 本文为一篇外文翻译&#xff0c;我们将介绍如何学习安装 Android NDK 并开始使用它。在这一教程结束后&#xff0c;你将创建…

升级nginx,查看已经安装的模块,并隐藏或者修改版本号

升级前&#xff0c;查看已经安装的版本以及模块[rootmail ~]# /opt/nginx/sbin/nginx -Vnginx version: nginx/0.5.34 built by gcc 3.4.6 20060404 (Red Hat 3.4.6-3)configure arguments: --prefix/opt/nginx --sbin-path/opt/nginx/sbin/nginx --conf-path/opt/nginx/conf/n…

SpringCloudAlibaba微服务docker容器打包和部署示例实战

Python微信订餐小程序课程视频 https://blog.csdn.net/m0_56069948/article/details/122285951 Python实战量化交易理财系统 https://blog.csdn.net/m0_56069948/article/details/122285941 概述 我们使用前面《SpringCloudAlibaba注册中心与配置中心之利器Nacos实战与源码…

MongoVUE的Collections数据不显示的解决方法

问题描述&#xff1a; 使用 mongoDB数据库&#xff0c; 数据添加成功了&#xff0c;使用命令行能查询出来&#xff0c;但在MongoVUE 中数据却不显示 (我使用的是 mongoDB 3.4 的版本) 原因&#xff1a;引擎问题&#xff0c;只要降到2.X版本就可以显示了     3.x默认是wire…

(3)[wp7数据存储] WP7 IsolatedStorage系列篇——通过XmlSerializer读写XML文件 [复制链接]...

发表于 2012-5-17 15:51:07 |只看该作者 |倒序浏览 分享到&#xff1a;本帖最后由 agameboy 于 2012-5-17 17:08 编辑这一篇我们会通过XmlSerializer读写XML文件&#xff0c;跟多的相关文章请参考WP7 IsolatedStorage系列篇&#xff01;需要的命名空间&#xff1a;using System…

SaltStack WEB UI Halite初体验

闲来无聊&#xff0c;话说saltstack webui halite还一直没玩&#xff0c;于是就凑今天体验一把&#xff1b;很多尝鲜的同学都说halite的功能较少&#xff0c;而其也正符合其说明console&#xff0c;不过其UI我还是蛮喜欢的&#xff0c;个人觉得比较清新简洁、挺好下面就来安装体…

Envoy熔断限流实践(二)Rainbond基于RLS服务全局限流

&#x1f680; 优质资源分享 &#x1f680; 学习路线指引&#xff08;点击解锁&#xff09;知识定位人群定位&#x1f9e1; Python实战微信订餐小程序 &#x1f9e1;进阶级本课程是python flask微信小程序的完美结合&#xff0c;从项目搭建到腾讯云部署上线&#xff0c;打造一…

UV坐标

1.什么是uv坐标 所有的图象文件都是二维的一个平面。水平方向是U&#xff0c;垂直方向是V&#xff0c;通过这个平面的&#xff0c;二维的UV坐标系。我们可以定位图象上的任意一个象素。但是一个问题是如何把这个二维的平面贴到三维的NURBS表面和多边形表面呢&#xff1f; 对于N…