javascript - 在 Chrome 开发者工具中同时查看和暂停 JS、CSS 和 HTML

标签 javascript html css google-chrome developer-tools

我正在尝试查看我正在使用的 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/

相关文章:

javascript - 如何在 Angular js 中使用 $scope 变量将类分配给元素

javascript - Google Analytics API - 跟踪子域

HTML css 下拉菜单 - 想要添加垂直线

html - 将 HTML 输入按钮的文本值包装在多行中

javascript - 在 Shiny 的可滚动框中自动调整绘图大小

javascript - Flickity 不隐藏在桌面上

javascript - 注销时php语句导致 "500 - Internal server error"

javascript - 如果某个字段具有值 jQuery,则从多个表单中序列化某个表单的表单数据

javascript - 异步 xml 加载并在 html 中分页显示

html - 带有居中 Logo 的多行导航栏