查看哪个JavaScript文件正在将样式应用于元素

我试图找到哪个JavaScript将“display:inline”应用于图像元素。正如所附图片所示，“display:none”被覆盖，但我不知道“display:inline”来自何方：

---

源代码是一个包含许多.js文件的PHP文件。我曾尝试在我的Chrome开发者工具中使用断点，但在重新加载页面时将其丢失。你知道如何识别应用“display:inline”的JS代码吗？

这对我在Chrome中很有用：

打开页面

在图元上单击鼠标右键，然后选择“检查图元”

在DOM视图中，右键单击DOM树中的元素

在菜单底部（对我而言），选择属性修改中断（稍后，当您要删除此项时，它将列在DOM断点下）

如果修改已经发生，点击刷新

当我这样做时，断点会在元素上的行设置

.style.display=“inline”

时停止代码（即使在页面刷新时也是如此）

我的元素是由标记定义的，而不是稍后由代码添加的，因此如果您的元素是稍后由代码添加的，则DOM断点可能无法在页面刷新后继续存在

如果由于某种原因，DOM断点无法在页面刷新后生存，但元素是由标记定义的，则：

修改页面标记，以便在元素的结束标记之后立即，您有

调试器，如下所示：

<div>This is the element</div>
<script>debugger;</script>
<div>The next element...</div>

这是元素
调试器；
下一个元素。。。

（通常我们不会在HTML中到处乱扔
script
标记，但这是一个调试会话。）

开放式开发工具

打开页面；它将在上面的

调试器

语句中停止

切换到DOM视图并在那里找到元素（它就在底部附近）

右键单击它并选择断开>属性修改

点击“恢复”箭头，让事情继续进行

这应该可以让您及时设置DOM断点，以捕获任何正在修改它的内容

---

最后：如果元素是通过脚本代码添加的，那么您必须找到添加它的代码（blech），并在添加后设置一个断点，这样您就可以继续上面第二个列表中的步骤4。

它来自直接在元素的HTML中编写的

style

属性（即

）. 这就是

element.style

部分的意思。@ScottMarcus:这也是显示通过

element.style.display=“inline”

所做更改的地方。@Scott我也是这么想的，但元素中没有这样的内联样式。这就是为什么我相信它一定是通过JavaScript应用的。在原始

html

和

.js

文件加载后，元素中没有这种内联样式。如果您发布html和JavaScript，我们可能会以更好的方式帮助您。即使这不能解决OP的问题，这是一种调试技术，任何人都离不开。我已经试过了。问题是当我刷新页面时，Break On>attributemodifications会被取消选中，因此它不会像应该的那样中断。有什么办法可以解决这个问题吗？@GTSJoe：我想到了一个办法，我只是补充了一下；参见上面的新位。T.J。这允许我添加Break-On>Modifications，但当我切换到chromedev工具中的“Sources”选项卡时，它不会突出显示或显示正在进行更改的JS文件。它不是应该一步一步地进行，显示哪个代码正在生效吗？@GTSJoe:对我来说，它在修改时会中断，它会转到源代码并突出显示分配给

style

上属性的行。我担心你将不得不削减你拥有的东西，直到它足够小，可以共享。（到那时，您可能已经发现了问题。）