Chrome调试技巧

断点

条件断点

条件断点，当表达式为 true 时才会暂停，经典应用场景是当 bug 是偶现时，你需要知道入参什么的正不正常，你可以打一个你认为不正常的条件断点，看看是谁调用的。PS：值得注意的是，如果你的表达式报错，那这个断点就会不生效，需要甄别到底是报错引起的断点没进入还是真的没进入

记录点

当代码执行到这里时，会在控制台输出你的表达式，不会暂停代码执行，下图是将 a 输出到控制台的例子。

性能

当你做了一些操作，不确定到底执行了什么代码时，可以利用 performance 来捕获到底什么样的代码被执行了，结合你的具体情况，有时候也会找到线索，有意想不到的收获。

事件监听

• 找到冒泡点: 如何找到是谁阻止了冒泡，直接在控制台输入下面的代码即可。经常用于寻找我绑定的事件为什么没有被触发。

var tmpStopPropagation = MouseEvent.prototype.stopPropagation;

MouseEvent.prototype.stopPropagation = function(...args) {
  console.trace('stopPropagation'); // console.trace() 方法用于显示当前执行的代码在堆栈中的调用路径。
  tmpStopPropagation.call(this, ...args);
};

• 容器滚动: 下面这个例子是找到到底是谁对容器进行了滚动，比如我们遇到一些页面跳动或者抖动的场景，寻找到底是谁滚动了容器，当然滚动还有其他方法会触发，比如scrollIntoView，但思路都是一样的，代理这个方法即可。

var tmpScrollTop = element.scrollTop;

Object.defineProperty(element, 'scrollTop', {
  get: function() {
    return tmpScrollTop;
  },
  set: function(newVal) {
    console.trace('scrollTop');
    tmpScrollTop = newVal;
  }
})

禁用js执行

打开 devtools 的 source 面板，然后 cmd+p，输入「>disable javascript」，按回车，然后刷新页面，

未完待续