September 21, 2018
Chrome设置断点的各种姿势, js断点调试心得, Chrome DevTools 中调试 JavaScript 入门

在JavaScript代码中设置断点
刚工作时被leader安利了Chrome浏览器,那时一说到调试,就知道这一个操作
以为在行号上单击一下就是打断点,就是会调试了:)
当然这也是最最基本的打断点的方式了,当然了,相较于 调试全靠alert 已经高端很多了。
首先需要打开Devtools切换到Source页签,然后在左侧file navigation中找到我们要设置断点的文件并打开。
在打开的页面上单击对应的行号即可设置断点。
同时也可以通过在行号上右键点击Add breakpoint来设置断点。
当断点触发时,整个页面会处于暂停状态,并会切换到Source页签断点处方便调试,直到终止该断点调试后页面才会继续运行。
设置断点的行号上会显示一个蓝色的矩形来告诉你这里有一个断点。
P.S. 当一个表达式跨行时,添加的断点会默认下移到该表达式结束后的一行
在JavaScript代码中设置条件断点
当知道了如何在行号上单击来添加断点,已经能满足最最最基本的调试了。
但如果遇到一些特殊情况,断点添加起来不是那么的舒服的时候要肿么办呢?
比如说我写了一个循环,该循环会执行10次,可是我发现程序在第8次执行时的结果并不是我想要的。(不禁回想起刚工作时,有类似的问题,我当时的处理方式就是一手托腮,另一只手放在F8键上,狂按数十下后正襟危坐,开始调试)
显然,Chrome已经帮我们想到了这种场景,我们可以通过添加一些条件断点来避免一些无意义的断点。
我们可以通过右键行号,选择Add conditional breakpoint来添加一个带有条件的断点。
这是我们会看到界面上多出了一个输入框,并提示我们将在XXX行设置一个只会满足下列表达式的时候才会暂停的断点-.-
结合上边的场景,我们就在输入框中键入如下表达式,当循环计数器count全等于8时,会暂停页面并进入调试。
回车确认后我们就得到了一个金黄色的矩形来标识。
删除或禁用JavaScript断点
删除断点的方式,选择菜单栏中的Remove breakpoint。
禁用断点的方式,选择菜单栏中的Disable breakpoint 或者直接在设置了断点的行号上单击即可。
或者我们也可以通过debugger模块来统一管理所有的断点。
点击断点对应的复选框可以禁用断点,右键选择Remove breakpoint也可删除断点。
以及一些对断点的其他操作也可以通过右键菜单来实现,禁用激活所有的断点之类的。
在DOM元素上设置断点
断点不仅仅可以设置在JS代码上,还可以在DOM元素上设置断点
刚刚看到时我都惊呆了,没想到竟然还有这种操作。
我们可以设置三种断点… Read More