背景
在前端开发中，当我们需要追踪 DOM 元素的样式或属性变化时，通常会使用 MutationObserver API 。然而，在某些情况下，MutationObserver 并不能很好地满足我们的需求，例如：
- 当元素的样式由于复杂动画效果而频繁变化时，MutationObserver 可能无法及时捕获所有变化。
- 当元素的属性被 JS 动态修改时，MutationObserver 也有可能无法捕获到变化。
这种情况下，我们可以考虑使用 Chrome 开发者工具提供的一项实验性功能——“突破属性变化”。
突破属性变化
“突破属性变化”是 Chrome 开发者工具中的一个实验性功能，其可以帮助我们更准确地追踪 DOM 元素的属性和样式变化。该功能已经内置在最新版的 Chrome 浏览器中，无需额外安装插件。
如何启用
要启用“突破属性变化”功能，我们可以按如下步骤操作：
- 在 Chrome 浏览器中打开需要调试的页面。
- 打开 Chrome 开发者工具（快捷键为 F12 或 Ctrl+Shift+I）。
- 选择“Elements”选项卡。
- 点击右上角的“...”按钮，选择“Settings”。
- 在“Preferences”选项卡中找到“DOM mutation breakpoints”。
- 勾选“Break on attribute modifications”和“Break on subtree modifications”选项。
如何使用
启用“突破属性变化”功能后，我们就可以开始调试 DOM 元素的属性和样式变化了。当元素的属性或样式发生变化时，开发者工具会自动中断代码执行，让我们有机会检查和调试变化了的属性和样式。
举个例子，如果我们有一个按钮元素，它有一个名为“disabled”的属性：
<button id="myButton" disabled>Click me</button>
我们可以使用如下 JS 代码来监听按钮的属性变化：
-- -------------------- ---- -------
----- -------- - --- ---------------------------- -- -
---------------------------- -- -
-- -------------- --- ------------ -- ---------------------- --- ----------- -
------------------- -------- ----- ------- -- ------------------------------
-
---
---
----------------------------------------------------- - ----------- ---- ---然而，当我们在 JavaScript 中使用 element.disabled = false 来动态修改按钮的 disabled 属性时，MutationObserver 并不会捕获到这个变化。这时，我们可以启用“突破属性变化”功能，在 Chrome 开发者工具中设置断点，以便更准确地调试属性变化：
启用“突破属性变化”功能后，每次 element.disabled = false 被调用时，代码都会在这个语句处中断执行，让我们可以检查调试此时的属性值：
总结
“突破属性变化”是一项实验性的功能，它可以帮助我们更准确地追踪 DOM 元素的属性和样式变化。在开发过程中，如果发现 MutationObserver 无法满足我们的需求时，我们可以尝试使用该功能来调试问题。同时，在使用该功能时需要注意，不要在生产环境下使用它，以免影响性能。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/10679
