广告
返回顶部
首页 > 资讯 > 前端开发 > JavaScript >Vue生产环境调试的方法步骤
  • 565
分享到

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

2024-04-02 19:04:59 565人浏览 泡泡鱼
摘要

目录前言原理方法步骤代码缺点长期解决方法总结前言 Vue 生产环境默认是无法启用vue devtools的,如果生产应用出了问题,就很难解决。用本文提供的方法就可以实现线上debug

前言

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生产环境调试内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网!

--结束END--

本文标题: Vue生产环境调试的方法步骤

本文链接: https://www.lsjlt.com/news/146245.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑,方便收藏和打印~

下载Word文档
猜你喜欢
  • Vue生产环境调试的方法步骤
    目录前言原理方法步骤代码缺点长期解决方法总结前言 vue 生产环境默认是无法启用vue devtools的,如果生产应用出了问题,就很难解决。用本文提供的方法就可以实现线上debug...
    99+
    2022-11-13
  • Vue生产环境怎么调试
    本文小编为大家详细介绍“Vue生产环境怎么调试”,内容详细,步骤清晰,细节处理妥当,希望这篇“Vue生产环境怎么调试”文章能帮助大家解决疑惑,下面跟着小编的思路慢慢深入,一起来学习新知识吧。前言vue 生产环境默认是无法启用vue devt...
    99+
    2023-06-30
  • LINUX生产环境的搭建步骤
    这篇文章主要讲解了“LINUX生产环境的搭建步骤”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“LINUX生产环境的搭建步骤”吧!登录远程MySQLmysql -h 192...
    99+
    2023-06-09
  • vs2022 qt环境搭建调试的方法步骤
    建议:先安装qt再安装vs! 1、安装qt6,如下图,勾选msvc2019即可,其它自行决定,剩下安装自动的; 2、vs2022安装没什么说的,因为已经是模块化安装了,如下图,这是...
    99+
    2022-11-12
  • nodejs生产环境部署vue的方法是什么
    这篇“nodejs生产环境部署vue的方法是什么”文章的知识点大部分人都不太理解,所以小编给大家总结了以下内容,内容详细,步骤清晰,具有一定的借鉴价值,希望大家阅读完这篇文章能有所收获,下面我们一起来看看这篇“nodejs生产环境部署vue...
    99+
    2023-07-06
  • 详解gitlab生产环境的搭建方法
    一、引言在当今软件开发行业中,Git作为版本控制工具已经成为不可或缺的一部分。GitLab则是在Git的基础上,提供了更多的功能和服务。GitLab可以帮助我们更好地进行代码管理、合作和部署。本文将介绍如何搭建GitLab的生产环境,帮助开...
    99+
    2023-10-22
  • jenkins分环境部署vue/react项目的方法步骤
    vue/react部署请参考上一篇文章:https://www.jb51.net/article/238583.htm 项目开发正常都需要开发环境、测试环境、生产环境,每个环境部署都...
    99+
    2022-11-13
  • VSCode 搭建 x264 源码调试环境的详细步骤
    目录1.下载 x2642. 使用上一节介绍的方法为 x264 生成支持 debug 的 x264.exe3. 在 VSCode 中打开 x264 源码文件夹4. 创建并配置 laun...
    99+
    2022-11-13
    VSCode源码调试 VSCode  x264 源码调试
  • docker搭建fastdfs环境的方法步骤
    fastdfs是一个开源的分布式文件系统,在实际使用中,通过源码编译安装过程非常复杂,但是通过docker快速构建却非常容易。下面介绍通过docker安装fastdfs的方法。 do...
    99+
    2022-11-13
  • python生产环境禁用assert断言的方法
    目录1. 背景2.解决方案2.1 禁用assert的策略2.2 禁用的原理3. 实施禁用策略3.1 启动命令行的参数中,添加-O3.2 设置PYTHONOPTIMIZE环境变量4 使...
    99+
    2022-11-11
  • docker的pdflatex环境配置的方法步骤
    技术背景 Latex在文档撰写方面是不可或缺的工具,尤其是在写文章方面,是必须要用到的文字排版工具。但是latex的环境部署并不是一个特别人性化的操作,尤其是在各种不同的平台上操作是...
    99+
    2022-11-12
  • Windows下搭建FFmpeg开发调试环境的详细步骤
    目录背景步骤一、安装VS 2017二、安装 YASM 与 NASM三、创建正确的目录层次四、下载源码和相关依赖五、编译与调试⏭️ 一键部署脚本背景 如果你是一个FFmpeg的使用者,...
    99+
    2022-11-13
  • VSCode搭建STM32开发环境的方法步骤
    目录1、安装VScode2、安装C/C++插件3、安装Keil Assistant插件4、用vscode打开keil工程5、编译、下载程序6、常用操作官方简述摘要: 作为一个51单片...
    99+
    2022-11-12
  • ubuntu 20.04上搭建LNMP环境的方法步骤
    简单说明 由于之前是用Centos7搭建的,后来使用ubuntu 20.04的系统做为个人开发环境,所以想在ubuntu上也搭建一下环境,和Centos有一些小区别所以记录一下仅供学习。 安装前准备 下载软件: php:...
    99+
    2022-06-04
    ubuntu 20.04搭建LNMP ubuntu 20.04搭建LNMP环境
  • tensorflow基于Anaconda环境搭建的方法步骤
    目录1.简介2.在Anaconda环境下搭建TensorFlow- 安装Anaconda创建一个新的Anaconda环境激活新的环境安装TensorFlow验证TensorFlow安...
    99+
    2023-02-28
    tensorflow Anaconda环境搭建 tensorflow Anaconda 搭建
  • windowsserver2016域环境搭建的方法步骤(图文)
    目录搭建环境准备搭建主DC搭建辅DC搭建和配置DNS搭建和配置DHCP域内加入主机和用户创建OU设立GPO本文主要记录一下自己搭建的一个域环境进行测试 搭建环境准备搭建主DC搭建辅D...
    99+
    2022-11-13
  • Golang环境配置的方法步骤是什么
    本篇内容主要讲解“Golang环境配置的方法步骤是什么”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“Golang环境配置的方法步骤是什么”吧!下载地址Go官方镜像站点:https://golan...
    99+
    2023-07-06
  • Nginx生产环境平滑升级的方法是什么
    这篇“Nginx生产环境平滑升级的方法是什么”文章的知识点大部分人都不太理解,所以小编给大家总结了以下内容,内容详细,步骤清晰,具有一定的借鉴价值,希望大家阅读完这篇文章能有所收获,下面我们一起来看看这篇“Nginx生产环境平滑升级的方法是...
    99+
    2023-07-05
  • Oracle RAC集群测试-生产环境最佳方法(Oracle 11g/12c/18c/19 RAC)
    一、Oracle RAC集群测试背景 某中大型制造业公司,由于要新上项目,建设了一套业务系统-ERP系统,这套系统的数据库环境是Oracle RAC(RHEL Linux7+Oracle11gR2 RAC)架构 ,根据风哥提供的建设方案项...
    99+
    2016-12-27
    Oracle RAC集群测试-生产环境最佳方法(Oracle 11g/12c/18c/19 RAC)
  • VSCODE调试RDKit内核的方法步骤(C++)
    目录安装 RDKit 所需环境配置 VSCode 使其能 Debug配置 Intellisense配置 CMake新建调试文件进行调试Anaconda 环境问题参考资料在研究 RDK...
    99+
    2022-11-12
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作