JavaScript 执行时间线

Question

我正在处理一个包含大量代码的项目。当页面完全加载时，javascript 会删除一个 CSS 类。但我根本找不到负责该行的行，我什至不确定哪个 javascript 文件包含该行。

是否有可能在时间轴上查看在特定时间调用了什么 javascript 函数？

当我使用 google chrome 的 devtools 的“性能”选项卡时，我可以看到在删除 CSS 类时，jQuery 已完全加载。但是我怎么知道是哪条线路负责呢？

或者，有没有办法查看哪些 javascript 函数与 DOM 元素交互？

谢谢！

Answer 1

在 Chrome 中，您可以使用 DOM 断点来查找：

1. 右键单击要从中删除类的元素，然后从菜单中选择检查。这将打开包含该元素的元素面板。
2. 右键单击“元素”面板中的元素并选择Break on > 属性修改。

重新加载页面（devtools 仍然打开）并等待 DOM 断点被命中。它将切换到 Sources 选项卡并突出显示删除类的语句。

稍后当您想要删除 DOM 断点时，您可以在 Elements 选项卡上找到它：在右侧窗格中，选择 DOM Breakpoints（您可能需要使用 > > 按钮查看更多选择，如果右侧窗格足够窄）。它有一个 DOM 断点列表，您可以通过右键菜单删除。