css 在chrome调试器/ DevTools面板中冻结屏幕以进行弹出检查?

vktxenjb  于 2022-12-27  发布在  其他
关注(0)|答案(9)|浏览(278)

我正在使用chrome检查器来尝试分析twitter Bootstrap 弹出的z-index,发现它非常令人沮丧...
有没有办法冻结弹出窗口(显示时),以便我可以评估和修改相关的CSS?
在关联链接上放置固定的“悬停”不会导致弹出窗口出现。

dm7nw8vv

dm7nw8vv1#

成功了,我的步骤是这样的

1.浏览到所需页面
1.打开开发控制台- F12(Windows/Linux)或Option ++ J(macOS)
1.在镀 chrome 检查器中选择Sources标签
1.在Web浏览器窗口中,将鼠标悬停在所需元素上以启动弹出窗口
1.在弹出窗口显示时按F8(Windows/Linux)(或fn + F8(macOS))。* 如果您点按了实际页面上的任何位置,F8将不起任何作用。您的最后一次点按需要在检查器中的某个位置,如源标签 *
1.转到检查器中的Elements选项卡
1.查找弹出窗口(它将嵌套在触发器元素的HTML中)
1.享受修改CSS的乐趣

b0zn9rqh

b0zn9rqh2#

为了能够检查任何元素,请执行以下操作。即使很难复制悬停状态,这也应该可以工作:

  • 在控制台中运行下面的javascript。这将在5秒内进入调试器。

第一个月

  • 去显示你的元素(通过悬停或其他方式),等待Chrome进入调试器。
  • 现在点击Chrome Inspector中的Elements选项卡,您可以在那里查找您的元素。
  • 你也可以点击Find Element图标(看起来像一个放大镜),Chrome会让你在页面上检查并找到你的元素,方法是右键点击它,然后选择Inspect Element

请注意,此方法与本页上的其他great answer略有不同。

tf7tbtn2

tf7tbtn23#

    • 更新:**正如Brad Parks在他的评论中所写的,有一个更好更简单的解决方案,只需要一行JS代码:

运行setTimeout(function(){debugger;},5000);,然后显示您的元素并等待它进入调试器
原答复:
我也遇到了同样的问题,我想我找到了一个"通用"的解决方案。(假设站点使用jQuery)
1.转到检查器中的元素选项卡
1.右键单击<body>,然后单击"* 编辑为HTML *"
1.在<body>后面添加以下元素,然后按Ctrl + Enter:
<div id="debugFreeze" data-rand="0"></div>
1.右键单击此新元素,然后选择 "Break on ..."-〉"Attributes modifies"
1.现在转到 * 控制台 * 视图并运行以下命令:
setTimeout(function(){$("#debugFreeze").attr("data-rand",Math.random())},5000);
1.现在回到浏览器窗口,你有5秒钟的时间找到你的元素并点击/悬停/聚焦/等它,在断点被击中之前,浏览器将"冻结"。
1.现在你可以平静地检查你点击/悬停/聚焦的元素了。
当然你可以修改javascript和时间,如果你明白的话。

kdfy810k

kdfy810k4#

1.右键单击元素选项卡内的任意位置
1.选择“中断...”〉“子树修改
1.触发您想要看到的弹出窗口,如果它看到DOM中的更改,它将冻结
1.如果您仍然看不到弹出窗口,请单击chrome左上角中心Resume(F8)旁边的Step over the next function(F10)按钮,直到冻结您想要看到的弹出窗口。

hfwmuf9z

hfwmuf9z5#

我发现这在Chrome中效果真的很好。
右键点击你想要检查的元素,然后点击强制元素状态〉悬停。

mm9b1k5b

mm9b1k5b6#

我在这里尝试了其他解决方案,它们都有效,但我很懒,所以这是我的解决方案
1.将鼠标悬停在元素上以触发展开状态

  1. Ctrl + Shift + C
    1.再次将鼠标悬停在元素上
    1.右击
    1.定位到调试器
    通过右键单击它不再注册鼠标事件,因为上下文菜单弹出,所以您可以安全地将鼠标移开
sh7euo9m

sh7euo9m7#

我最近遇到了这个问题,按F8解决方案对我不起作用。下面是我冻结悬停元素的方法。
1.在Chrome中右键单击带有鼠标悬停的标签,然后在Elements选项卡中选择它。
1.在右侧窗口中,选择Event Listeners
1.展开mouseout事件
1.单击此处显示的remove按钮。
1.现在,如果你把鼠标悬停在你的元素上,它会触发mouseover事件,但当你的光标离开元素时,它不能触发mouseout事件,因为我们删除了它。
希望这能有所帮助。

bbuxkriu

bbuxkriu8#

没有一个解决方案为我工作,只有一个描述:https://developer.chrome.com/docs/devtools/javascript/disable/
对于Linux(对于Mac,使用命令而不是控制):

  • 打开开发者工具(ctrl + shift + I)
  • 运行命令窗口(ctrl + shift + P)
  • 开始键入javascript并选择禁用javascript

说明截图:

wz1wpwve

wz1wpwve9#

以前我的Chrome冻结功能是不按F8快捷键工作,我用这个走动,后藤源选项卡,只是点击暂停/播放脚本执行按钮,在源选项卡中的Chrome开发工具的右面板,我的快捷键得到修复,并从那时开始工作,真的很感谢,修复了我的问题

相关问题