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

Question

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

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

Answer 1

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

要使其正常工作，您必须在添加样式之前添加断点。这可能很棘手，但您可以在加载任何JavaScript之前通过在有问题的HTML元素之后立即添加以下内容来强制断点

<script>debugger</script>

尝试使用以下代码

• 点击
下方的“运行代码段”按钮
• 打开开发工具
• 右键单击段落
• 选择Break On ... - ＆gt;属性修改
• 点击“添加边框颜色”按钮
• Voila，您的调试器会停止修改样式的代码

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>