前端开发者必备:揭秘谷歌F12调试的隐藏技巧!

ops/2024/9/23 6:10:07/

前言

使用断点(breakpoint)是调试 JavaScript 代码的一种非常有效的方式。通过在代码的关键位置设置断点,可以阻止页面的状态变化,从而方便地检查和修改页面的当前状态。

1. 使用 setTimeout 配合 debuggerconsole.log

setTimeout(() => { console.log('Pause for debugging');debugger; 
}, 2000);

这种方法和之前描述的类似,但增加了一个 console.log,让你知道什么时候触发调试器。

演示

在这里插入图片描述

在这里插入图片描述

2. 在事件监听器中添加 debugger

在控制台中添加临时的事件监听器,并在监听器中加入 debugger

例如,如果你的元素有一个 ID 为 myElement,那么选择器应该是 '#myElement'

document.querySelector('your-selector').addEventListener('click', function() {debugger;
});

演示

在这里插入图片描述

在这里插入图片描述

这样,当你点击指定元素时,调试器会自动触发。

3. 使用 setInterval 监控状态变化

通过 setInterval 定时检查某个状态或元素变化,并在条件满足时触发 debugger

const interval = setInterval(() => {const dropdown = document.querySelector('your-dropdown-selector');if (dropdown && dropdown.style.display !== 'none') {console.log('Dropdown is now visible');debugger;clearInterval(interval);}
}, 100);

演示

在这里插入图片描述

这种方法适用于需要监控某个元素状态变化的场景。

4. 使用 monitorEvents

monitorEvents 是一个非常有用的工具,可以用来监控指定元素上的所有事件。

const element = document.querySelector('your-element-selector');
monitorEvents(element);

演示

在这里插入图片描述

这样你可以看到所有触发在该元素上的事件。

5. 使用 getEventListeners

这个方法可以列出某个元素上所有的事件监听器。

const element = document.querySelector('your-element-selector');
console.log(getEventListeners(element));

演示

在这里插入图片描述

这可以帮助你找到并理解元素上的所有事件绑定。

6. 更改元素状态

你可以直接在控制台中更改元素状态,以便持续显示某些元素。

const dropdown = document.querySelector('your-dropdown-selector');
dropdown.style.display = 'block';

演示

在这里插入图片描述

7. 强制伪类状态

在 Elements 面板中,右键点击你想要调试的元素,选择 Force Element State,然后选择 :hover:focus:active 等伪类。

演示

在这里插入图片描述

8. 使用 breakpoint 阻止页面状态变化

在 Sources 面板中,通过右键点击某个 JavaScript 文件的行号,添加断点。你可以在关键的事件处理函数或状态变化函数上添加断点,以便在需要时暂停执行。

演示

在这里插入图片描述

9. 使用 XHR/Fetch 断点

在 Sources 面板的右侧,找到 XHR Breakpoints,点击 + 号添加一个断点。输入你想要监控的 URL 关键字,当这个 URL 发起请求时,调试器会自动触发。

演示

在这里插入图片描述

10. 使用 DOM Mutation 断点

在 Elements 面板中,右键点击某个元素,选择 Break on,然后选择以下三种断点之一:

  • Subtree modifications:子树变化时触发断点。
  • Attributes modifications:属性变化时触发断点。
  • Node removal:节点被移除时触发断点。

演示

在这里插入图片描述


http://www.ppmy.cn/ops/88966.html

相关文章

[Meachines] [Easy] Friendzone LFI+Python-OS库污染权限提升

信息收集 IP AddressOpening Ports10.10.10.123TCP:21,22,53,80,139,443,445 $ nmap -p- 10.10.10.123 --min-rate 1000 -sC -sV PORT STATE SERVICE VERSION 21/tcp open ftp vsftpd 3.0.3 22/tcp open ssh OpenSSH 7.6p1 Ubuntu 4 (Ubuntu Lin…

WebStock会话

其实使用消息队列也可以实现会话&#xff0c;直接前端监听指定的队列&#xff0c;使用rabbitmq的分组还可以实现不同群聊的效果。 1、依赖搭建&#xff1a; <?xml version"1.0" encoding"UTF-8"?> <project xmlns"http://maven.apache.org…

Docker Image即Docker镜像

Docker Image&#xff0c;即Docker镜像&#xff0c;是Docker技术中的核心概念之一&#xff0c;它扮演着容器化应用程序打包和分发的重要角色。下面将详细讲解Docker镜像的定义、特点、构成、操作以及应用场景等方面。 一、Docker镜像的定义 Docker镜像是一种轻量级、可移植的…

界面控件DevExpress WinForms,支持HTML CSS提升用户体验(一)

DevExpress WinForms现在可以利用HTML/CSS强大的功能&#xff0c;帮助受DevExpress驱动的WinForms应用程序引入现代的UI元素和用户体验&#xff01; P.S&#xff1a;DevExpress WinForms拥有180组件和UI库&#xff0c;能为Windows Forms平台创建具有影响力的业务解决方案。Dev…

如何将WordPress文章中的外链图片批量导入到本地

在使用采集软件进行内容创作时&#xff0c;很多文章中的图片都是远程链接&#xff0c;这不仅会导致前端加载速度慢&#xff0c;还会在微信小程序和抖音小程序中添加各种域名&#xff0c;造成管理上的麻烦。特别是遇到没有备案的外链&#xff0c;更是让人头疼。因此&#xff0c;…

Python:range()函数的用法

range() 函数是 Python 中一个内置函数&#xff0c;用于生成一个数字序列。这个函数通常用于在 for 循环中迭代一个指定的次数。range() 函数可以接收一到三个参数&#xff0c;分别是起始值&#xff08;start&#xff09;、结束值&#xff08;stop&#xff09;和步长&#xff0…

C# 代码适配 Python

C# if obj is Type obj_1Python if isinstance(obj, Type):

设计模式——动态代理

设计模式——动态代理 动态代理的基本概念动态代理的实现步骤总结 在Java中&#xff0c;动态代理是一种强大的机制&#xff0c;它允许在运行时创建一个代理对象&#xff0c;这个代理对象可以代表另一个实际对象&#xff0c;它允许你在不直接操作原始对象的情况下&#xff0c;通…