查找 Javascript- 应用内联样式进行调试 Javascript

Question

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

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

Answer 1

一种可能的方法是在 Chrome Dev Tools

中添加一个 DOM 断点

要使其生效，您必须在添加样式之前添加断点。这可能很棘手，但您可以在加载任何 JavaScript 之前强制设置一个断点，方法是在有问题的 HTML 元素之后立即添加以下内容

<script>debugger</script>

试试下面的代码

点击下面的"Run Code Snippet"按钮
打开开发工具
右键单击该段落
Select Break On... -> 属性修改
单击 "Add border color" 按钮
瞧，你的调试器停在修改样式的代码处

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>

查找 Javascript- 应用内联样式进行调试 Javascript

Finding Javascript-Applied Inline Styles to Debug Javascript

html

javascript

css

debugging

google-chrome-devtools