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

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

做者在Twitter上推荐咱们的中文翻译啦,截图在最后
git

译者在翻译前已经和做者沟通获得了翻译整个系列的受权。
为了避免影响你们阅读，受权的记录在这里
github

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

某些脚本会修改 DOM 的一部分，不肯定修改的是哪部分？甚至不肯定是何时修改的？添加一个 DOM 断点。你就能够监听到节点被添加或者移除，或属性被改变。浏览器

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

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

这个提示与 DevTools 并不彻底相关，但因为它是一个对前面提示的扩展，但愿你能原谅这些题外话。工具

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

可是此次是从你的 JavaScript 代码中。而且获得了良好的支持，即便是在 IE11 中。开发工具

当你想捕获已发送的 “ajax” 请求中的特定时刻，可使用 XHR/fetch breakpoint。这些只能在 Source 面板中设置。（我也一样但愿在 Network 面板中能够设置，但事实并不是如此）

您能够添加部分 URL 做为触发器或监放任何请求：

今天的分享就到这里~

惯例：若是你从这里学到了一些新东西

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

其余此系列的文章，立刻就会翻译出来，到时会贴出对应的连接在此处。

若是你对个人翻译表示确定，也能够关注我一波哦~ 顺便个人开源项目，求一波 star→ 看这里, 美丽的博客系统

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