你可能不知道的 chrome 控制台：ajax xhr 断点

Question

你可能知道事件断点，那你知道 ajax xhr 断点吗？

xhr 断点

xhr：XMLHttpRequest。

先看图

通过监听 xhr 的断点，可以轻而易举的找到事件的触发点和调用堆栈，这一点和上一节说到的 DOM 断点几乎是一样的，只不过此处换成了 xhr 了而已。

步骤

打开 chrome 浏览器控制台：

1. 选择 source 面板
2. 点击 XHR Breakpoints 右侧的 +，添加断点规则

比如这里添加 baidu.com：

在输入框输入搜索词之后，触发了 XHR 断点，美化代码之后，可以很明显的看到，xhr 断点直接暂停在 xhr.send 这一步，通过上下文分析，可以看到当前请求的一些参数，如 a.uri。