当前位置： 首页 > news >正文

前端怎么debugger排查线上问题

news 2026/2/10 11:13:27

前端怎么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

相关文章：

前端怎么debugger排查线上问题

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

编程日记 2024/6/6 11:02:48

LabVIEW源程序安全性保护综合方案

LabVIEW源程序安全性保护综合方案 一、硬件加密保护方案 选择和安装硬件设备 选择加密狗和TPM设备：选择Sentinel HASP加密狗和支持TPM（可信平台模块）的计算机主板。 安装驱动和开发工具：安装Sentinel HASP加密狗的驱动程序和开发…...

编程日记 2024/6/6 11:01:47

JS包装类：循环中为什么建议用变量存储str.length进行循环判断？

前言 在Javascript通常我们在遍历一个字符串的时候通常使用的方式是 var str "abcdefg"; for(let i0;i<str.length;i){}但在最近的学习中&#xff0c;有人建议我最好应该是下面这样执行。 var str "abcdefg"; for(let i0,len str.length;i<len;i)…...

编程日记 2024/6/6 10:59:45

Android Audio实战——音量默认值修改（一）

在前面的文章《音频配置加载》中我们知道了，Audio 的一些配置信息是由硬件驱动保存到 audio_policy_configuration.xml 文件中，音量的一些默认值也会如此。但是在一些车载设备开发中，需要适配不同车型的需求，一套代码通常要适配多个车型，这就需要在 FW 层进行一些默认值的…...

编程日记 2024/6/6 10:57:42

解决uni-app progress控件不显示问题

官方代码&#xff1a; <view class"progress-box"><progress :percent"80" show-info activeColor"red" stroke-width"10" /> </view> 进度条并不在页面中显示&#xff0c;那么我们需要给进度条加上宽高style"…...

编程日记 2024/6/6 10:55:39

使用C++版本的opencv dnn 部署onnx模型

使用OpenCV的DNN模块在C中部署ONNX模型涉及几个步骤&#xff0c;包括加载模型、预处理输入数据、进行推理以及处理输出。 构建了yolo类&#xff0c;方便调用 yolo.h 文件 #ifndef YOLO_H #define YOLO_H #include <fstream> #include <sstream> #include <io…...

编程日记 2024/6/6 10:53:36

python中实现队列功能

【小白从小学Python、C、Java】 【考研初试复试毕业设计】 【Python基础AI数据分析】 python中实现队列功能 选择题 以下代码最后一次输出的结果是&#xff1f; from collections import deque queue deque() queue.append(1) queue.append(2) queue.append(3) print(【显示】…...

编程日记 2024/6/6 10:52:34

自然资源-关于城镇开发边界局部优化的政策思路梳理

自然资源-关于城镇开发边界局部优化的政策思路梳理 国土空间规划的核心之一是要统筹划定“三区三线”&#xff0c;三条控制线中的城镇开发边界的划定与优化工作&#xff0c;一直是国土空间规划改革的重要组成部分&#xff0c;其有助于遏制城市盲目扩张&#xff0c;强化底线约束…...

编程日记 2024/6/6 10:51:32

ElementUI的Table组件在无数据情况下让“暂无数据”文本居中显示

::v-deep .el-table__empty-block {width: 100%;min-width: 100%;max-width: 100%; }...

编程日记 2024/6/6 10:50:30

SAP-BASIS14-安装语言包

...

编程日记 2024/6/6 10:46:25

ant design的upload组件踩坑记录

antd版本 v4.17.0 1.自定义了onpreview和onchange事件&#xff0c;上传文件后&#xff0c;文件显示有preview的icon但是被禁用&#xff0c;无法调用onpreview事件。 问题展现&#xff1a; 苦苦查找原因&#xff0c;问题出在了这里&#xff0c;当文件没有url的时候&#xff0c…...

编程日记 2024/6/6 10:45:24

Python私教张大鹏 Vue3整合AntDesignVue之按钮组件

何时使用 标记了一个&#xff08;或封装一组&#xff09;操作命令&#xff0c;响应用户点击行为&#xff0c;触发相应的业务逻辑。 在 Ant Design Vue 中我们提供了五种按钮。 主按钮&#xff1a;用于主行动点&#xff0c;一个操作区域只能有一个主按钮。默认按钮&#xff1…...

