当我们想要查找并调试 JavaScript 中对 DOM 进行的更改时，通常有多种方法可以实现。在本文中，我们将探讨一些可用于查找 JavaScript 更改 DOM 的工具和技术，并介绍如何使用它们来优化开发过程。
1. 使用浏览器的调试功能
现代 Web 浏览器（如 Chrome、Firefox 和 Safari）都提供了强大的开发者工具，可以帮助我们调试 JavaScript 代码。其中最常用的是浏览器的 "Elements" 面板，这个面板可以显示当前页面上的 DOM 元素，包括它们的属性和样式。
在 "Elements" 面板中，我们可以使用 "Break on" 功能来设置断点，以便在特定的 DOM 更改时暂停代码执行。例如，我们可以使用 "Break on subtree modifications" 来暂停代码执行，当页面上的子树发生更改时，就会触发断点。
-- ----
----- ---------- - ---------------------------------
----- -------- - --- ---------------------------- -- -
---------------------------- -- -
---------------------
--
--
---------------------------- - ----------- ----- ---------- ----- -------- ---- --2. 使用 MutationObserver API
除了使用浏览器的调试功能外，我们还可以使用 JavaScript 自带的 MutationObserver API 来监听 DOM 更改。MutationObserver 可以在 DOM 更改时触发回调函数，我们可以在回调函数中查看更改的细节。
MutationObserver 构造函数接受两个参数：第一个是回调函数，第二个是配置对象。配置对象包括三个属性：attributes、childList 和 subtree，分别表示是否监视属性变化、子元素列表和整个子树的变化。
-- ----
----- ---------- - ---------------------------------
----- -------- - --- ---------------------------- -- -
---------------------------- -- -
---------------------
--
--
---------------------------- - ----------- ----- ---------- ----- -------- ---- --3. 使用 Chrome 扩展
除了上述内置的工具外，我们还可以通过使用浏览器扩展来查找 JavaScript 更改 DOM 的方法。例如，Chrome 浏览器提供了“Mutation Summary”扩展，它可以帮助我们捕获 DOM 更改并将其显示在侧边栏中。
Mutation Summary 可以很方便地帮助我们检查某些 JavaScript 代码对 DOM 进行了哪些修改，并且它还支持过滤器和高级搜索功能，使我们能够更快速地找到所需的信息。
结论
以上是一些常见的用于查找 JavaScript 改变 DOM 的方法和技术。当需要跟踪和调试 DOM 更改时，使用这些方法会非常有用。我们可以根据自己的需要选择最合适的方法，优化开发过程。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/26661