使用chrome浏览器的时候,总是console.log 闯天下,今天来看看浏览器的两种特殊断点条件断点
和日志断点
条件断点
在代码行号处右击,选择添加条件断点,然后输入条件,当输入符合条件的时候才会中断,而不是无论什么情况都中断,方便我们更快的定位到问题。
日志断点
function sum(a, b) {
console.log(a, b);
const c = a + b;
return c;
}
sum(1, 2);
想要输出传入函数的a和b的值,通常会在源码中加入console.log来输出,其实我们还可以使用日志断点输出而无需改动代码。
在浏览器中找到对应的代码在左侧的行号处右击选择添加日志点
。
在输入框中输入 'a is ',a,'b is ',b
, a is 和 b is 是可选的,但是如果有多个断点的话还是加上的好,不然不好区分各个断点的输出内容。添加日志点之后,就可以在控制台中看到调用函数时输出的日志了。
执行结果:
禁用debugger断点
有时候在代码里面添加了debugger断点,想要去除它就需要修改源码,再次刷新页面;如果选择使用右上角的停用断点的话又会停用所有的断点,也不太合理。
所以chrome浏览器提供了一种方法可以不用再次刷新页面,只禁用这一个debugger断点的方法;在行号的地方右击之后选择 一律不在此处暂停
即可。
右击选择修改断点,可以看到浏览器自动生成了一个始终为false的条件断点,所以就不会再这里暂停,选择移除断点之后就会恢复原样了。