浏览器断点调试

前端日常基础最终数据一般使用：console.log() / console.count() / console.table() , debugger。针对，一些简单的数据查验，其实已经够用。

但是面对页面结构复杂的时候，就有点不够优雅了。

下面是我日常使用的一些方式，该贴仅是记录，方便自己日后查看：

---

console.log ( ), 补充

下面是各种说明符的使用案例。

// %s - 字符串格式化
console.log("输出字符串: %s", "yyy");

// %d or %i - 整数格式化
console.log("输出整数格式: %d", 42);
console.log("输出整数格式: %i", 42);

// %f - 浮点数格式化
console.log("输出浮点数格式: %f", 3.14159);

// %o - 以可折叠的优化多行样式显示一个对象，适合复杂对象
const obj = { age: 18, b: 'string', c: { name: "yyy" } };
console.log("输出对象格式: %o", obj);

// %O - 以不可折叠的 JavaScript 对象格式化
console.log("用于简单的对象表示: %O", obj);

// %c - 应用 CSS 样式到输出
console.log("%c对文本进行样式化输出.", "font-size:20px; color:blue;");

 我们将其复制到Source-Snippet中进行验证。

 1. 浏览打断点：

最常见的断点类型是代码行断点(就是我们经常用到的方式)。但是设置代码行断点可能效率较低，特别是如果我们不确定要查找的确切位置，或者如果我们正在处理大型代码库。

暂时使用：有条件的代码行、记录点比较多，后续用到了继续添加。

1.1 Monitor Events & monitor

1.1.1 monitorEvents 是一个在浏览器开发者工具中使用的 JavaScript 方法，用于监控指定元素上特定类型的事件。这个方法通常用于调试和分析事件的触发情况。

一旦使用 monitorEvents 监控了某个元素上的事件，当该元素上触发相应类型的事件时，浏览器会在控制台中打印相应的事件信息，包括事件类型、事件目标等。

使用：

// 监控特定元素上的一个或多个事件类型
monitorEvents(element, eventTypes);

• element: 要监控的 HTML 元素。
• eventTypes: 要监控的事件类型，可以是单个事件类型的字符串，或者是事件类型组成的数组

// 监控窗口内的点击事件
monitorEvents(window, 'click');

// 监控文档body上的键盘按键事件
monitorEvents(document.body, ['keyup', 'keydown']);

 然后，我们还可以在控制台的Element中直接选中元素，然后在Console中输入对应的指令

在特定元素触发对应的事件后，在控制台就会打印除对应的Event的信息。

上面，我们涉及到一个$0变量。其实这是chrome-devtool的一种内置变量。在Elements选中一个元素时，我们就可以在Console中查询对应的元素引用

我们还可以通过getEventListeners($0)来获取该元素上绑定的事件信息。

然后，我们还可以通过$0.addEventListener来添加对应的事件。这样我们就不用通过class/id来现获取元素，然后再调用addEventListener了。

1.1.2 monitor函数调用

monitor方法允许你监听特定函数的调用

// 定义一个示例函数
function myFn() { }
// 进行监控
monitor(myFn)

myFn()
// function myFn called

myFn(1)
// function myFn called with arguments: 1

2. 代码行断点

1. 点击Sources选项卡
2. 打开想要设置断点的文件
   1. 我们可以在Sources的左侧文件目录中进行搜索
   2. 如果想调试的文件层级过于深，我们可以使用 ⌘ P / control P 的快捷键，通过文件名来搜索 
   3. 找到指定的代码行，可以在左侧打断点。

 注意⚠️： 在代码中可以 用debugger 打断点，如果谷歌和edge的debugger没有生效这需要在，F2的开发者工具中 -> 设置 -> 忽略列表中 -> 将/node_ modules//bower_components/ 的勾选去掉

3.有条件的断点：（强烈推荐）

作用：1.在循环时：可以按条件打断点

           2.进行参数定制化，不改变原代码

           3.计算函数耗时

           4.根据参数个数暂停

           5.根据函数参数个数不匹配暂停 

1.条件断点 

 上面的代码中表示，当i>3时候，才会触发断点，此时我们可以通过右侧的 Watch来查询我们想知道的的数据信息，并且还可以在Block和Local也会显示当前断点上下文中的数据信息。

2.参数定制化：

我们可以通过有条件的代码行断点，将其替换成我们想要探查的数值。并且还不影响函数的运行顺序。

 3.计算函数耗时

针对一个长list的循环，我们想通过一些方式来计算它的耗时，一般我们通过硬编码的方式使用console.time()/console.timeEnd()在循环的前后进行处理。

其实，我们可以在起始点设置一个带有条件console.time('label')的断点，在结束点设置一个带有条件console.timeEnd('label')的断点。

4.根据参数个数暂停

只有当当前函数以 N 个参数调用时才暂停：arguments.callee.length === N

在函数有可选参数的情况下很有用。

5.根据函数参数个数不匹配暂停

只有当当前函数以错误的参数个数调用时才暂停：(arguments.callee.length) != arguments.length

4.日志断点

使用日志代码行断点（logpoints）可以在不暂停执行且不用在代码中添加console.log()调用的情况下，将消息输出到控制台。其实，这种情况和有条件的代码行断点中加入console.log()效果差不多。

其他断点方式详情可看：你会在浏览器中打断点吗？我会！ - 掘金 (juejin.cn)