Browser debug

DOM 篇

检查难以捉摸的元素

有的时候，某些元素的展示状态和光标的位置有关，例如 CSS 的 hover 控制的元素。这个时候可以使用如下代码：

setTimeout(function() { debugger; }, 5000);

设置 5s 之后 debugger，在这 5s 只能，用鼠标触 DOM 元素发到我们想要的状态，这样就能够调试到我们预期状态的 DOM 了

监视聚焦的元素

在控制台打印当前光标聚焦的元素

(function () {
  let last = document.activeElement;
  setInterval(() => {
    if (document.activeElement !== last) {
      last = document.activeElement;
      console.log("Focus changed to: ", last);
    }
  }, 100);
})();

追踪篇

为什么页面跳转了

通过如下的方法可以知道，是哪部分的代码触发了页面的跳转

const dbg = () => {
  debugger;
};
history.pushState = dbg;
history.replaceState = dbg;
window.onhashchange = dbg;
window.onpopstate = dbg;

// 或者是
debug(window.location.replace);
debug(window.location.assign);

JS 断点

跳转到 JS 资源所在的 Source 面板的位置，找到目标行，插入断点，有多种形式：

普通断点：鼠标左键
插入代码：鼠标左键 + 鼠标右键 + Edit breakpoint
插入 log 信息：鼠标右键 + Add logpoint
插入条件断点：鼠标右键 + Add conditional breakpoint

堆栈信息

通过 console.trace() 就可以打印出 JS 代码执行处的堆栈信息

console.trace()

当然，也可以选择在适当的时候抛出异常 throw new Error()，同样会记录堆栈信息

控制台方法篇

监听 CLass 调用

浏览器控制台提供了 monitor 方法，用于监听方法的调用，例如有一个 Dog 类

class Dog {
  bark(count) {
    /* ... */
  }
}

我们想要知道所有 Dog 实例产生的调用，可以在控制台粘贴如下代码

var p = Dog.prototype;
Object.getOwnPropertyNames(p).forEach((k) => monitor(p[k]));
// or
var p = instance.constructor.prototype;
Object.getOwnPropertyNames(p).forEach((k) => monitor(p[k]));

可能会得到如下输出：

function bark called with arguments: 2

Copy 方法

利用 Copy 方法，可以在控制台拷贝许多不方便拷贝的内容

DOM 快照: copy(document.documentElement.outerHTML)
资源的源数据 (例如图片): copy(performance.getEntriesByType("resource"))
一个很大的 JSON blob, 使用: copy(JSON.parse(blob))
本地存储的转储: copy(localStorage)
Etc.

Browser debug ​

DOM 篇 ​

最近点击过的元素 ​

检查难以捉摸的元素 ​

监视聚焦的元素 ​

追踪篇 ​

为什么页面跳转了 ​

JS 断点 ​

堆栈信息 ​

控制台方法篇 ​

监听 CLass 调用 ​

Copy 方法 ​