前言
在没接触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违规发生时暂停代码执行
