Chrome 调试

前言

作为前端开发，Chrome 断点调试，是常见的日常操作。由于console.log()有些时候效率较低，断点调试是提升效率，增加摸鱼时间的利器。

浏览器版本

本文是基于Chrome浏览器版本 版本 92.0.4515.159（正式版本）

sources面板概览

7种断点类型

1. 行断点

a.在源代码添加debugger<br>

b点击sources面板的行号

2. 条件断点

3. xhr断点

4. dom断点:即Elements面板提及过的三种DOM断点： 分为：

• 节点属性断点
• 节点删除断点
• 子树变更断点

5. Event Listener 事件监听断点

举个🌰：给DOM元素增加鼠标点击断点。Mouse-click;

6. Exception 异常断点
7. Function 函数断点

Debug过程

函数调用栈 Call Stack：Call Stack 是 time traveling 的，即点击栈中的任一节点，当前的作用域和局部变量等信息，都会模拟至该节点执行时的状态

• 全局作用域Global、局部作用域 Local、闭包作用域

• debug 操作有下面操作

  step over next function

  step into next function

  step out current function

  step (与 step over/into 的区别就是，step 会优先尝试 step into，当没有可步入的代码时，就会执行 step over)

BlackBox

黑箱个人理解就是调试中可以忽略某个脚本。

参考资料

#前端容易忽略的 debugger 调试技巧

#新手向：前端程序员必学基本技能——调试JS代码

#Devtools老师傅养成系列

读一本好书，就是在和高尚的人谈话。 ——歌德