编程日记 2024/6/6 10:44:23

【小海实习日记】PHP安装

## PHP环境搭建(Mac) ### php安装 使用brew需要安装homebrew >brew tap shivammathur/php >brew install shivammathur/php/php7.3 >brew link php7.3 这里可以需要homebrew使用代理进行下载&#xff0c;如果代理下载速度还是太慢&#xff0c;建议直接更该国内镜像…...

编程日记 2024/6/6 10:43:22

C++ Primer Chapter 4 Expressions

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

编程日记 2024/6/6 10:42:21

[leetcode hot 150]第一百三十七题，只出现一次的数字Ⅱ

题目&#xff1a; 给你一个整数数组 nums &#xff0c;除某个元素仅出现 一次 外&#xff0c;其余每个元素都恰出现 三次 。请你找出并返回那个只出现了一次的元素。 你必须设计并实现线性时间复杂度的算法且使用常数级空间来解决此问题。 由于需要常数级空间和线性时间复杂度…...

编程日记 2024/6/6 10:41:19

wpf工程中加入Hardcodet.NotifyIcon.Wpf生成托盘

1、在项目中用nuget引入Hardcodet.NotifyIcon.Wpf。如下图所示。 2、在App.xaml中创建托盘界面&#xff0c;代码是写在 App.xaml 里面 注意在application中一定要加入这一行代码&#xff1a; xmlns:tb"http://www.hardcodet.net/taskbar" 然后在<Application.R…...

编程日记 2024/6/6 10:39:16

keil下载及安装(社区版本)

知不足而奋进 望远山而前行 目录 文章目录 前言 Keil有官方版本和社区版本&#xff0c;此文章为社区版本安装&#xff0c;仅供参考。 1.keil MDK 2.keil社区版介绍 3.keil下载 (1)打开进入登录界面 (2)点击下载,跳转到信息页面 (3)填写个人信息,点击提交 (4)点击下载…...

编程日记 2024/6/6 10:38:15

python书上的动物是啥

Python的创始人为Guido van Rossum。1989年圣诞节期间&#xff0c;在阿姆斯特丹&#xff0c;Guido为了打发圣诞节的无趣&#xff0c;决心开发一个新的脚本解释程序&#xff0c;做为ABC语言的一种继承。之所以选中Python作为程序的名字&#xff0c;是因为他是一个叫Monty Python…...

编程日记 2024/6/6 10:35:11

数据库管理-第198期 升级Oracle ACE Pro，新赛季继续努力（20240605）

数据库管理198期 2024-06-05 数据库管理-第198期 升级ACE Pro&#xff0c;新赛季继续努力&#xff08;20240605&#xff09;1 惊喜2 变化3 Oracle ACE总结 数据库管理-第198期 升级ACE Pro&#xff0c;新赛季继续努力&#xff08;20240605&#xff09; 作者&#xff1a;胖头鱼的…...

编程日记 2024/6/6 10:34:08

华为坤灵交换机S300, S500, S210,S220, S200, S310 如何WEB抓包

通过S系列交换机配置端口镜像实现抓包 1、应用场景 端口镜像是指将经过指定端口(源端口或者镜像端口)的报文复制一份到另一个指定端口(目的端口或者观察端口)。 在网络运营与维护的过程中&#xff0c;为了便于业务监测和故障定位&#xff0c;网络管理员时常要获取设备上的业务…...

编程日记 2024/6/6 10:33:07

智能在线客服平台：数字化时代企业连接用户的 AI 中枢

随着互联网技术的飞速发展&#xff0c;消费者期望能够随时随地与企业进行交流。在线客服平台作为连接企业与客户的重要桥梁&#xff0c;不仅优化了客户体验&#xff0c;还提升了企业的服务效率和市场竞争力。本文将探讨在线客服平台的重要性、技术进展、实际应用&#xff0c;并…...

编程新知 2026/2/4 17:51:19

数据库分批入库

