前端怎么debugger排查线上问题

前端怎么debugger排查线上问题

    • 1.问题背景
    • 2.问题详细说明
    • 3.处理方案
      • a.开发环境怎么找,步骤一样的:
      • b.生产环境怎么找,步骤一样的:
      • 还有一种情况就是你的子盒子是使用csshover父盒子出来的,
    • 4.demo地址:

1.问题背景

主要是我这边在浏览器放到150%时样式有些问题,我需要去调整这一块的样式,但是!!!!这一块的内容是hover才会显示出来的(代码做的效果),如果移除了那么就会消失,这问题就导致我使用f12然后选择元素的时候一直选择不到。

我相信大家肯定遇到过,然后也被折磨的很难受,今天就教你怎么处理这种问题

2.问题详细说明

image.png
image.png
所以当我想去用f12的调试工具来选择这个盒子里面的元素的时候怎么选都选择不到,简直要崩溃

3.处理方案

百度:浏览器js断点调试 sourcemap js设置断点调试步骤

你会得到这个答案:用chrome浏览器打开页面 → 按f12打开开发者工具 → 打开Sources → 打开你要调试的js代码文件 → 在行号上单击一下

看是真的很简单,但是真的让你自己去处理的时候,你会发现怎么找都找不到应该对应调试的代码在哪一段,然后就更不知道断点应该打在哪里了,就很崩溃。

这里我分为开发环境和生产环境,教你怎么找文件,然后打断点

a.开发环境怎么找,步骤一样的:

用chrome浏览器打开页面 → 按f12打开开发者工具 → 打开Sources,正常你会走到这个图
image.png
然后怎么找代码呢? 你可以在这个显示逻辑这里,写一个console,然后去触发事件,控制台就会有相应的输出,你就可以从这里进去了。
image.png
你也可以通过这里的控制台来找到源文件
image.png
image.png
怎么加断点呢?
不要在自己的vscode上加,这样子是没有用的,因为vue项目在开发环境运行时会把这个debugger去掉
image.png
你应该在刚才找到的源文件数字行号这里点一下
image.png
image.png
image.png
image.png

b.生产环境怎么找,步骤一样的:

用chrome浏览器打开页面 → 按f12打开开发者工具 → 打开Sources,正常你会走到这个图
image.png
生产环境怎么找到文件的位置呢?(source-map开启的话,你就能看源文件,不开启也能找到,但是看的是打包后的代码,不介意的话也可以看)
最简单:换个思路,我们也可以发个console.log()上去,然后按照开发环境上面的一样去寻找就可以了。。
你也使用你的vscode找到hover时执行的事件(比如我这个事件叫dropdownCtrl)
image.png
ctrl+f查找你要找的函数,能找到的js就说明函数在这个js文件呢,你就可以打断点了。
image.png

还有一种情况就是你的子盒子是使用csshover父盒子出来的,

那么只需要你在父盒子上使用浏览器工具给这个父盒子添加一个hover状态就能出来了
image.png

4.demo地址:

https://github.com/rui-rui-an/how_to_debugger

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

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

相关文章

OOP 下一个排列(函数模板)

