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