今天在工作中&#xff0c;遇到一个问题&#xff0c;就是分批查询的时候&#xff0c;由于批次过大导致出现了一些问题&#xff0c;一下是问题描述和解决方案&#xff1a; 示例&#xff1a; // 假设已有数据列表 dataList 和 PreparedStatement pstmt int batchSize 1000; // …...

编程新知 2026/1/8 11:38:36

学习STC51单片机32（芯片为STC89C52RCRC）OLED显示屏2

每日一言 今天的每一份坚持&#xff0c;都是在为未来积攒底气。 案例&#xff1a;OLED显示一个A 这边观察到一个点&#xff0c;怎么雪花了就是都是乱七八糟的占满了屏幕。。 解释 &#xff1a; 如果代码里信号切换太快&#xff08;比如 SDA 刚变&#xff0c;SCL 立刻变&#…...

编程新知 2026/2/6 0:50:24

企业如何增强终端安全？

在数字化转型加速的今天&#xff0c;企业的业务运行越来越依赖于终端设备。从员工的笔记本电脑、智能手机&#xff0c;到工厂里的物联网设备、智能传感器&#xff0c;这些终端构成了企业与外部世界连接的 “神经末梢”。然而&#xff0c;随着远程办公的常态化和设备接入的爆炸式…...

编程新知 2026/1/29 9:14:58

代理篇12|深入理解 Vite中的Proxy接口代理配置

在前端开发中，常常会遇到 跨域请求接口 的情况。为了解决这个问题，Vite 和 Webpack 都提供了 proxy 代理功能，用于将本地开发请求转发到后端服务器。 什么是代理（proxy）？ 代理是在开发过程中，前端项目通过开发服务器，将指定的请求“转发”到真实的后端服务器，从而绕…...

编程新知 2025/10/27 20:33:34

Unsafe Fileupload篇补充-木马的详细教程与木马分享（中国蚁剑方式）

在之前的皮卡丘靶场第九期Unsafe Fileupload篇中我们学习了木马的原理并且学了一个简单的木马文件 本期内容是为了更好的为大家解释木马&#xff08;服务器方面的&#xff09;的原理&#xff0c;连接&#xff0c;以及各种木马及连接工具的分享 文件木马&#xff1a;https://w…...

编程新知 2026/1/25 10:13:29

初探Service服务发现机制

1.Service简介 Service是将运行在一组Pod上的应用程序发布为网络服务的抽象方法。 主要功能&#xff1a;服务发现和负载均衡。 Service类型的包括ClusterIP类型、NodePort类型、LoadBalancer类型、ExternalName类型 2.Endpoints简介 Endpoints是一种Kubernetes资源&#xf…...

编程新知 2026/2/6 15:01:23

【从零开始学习JVM | 第四篇】类加载器和双亲委派机制(高频面试题)

前言&#xff1a; 双亲委派机制对于面试这块来说非常重要&#xff0c;在实际开发中也是经常遇见需要打破双亲委派的需求&#xff0c;今天我们一起来探索一下什么是双亲委派机制&#xff0c;在此之前我们先介绍一下类的加载器。 目录 ​编辑 前言&#xff1a; 类加载器 1. …...

编程新知 2026/1/23 7:37:12

算法打卡第18天

从中序与后序遍历序列构造二叉树 (力扣106题) 给定两个整数数组 inorder 和 postorder &#xff0c;其中 inorder 是二叉树的中序遍历&#xff0c; postorder 是同一棵树的后序遍历&#xff0c;请你构造并返回这颗 二叉树 。 示例 1: 输入&#xff1a;inorder [9,3,15,20,7…...

编程新知 2026/2/9 22:26:48

LangChain 中的文档加载器（Loader）与文本切分器（Splitter）详解《二》

&#x1f9e0; LangChain 中 TextSplitter 的使用详解&#xff1a;从基础到进阶&#xff08;附代码&#xff09; 一、前言 在处理大规模文本数据时&#xff0c;特别是在构建知识库或进行大模型训练与推理时&#xff0c;文本切分&#xff08;Text Splitting&#xff09; 是一个…...

编程新知 2025/10/10 9:24:44