题目描述 输入一个序列,输出其下一个字典序的排列 如:输入1 2 3, 下一个为1 3 2, 下一个为2 1 3, 下一个为2 3 1, 下一个为3 1 2, 下一个为3 2 1(最大的字典序排列&#xff0…

C++基础-编程练习题和答案(数组2)

文章目录 前言一、植树二、校门外的树三、排除第一个异形基因四、比身高五、supercell做核酸 前言 在C中,数组是一种数据结构,它允许在内存中连续存储相同类型的元素。数组是静态的,这意味着它们在编译时必须指定大小,并且在程序…

java版MES系统全套源码,支持 SaaS 多租户,管理后台的 Vue3 版本采用 :vue-element-plus-admin

MES生产制造执行系统源码,有演示,自主研发,多个项目应用案例,成熟稳定。支持二次开发,商业授权后可商用。 MES系统是面向制造企业车间执行层的生产信息化管理系统,能实时监控生产过程、管理制造数据、优化生…

惊呆了!六西格玛培训竟然这么强大!——张驰咨询

六西格玛,这个在业界久负盛名的管理理念,它的魅力太强大了。曾听闻它能帮助企业和个人提升竞争力,但当真正走进这个培训体系时,会发现它的影响力远超你的想象。 在六西格玛的指导下,企业实现了显著的转变。之前那些看…

vue使用html2canvas截图下载时,存在svg或者img或者特殊字体时截图不全的解决办法

使用html2canvas进行div截图时,存在svg和img的解决办法 写在前面:vue使用html2canvas截图时,存在svg或者img或者特殊字体时截图时空白,或者不全解决办法如下第一步,svg或者img先转base64(如果是特殊字体&am…

优化家庭网络,路由器无线中继配置全攻略(中兴E1600无线中继设置/如何解决没有预埋有线网络接口的问题/使用闲置路由实现WIFI扩展)

文章目录 📖 介绍 📖🏡 演示环境 🏡📒 网络优化 📒📒 操作步骤 📒💡适用场景🚨 常见问题及解决方案⚓️ 相关链接 ⚓️📖 介绍 📖 在现代家庭生活中,WiFi已经渗透到我们生活的每一个角落,成为了日常生活中不可或缺的一部分。然而,不少用户常常遇到W…

区块链简要介绍及运用的技术

一、区块链的由来 区块链概念最早是从比特币衍生出来的。 比特币(Bitcoin)诞生于2008年,是由一个名叫中本聪(Satoshi Nakamoto)的人首次提出,这个人非常神秘,至今没有他的任何准确信息。在提出…

C++ Primer Chapter 4 Expressions

Chapter 4 Expressions 4.11 类型转换 4.11.2 其他隐式类型转换 数组转换成指针: 在大多数用到数组的表达式中,数组自动转换成指向数组首元素的指针: int ia[10]; int* ipa;♜ 当数组被用作decltype关键字的参数,或者作为取地…

每天一个数据分析题(三百五十三)序列类图表

比较类图表主要用于在实际值与目标值之间、不同对象之间或者不同区域之间进行数值结果的对比分析,下列属于比较类图表的是? A. 油量表 B. 词云图 C. 染色地图 D. 面积图 数据分析认证考试介绍:点击进入 题目来源于CDA模拟题库 点击此处…

Windows下Qt5.14.2连接华为IoTDA平台

一、华为IoTDA简介 华为云物联网平台(IoT 设备接入云服务)提供海量设备的接入和管理能力,将物理设备联接到云,支撑设备数据采集上云和云端下发命令给设备进行远程控制,配合华为云其他产品,帮助您快速构筑物…

教师自费出书的注意事项有哪些?

备案主编专著的优势:(qkfb88688) 1、副高、正高职称最高学术成果 2、专著可以代替核心 3、周期短、出书快、可重复使用 4、双号齐全:ISBN~CIP 5、版权长期有效 教师自费出书有以下一些注意事项: 关于书稿&…

在CentOS 7上查看和管理内存使用情况

在Linux系统中,内存管理是一个至关重要的方面,尤其在生产环境中,了解系统内存的使用情况可以帮助管理员优化系统性能,检测内存泄漏,合理分配资源,从而确保系统的稳定运行。本文将详细介绍在CentOS 7系统中如…

每天一个数据分析题(三百五十一)-树状体系图

杜邦树状分析体系是将总指标根据指标关系拆解成各细分指标,从上到下依次排列形成树状结构。杜邦树状体系图的作用包括? A. 原因追踪 B. 进度管理 C. 预估影响 D. 鸟瞰全局 数据分析认证考试介绍:点击进入 题目来源于CDA模拟题库 点击此…

二、线性回归模型

目录 一、线性回归 1.模型示例 2.代码实验(C1_W1_Lab03_Model_Representation) (1).工具使用 (2).问题描述-房价预测 (3).输入数据 (4).绘制数据集坐标点 (5).建模构造函数 二、代价函数(Cost function) 1.解释一下概念…

mysql用户管理知识点

1、权限表 1.1、user表 1.1.1、用户列 Host、User、Password分别表示主机名、用户名、密码 1.1.2、权限列 决定了用户的权限,描述了在全局范围内允许对数据和数据库进行操作。 1.1.3、安全列 安全列有6个字段,其中两个是ssl相关的,2个是x509相…

敦煌网、ebay、速卖通等平台一直被差评怎么办?

在电商行业里一直都有一句话,有评行走天下,无评寸步难行 而没有review打造爆款的案例是少之甚少,众所周知,review已经成为用户衡量一件商品的标尺,目前我也是看到一个文章上面写到,一个卖家表示自己平时运…

形如SyntaxError: EOL while scanning string literal,以红色波浪线形式在Pycharm下出现

背景: 新手在学习Python时可能会出现如下图所示的报错 下面分情况教大家如何解决 视频教程【推荐】: 形如SyntaxError: EOL while scanning string literal,以红色波浪线形式在Pycharm下出现 过程: 问题概述: 简单…

计算机视觉与深度学习实战,Python为工具,基于光流场的车流量计数应用

一、引言 随着科技的飞速发展,计算机视觉和深度学习技术在现代社会中的应用越来越广泛。其中,车流量计数作为智能交通系统的重要组成部分,对于城市交通管理和规划具有重要意义。本文旨在探讨以Python为工具,基于光流场的车流量计数应用,为智能交通系统的发展提供技术支撑。…

数据结构与算法-15_ B 树

文章目录 1.概述2.实现定义节点多路查找插入 key 和 child定义树插入分裂删除代码 1.概述 B树(B-Tree)结构是一种高效存储和查询数据的方法。B树主要思想是将每个节点扩展成多个子节点,以减少查找所需的次数。B树结构非常适合应用于磁盘等大…

golang结构与接口方法实现与交互使用示例

1.定义结构 // 结构定义 type VideoFrame struct {id inthead []bytelen int64data []byte } 2.实现结构方法 // 生成结构字段的get与set方法 // func (v *VideoFrame) Id() int {return v.id }func (v *VideoFrame) SetId(id int) {v.id id }func (v *VideoFrame) He…