chrome浏览器调试

使用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的条件断点，所以就不会再这里暂停，选择移除断点之后就会恢复原样了。