我正在尝试查看我正在使用的 slider 中三种不同“状态”的 JS、CSS 和 HTML 是什么:“事件”类应用于幻灯片时的 slider ,当“事件”类应用于幻灯片时的 slider “处理”类应用于幻灯片,“事件”类之后的 slider 已从一张幻灯片移动到另一张幻灯片。只需查看检查器中的元素,我就可以轻松地看到第一状态和第三状态的 CSS 和 HTML。我还可以通过在检查器中编辑 HTML 来人为地将“处理”类应用于幻灯片,以查看哪些 CSS 正在应用于该类。但是,我希望能够在 JS 执行时(当它应用“处理”类时)暂停 JS、CSS 和 HTML,以尝试了解哪些元素受到影响(除了幻灯片).有没有办法做到这一点,并查看当时正在应用的给定 JS,以及当时正在应用的给定 CSS 和 HTMl?
谢谢!
最佳答案
您可以在 Sources 选项卡中“调试”JavaScript,方法是手动打开包含您要检查的 JavaScript 的文件(在左侧栏中),或者使用开发工具文件搜索。
然后您可以将断点添加到您希望状态停止的行,例如在您的代码中您可以选择 processing
类所在的行被添加(在执行该行之前添加类),或者紧接着(当类被添加时,因为类的添加已经被执行),然后你可以切换回 Elements 选项卡以查看 HTML/CSS 并检查它们。
这里有一些关于这个主题的更详细的信息:https://developers.google.com/web/tools/chrome-devtools/javascript/
关于javascript - 在 Chrome 开发者工具中同时查看和暂停 JS、CSS 和 HTML,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/46577619/