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

我试图了解在我使用的滑块中，JS、CSS和HTML在三种不同状态下是什么：活动类应用于幻灯片时的滑块，处理类应用于幻灯片时的滑块，以及活动类从一个幻灯片移动到另一个幻灯片后的滑块。通过查看inspector中的元素，我可以很容易地看到第一个和第三个状态的CSS和HTML。我还可以通过在inspector中编辑HTML来人为地将processing类应用于幻灯片，以查看将什么CSS应用于该类。但是，我希望能够在JS应用处理类时暂停JS、CSS和HTML，以了解除了幻灯片之外还有哪些元素受到影响。有没有一种方法可以做到这一点，并查看当时正在应用的给定JS，以及当时正在应用的给定CSS和HTMl

---

谢谢

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

然后，您可以向希望状态停止的行添加断点，例如，在代码中，您可以选择在执行该行并添加该类之前添加处理类的行，或者在执行添加该类时直接添加该类之后的行，然后您可以切换回Elements选项卡以查看HTML/CSS并检查它们

以下是关于该主题的一些更详细的信息：