【译】你不知道的 Chrome 调试工具技巧第十六天：断点

本文是作者 Tomek Sułkowski 发布在 medium 上的一个系列。据作者透露一共有 24 篇，一直更新到 12 月 24 日
版权归原作者所有。

作者在Twitter上推荐我们的中文翻译啦,截图在最后

译者在翻译前已经和作者沟通得到了翻译整个系列的授权。
为了不影响大家阅读，授权的记录在这里

在马上就要迎来假期的这 24 天里，我将会发布一系列短篇的文章，关于如何更加有意思的使用开发工具，昨天我们有一些 tips 客人，今天我们来看看触发断点的一些方法。

某些脚本会修改 DOM 的一部分，而你不确定修改的是那部分，或者不确定是什么时候修改的？添加一个 DOM 断点。你可以监听到节点被添加或者移除，或者它的属性被改变。

翻译一下图中的内容

在页面重新重新加载时会记住断点。当你设置了一个，或者好几个断点的时候，你可能忘记它们所附的位置。怎么找它们呢？为了达到这个目的，Elements 视图中有视觉提示，Sources 中也有专用列表。

不要担心你添加了断点的元素被隐藏在一些折叠起来的父级元素中 - 他们会在 Element 中用高亮展示出来。

这个提示与 DevTools 并不完全相关，但由于它是对前一个提示的一个很好的扩展，我希望你能原谅我这个题外话。

无论如何，你知道 MutationObserver 吗？它只是浏览器API的一部分，它允许像前面提到的 DOM 断点一样监听 childList , attributes 和 subtree 类似的更改

但是这次是从你的 JavaScript 代码中。并且得到了良好的支持，即使是在 IE11 中。

当你想要对发送“ajax”请求中的特定时刻进行捕获，你可以使用 XHR/fetch breakpoint。这些只能在 Source 面板中设置。（我也同样希望在 Network 面板中可以设置，但事实并非如此）

您可以添加部分URL作为触发器或监听任何请求：

翻译一下图中的内容

在源面板中，点击这里，添加一个请求的断点

今天的分享就到这里~

惯例：如果你从这里学到了一些新东西

→ 你可以点个赞再走嘛~
→ 关注我：Twitter：Tomek Sułkowski

其他此系列的文章，马上就会翻译出来，到时会贴出对应的链接在此处。

如果你对我的翻译表示肯定，也可以关注我一波哦~ 顺便我的开源项目，求一波 star→ 看这里, 美丽的博客系统

【译】你不知道的 Chrome 调试工具技巧 第十六天：断点