基本上我正在寻找以下两种方法之一:
- 在不移动鼠标的情况下切换到Firebug控制台(也许使用键盘快捷键?但我无法弄清如何仅使用键盘来使用Firebug)
- 具有“冻结”页面的功能,使您的鼠标移动不再触发任何事件。
HTML工具提示(Firebug)
在检查器或DOM中选择要操作的元素。转到Firebug的“Styles”选项卡,单击标签上的小箭头并选择“:hover”(也可用“:active”)。状态将保持为“hover”,您可以选择其他元素使它们悬停。
HTML工具提示(Firefox开发者工具)
单击按钮以查看三个复选框,您可以使用它们为所选择的元素设置:hover、:active和:focus伪类。
此功能还可以从HTML视图中的弹出菜单中访问。
如果为节点设置了这些伪类之一,则标记视图中呈现所有应用了该伪类的节点旁边会出现一个橙色点:
JQuery工具提示
打开控制台并输入jQuery('.css-class').trigger('mouseover')
常规JavaScript工具提示
打开控制台并输入document.getElementById('yourId').dispatchEvent(new Event('mouseover'));
:active
或:hover
状态。
您还可以设置计时器来启动调试器。在控制台中输入以下命令:
setTimeout(function(){ debugger; }, 10000);
这将为您提供10秒钟使用鼠标并使页面呈现您想要的方式以便检查它。 当调试器启动时,页面将会冻结,并且您将能够在开发者工具选项卡中探索元素,而DOM不会改变或响应任何额外的鼠标事件。
我认为你也可以这样做:
选择Firebug的检查模式
将鼠标悬停在弹出要检查的元素上,然后使用Tab键多次使Firebug处于活动状态(我发现很难看到Firebug是活动组件,但是通过不断尝试,当我看到Firefox的查找工具栏处于活动状态时,我会按下Shift+Tab键两次进入Firebug。)
然后,我会使用左/右箭头键来展开/收缩元素,使用上/下箭头键在Firebug控制台中进行导航。
无论如何,这对我起作用了!
为了 Jquery UI 工具提示,我最终设置了一个长延迟来隐藏元素,这样在它被删除之前我就有时间来检查它。例如,我使用以下代码来检查工具提示:
$( document ).tooltip({ hide: {duration: 100000 } });
取而代之:
$( document ).tooltip();
对于Bootstrap工具提示:
$(document ).tooltip({delay: { show: 0, hide: 100000 }});
我想分享一下我的首选方法。将这个小代码片段放入你的控制台中,可以让你随时使用简单的按键(例如本例中使用的F8键)启动调试器。
document.addEventListener("keydown", (event) => {if (event.key == 'F8') {debugger}});
如果您喜欢,也可以使用密钥代码:
document.addEventListener("keydown", (event) => {if (event.keyCode == 119) {debugger}});
:hover
可能很好,如果你只想检查一些CSS代码,但如果你想要检查的内容使用JavaScript进行更改,则无法工作。
jQuery('.css-class').trigger('mouseover')
,无需进行任何修改。 - machineaddict