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

Question

我正在尝试找到正在应用的JavaScript＆＃34; display：inline＆＃34;到图像元素。正如你所看到的附图所示，＆＃34;显示：无＆＃34;被覆盖但我不知道在哪里＆＃34;显示：内联＆＃34;来自：

源是一个包含许多.js文件的PHP文件。我尝试在Chrome开发者工具中使用断点，但在重新加载页面时丢失了它们。任何想法我如何发现应用的＃JS代码＆＃34;显示：内联＆＃34;？

Answer 1

这适用于Chrome：

1. 打开页面
2. 右键单击元素，然后选择“检查元素”
3. 在DOM视图中，右键单击DOM树中的元素
4. 在菜单底部（对我来说）选择 Break On＆gt;属性修改
   （稍后，当您要删除它时，它会在DOM断点下列出）
5. 如果修改已经发生，请点击刷新

当我这样做时，断点会停止元素上行设置.style.display = "inline"的代码（即使在页面刷新时）。

我的元素是由标记定义的，以后不是由代码添加的，所以如果稍后通过代码添加你的元素，那么DOM断点可能无法在页面刷新后继续存在。

如果由于某种原因DOM断点没有在页面刷新后存活，但该元素是由标记定义的，那么：

1. 修改页面标记，以便在元素的结束标记之后立即，您有<script>debugger;</script>，如下所示：

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

   （通常我们不会在我们的HTML上发现script个标签，但这是一个调试会话。）

2. 打开开发工具

3. 打开页面;它将停在<{p>

上面的debugger声明中

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

5. 右键单击它并选择 Break On＆gt;属性修改

6. 点击“恢复”箭头以继续

这应该让你及时设置DOM断点以捕获任何修改它的东西。

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