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

Question

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

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

Answer 1

一种可能的方法是在Chrome Dev Tools中添加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>