开发者工具（在任何浏览器中）都是 CSS 开发人员的宝贵开发工具。如果您需要查看（并操作）任何给定元素的样式，只需点击几下即可进行快速检查。
右键单击某个内容并选择“检查元素”，或者打开开发者工具并使用其选择工具获取所需内容。
但是……有时在开发者工具中定位您需要定位的元素可能很困难或不可能。与开发者工具本身交互所需的 DOM 事件可能会干扰。
假设我在某个其他元素的 mouseenter 事件上插入了一个元素，然后在 mouseleave 上将其删除。
无论我如何尝试，我都无法定位该新添加的元素以进行检查。
Chrome 开发者工具可以模拟 :hover 样式，但这对我们在这里没有太大帮助。它不会触发 DOM 事件，而只是模拟 CSS 状态。
技巧是在您需要时触发调试器
当开发者工具打开时，debugger; 语句会冻结 DOM。不再触发任何事件，并且脚本执行完全暂停。
但是……您仍然可以使用开发者工具！
这是您选择其他情况下无法选择的元素并执行所需操作的机会。您可以将该 debugger; 语句直接放在代码中需要的位置（请记住，开发者工具必须打开才能使其工作）。或者（Tim Holman 教了我这个技巧）您可以使用 setTimeout() 直接从控制台触发它。
setTimeout(function() {
debugger;
}, 3000);
debugger; 将触发，您可以根据需要进行检查。我尝试过这种方法，它在 Chrome、Firefox、Edge 和 Safari 中都能正常工作，因此它是一个非常跨浏览器的开发者工具友好技巧。不过，只有 Chrome 和 Safari 允许您在调试器模式下选择元素，因此在 Edge 或 Firefox 中，您可能需要手动遍历“元素”选项卡以找到所需内容。
源代码面板上还有一个暂停按钮，标记为“暂停脚本执行”。其快捷键为 F8（在我的 Mac 上）……因此，如果您在任何情况下按下 F8，脚本执行也将暂停。
我也使用 F8。但它仅在正在执行脚本时有效，通常情况下，页面上发生的某些其他
setTimeout循环会执行脚本。你救了我……非常感谢
还可以通过检查元素突出显示父元素，然后右键单击 html 并选择“中断于”->“子树修改”。然后，如果任何内容发生更改，代码将暂停执行，您可以执行任何操作！
我们需要一个插件来触发真实的键盘事件，以及用于辅助功能测试的状态。例如，在悬停状态和焦点状态之间进行视觉比较。
我通常会在
mouseleave处理程序的开头设置断点（只需单击“源代码”面板中代码行的左侧边距）。与debugger调用具有相同的效果，但意味着您无需将其放入源代码中。不过，这是一个很好的提示。当触发更改的代码是第三方最小化脚本时，
setTimeout技巧是一个好技巧。您可以右键单击 body 元素，然后选择中断于…然后选择子树修改
代码片段的更简洁版本
您可以在开发者工具打开时右键单击，然后将鼠标移动到开发者工具区域，同时上下文菜单仍然打开。
这样做会欺骗浏览器，使其行为就像鼠标仍然位于右键单击时的相同位置一样。没有涉及任何额外的代码，并且只要您在上下文菜单关闭后没有将鼠标移回主视口区域，它就会一直保持这种行为。
无论如何，它在 Chrome 中就是这样工作的。我不确定其他浏览器。