查找Javascript应用内联样式以调试Javascript

场景：我接管了一个网站的管理工作，不幸的是，这位前web开发人员将许多相关功能分散到了许多长JS文件中。我很难在JS中找到内联CSS样式的来源，也很难找到将此样式直接应用于元素的函数

---

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

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

为此，必须在添加样式之前添加断点。这可能会很棘手，但是您可以在加载任何JavaScript之前强制设置断点，方法是在所讨论的HTML元素之后立即添加以下内容

<script>debugger</script>

示例段落

添加边框颜色

我知道这就像要求查看已烘焙蛋糕的鸡蛋。但我希望有一种方法。使用浏览器开发工具如果使用chrome，Ctrl+Alt+I（在windows上），选择要查找的样式元素，查看样式面板的确切位置from@LDMS如果使用Chrome，我如何使用inspector来实现这一点？我将发布一些屏幕截图提示：在顶级节点上设置一个

子树修改

DOM断点，如

正文

，每当修改其子节点时，就会触发一个断点。@KayceBasques不确定这是一个好主意，你会被断点淹没。对于这个问题，OP特别想知道何时修改特定元素。您的建议可能在其他情况下有效，但不适用于所问的这个问题。从OP

中，一个内嵌CSS样式来自JS，或者是什么函数将此样式直接应用于元素。

@JuanMendes Right。取决于上下文。当你没有太多的节点被修改时，这是很有用的。但是，如果元素在页面的负载下被“样式化”，该怎么办呢？在这种情况下，所有DOM断点都将重置…@VadimAnisimov您没有阅读完整答案吗

要使其工作，必须在添加样式之前添加断点。这可能会很棘手，但您可以在加载任何JavaScript之前强制设置断点，方法是在相关HTML元素之后立即添加以下内容