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

【问题标题】：Viewing and Pausing JS, CSS, and HTML at the Same Time in Chrome Developer Tools在 Chrome 开发者工具中同时查看和暂停 JS、CSS 和 HTML
【发布时间】：2017-10-05 03:58:03
【问题描述】：

我正在尝试查看我正在使用的滑块中三种不同“状态”的 JS、CSS 和 HTML：当“活动”类应用于幻灯片时的滑块、当“处理”类应用于幻灯片，并且“活动”类之后的滑块已从一张幻灯片移动到另一张幻灯片。只需查看检查器中的元素，我就可以轻松查看第一个和第三个状态的 CSS 和 HTML。我还可以通过在检查器中编辑 HTML 来人为地将“处理”类应用于幻灯片，以查看哪些 CSS 应用于该类。但是，我希望能够在 JS 执行时暂停 JS、CSS 和 HTML（当它应用“处理”类时）以尝试了解哪些元素受到影响（除了幻灯片)。有没有办法做到这一点，并查看当时正在应用的给定 JS，以及当时正在应用的给定 CSS 和 HTMl？

谢谢！

【问题讨论】：

标签： javascript html css google-chrome developer-tools

【解决方案1】：

您可以在 Sources 选项卡中“调试”JavaScript，方法是手动打开包含您尝试检查的 JavaScript 的文件（在左侧列中），或使用开发工具文件搜索。

然后，您可以将 breakpoint 添加到您希望状态停止的行，例如，在您的代码中，您可以选择添加 processing 类的行（在行并添加类），或紧随其后的那一行（当类的添加已执行，类的添加已被添加时），然后您可以切换回Elements选项卡查看 HTML / CSS 并检查它们。

以下是有关该主题的更多详细信息：https://developers.google.com/web/tools/chrome-devtools/javascript/

【讨论】：