在 Chrome 开发人员工具中同时查看和暂停 JS、CSS 和 HTML
Viewing and Pausing JS, CSS, and HTML at the Same Time in Chrome Developer Tools
我正在尝试查看 JS、CSS 和 HTML 对我正在使用的滑块中的三个不同 "states" 的作用：当 "active"class应用于一张幻灯片，"processing"class应用于一张幻灯片时的滑块，"active"class之后的滑块有从一张幻灯片移到另一张幻灯片。只需查看检查器中的元素，我就可以很容易地看到第一个和第三个状态的 CSS 和 HTML。我还可以通过在检查器中编辑 HTML 来人为地将 "processing" class 应用到幻灯片，以查看 CSS 应用于 class 的内容。但是，我希望能够在 JS 执行时暂停 JS、CSS 和 HTML（当它应用 "processing" class 时）以尝试获取了解哪些元素受到影响（除了幻灯片）。有没有办法做到这一点，并查看当时正在应用的给定 JS，以及当时正在应用的给定 CSS 和 HTMl？
谢谢！
您可以 'debug' JavaScript 在 来源 选项卡中，通过手动打开包含您要尝试的 JavaScript 的文件检查（在左侧栏中），或使用开发工具文件搜索来搜索它。
然后您可以将 断点 添加到您希望状态停止的行，例如在您的代码中您可以 select添加 processing class（在执行该行之前添加 class），或紧随其后的一个（当添加 class 作为添加class 已执行），然后您可以切换回 元素 选项卡以查看 HTML / CSS 并检查它们。
这里有一些关于这个主题的更详细的信息：https://developers.google.com/web/tools/chrome-devtools/javascript/
我正在尝试查看 JS、CSS 和 HTML 对我正在使用的滑块中的三个不同 "states" 的作用：当 "active"class应用于一张幻灯片，"processing"class应用于一张幻灯片时的滑块，"active"class之后的滑块有从一张幻灯片移到另一张幻灯片。只需查看检查器中的元素，我就可以很容易地看到第一个和第三个状态的 CSS 和 HTML。我还可以通过在检查器中编辑 HTML 来人为地将 "processing" class 应用到幻灯片，以查看 CSS 应用于 class 的内容。但是，我希望能够在 JS 执行时暂停 JS、CSS 和 HTML（当它应用 "processing" class 时）以尝试获取了解哪些元素受到影响（除了幻灯片）。有没有办法做到这一点，并查看当时正在应用的给定 JS，以及当时正在应用的给定 CSS 和 HTMl？
谢谢！
您可以 'debug' JavaScript 在 来源 选项卡中，通过手动打开包含您要尝试的 JavaScript 的文件检查（在左侧栏中），或使用开发工具文件搜索来搜索它。
然后您可以将 断点 添加到您希望状态停止的行，例如在您的代码中您可以 select添加 processing class（在执行该行之前添加 class），或紧随其后的一个（当添加 class 作为添加class 已执行），然后您可以切换回 元素 选项卡以查看 HTML / CSS 并检查它们。
这里有一些关于这个主题的更详细的信息：https://developers.google.com/web/tools/chrome-devtools/javascript/