查找应用 Javascript 的内联样式来调试 Javascript

Posted 2023-03-07

【中文标题】查找应用 Javascript 的内联样式来调试 Javascript

【英文标题】：Finding Javascript-Applied Inline Styles to Debug Javascript

【发布时间】：2015-06-21 20:52:48

【问题描述】：

场景：我正在接管一个网站，不幸的是，前 Web 开发人员将许多相关功能分散在许多长 JS 文件中。我很难找到内联 CSS 样式在 JS 中的来源，或者是什么函数将这种样式直接应用于元素。

问题：是否有一种方法可以对元素的内联样式进行逆向工程以查看它们的来源？

【问题讨论】：

我知道这就像要求看已经烤好的蛋糕的鸡蛋。但我希望有办法。

使用浏览器开发工具

如果使用 chrome，Ctrl+Alt+i（在 windows 上），选择要查找样式的元素，查看样式面板的确切来源

@LDMS 如果使用 Chrome，我如何使用检查器来做到这一点？

我会发一些截图

【参考方案1】：

一种可能的方法是在 Chrome 开发工具中添加一个 DOM 断点

为此，您必须在添加样式之前添加断点。这可能很棘手，但您可以在加载任何 javascript 之前强制断点，方法是在相关 html 元素之后立即添加以下内容

<script>debugger</script>

在下面的代码上试试

点击下方的“运行代码片段”按钮 打开开发工具 右击段落 选择 Break On... -> 属性修改 点击“添加边框颜色”按钮 瞧，您的调试器在修改样式的代码处停止

window.onload = function() 
    document.querySelector('button').addEventListener('click', function() 
         document.querySelector('p').style.border = '2px solid red';    
    );

<p> Sample Paragraph </p>
<button>Add border color</button>

【讨论】：

提示：在***节点上设置一个 Subtree Modifications DOM 断点，例如 body，并且只要修改其任何子节点，就会触发断点。

@KayceBasques 不确定这是个好主意，你会被断点淹没。对于这个问题，OP 想具体知道何时要修改特定元素。您的建议在其他情况下可能有效，但不适用于所问的这个问题。来自 OP an inline CSS style is coming from in the JS or what function is applying this style directly to the element.

@JuanMendes 对。取决于上下文。不过，当您没有修改很多节点时，它会很有用。

但是，如果元素在页面加载时“样式化”了怎么办？在这种情况下，所有 DOM 断点都会被重置...

@VadimAnisimov 您没有阅读完整的答案吗？ For that to work, you have to add the breakpoint before the style is added. That can be tricky, but you can force a breakpoint before loading any JavaScript by adding the following immediately after the HTML element in question <script>debugger</script>