如何在浏览器中调试你的代码

前言

在没接触worktile项目的时候，一般都是用console.log打断点，现在再做worktile项目的时候，项目真的很大很大，加载一次要个5分钟左右，就不能用console.log打断点了，就要在浏览器中打断点进行debug了。

Sources面板

右击->检查->找到Sources。也可以使用快捷键（F12）

大致可分为三个区域，左边是文件导航，中间是文件的具体内容，右边可以统称为调试面板，主要介绍的是最右边那部分，调试面板。

先介绍几个功能按钮：

恢复/暂停脚本执行

步过函数，实际表现是不遇到函数时，执行下一步。遇到函数时，不进入函数直接执行下一步。即把函数当做一条语句执行不向内展开

步入函数，表现是不遇到函数时，执行下一步。遇到到函数时，进入函数执行上下文。

当中断停留在函数内部时，点击这个按钮则会跳出函数内部，停留在函数调用的下一个语句

执行下一步

在不取消断点标记的情况下，使得所有断点失效

监视工具

1.Watch：

跟踪监视变量，点击加号，输入变量名称就可以进行监视了

2.Breakpoints：

显示了所有打上的断点

3.Scope：

查看当前函数作用域、全局作用域等，以及它们包含的变量。

4.Call Stack：

记录函数调用的栈结构

5.XHR/Fetch Breakpoints：

允许你在网络请求中设置断点，无论是使用 XMLHttpRequest（XHR）还是 Fetch API 进行的。当请求被发送、接收或完成时，这些断点会触发，使你能够检查和调试网络请求的细节。

6.DOM Breakpoints：

允许你在DOM树发生更改时暂停代码执行。例如，你可以设置断点以在节点属性更改、子节点更改或节点删除时暂停执行，从而帮助你追踪和调试DOM操作

7.Global Listeners：

全局监听器面板允许你查看整个页面上的事件监听器

8.Event Listener Breakpoints：

允许你在特定类型的事件被触发时暂停执行。你可以设置断点以在鼠标事件、键盘事件、窗口调整大小等事件发生时进行调试。

9.CSP Violation：

Breakpoints内容安全策略（CSP）违规断点允许你在页面上的CSP违规发生时暂停代码执行

参考资料

https://zhuanlan.zhihu.com/p/24770877