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

Question

我试图找到哪个JavaScript将"display:inline"应用于图像元素.正如您在附图中看到的那样,"display:none"被覆盖但我不知道"display:inline"来自哪里:

源是一个包含许多.js文件的PHP文件.我尝试在Chrome开发者工具中使用断点,但在重新加载页面时丢失了它们.任何想法我如何发现应用"display:inline"的JS代码？

Answer 1

这适用于Chrome:

1. 打开页面
2. 右键单击该元素,然后选择"检查元素"
3. 在DOM视图中,右键单击DOM树中的元素
4. 在菜单的底部(对我来说)选择Break On>属性修改
   (稍后,当您要删除它时,它会在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>
   

   (通常我们不会script在HTML上乱丢标签,但这是一个调试会话.)

2. 打开开发工具

3. 打开页面; 它将在上述debugger声明中停止

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

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

6. 点击"恢复"箭头以继续操作

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

最后:如果元素是通过脚本代码添加的,那么你必须找到添加它的代码(blech)并在添加它之后设置一个断点,这样你就可以在上面的第二个列表中选择步骤#4.