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

Question

我正在尝试查找哪个 JavaScript 将“显示:内联”应用于图像元素。正如您在附图中看到的那样，“display: none”被覆盖了，但我不知道“display: inline”来自哪里:

源代码是一个包含许多 .js 文件的 PHP 文件。我曾尝试在我的 Chrome 开发人员工具中使用断点，但在我重新加载页面时它们丢失了。我有什么想法可以发现应用“显示:内联”的 JS 代码吗？

Answer 1

这在 Chrome 中对我有用:

1. 打开页面
2. 右键单击该元素并选择检查元素
3. 在 DOM View 中，右键单击 DOM 树中的元素
4. 在菜单底部(对我来说)选择Break On > attribute modifications
   (稍后，当您想要删除它时，它列在 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 标签，但这是一个调试 session 。)

2. 打开开发工具

3. 打开页面；它会停在 debugger 上以上声明

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

5. 右键单击它并选择Break On > attribute modifications

6. 点击 Resume 箭头让事情继续进行

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

最后:如果该元素是通过脚本代码添加的，您必须找到添加它的代码 (blech) 并在添加后立即设置断点，以便您可以继续上面第二个列表中的步骤 #4。