前言

在没接触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