乐趣区

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

前言

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

退出移动版