冻结屏幕在chrome调试器/ DevTools面板弹出窗口检查?

我正在使用chrome检查器尝试分析twitter引导弹窗的z-index，并发现这非常令人沮丧……

是否有一种方法来冻结弹窗(而显示)，以便我可以评估和修改相关的CSS?

在相关链接上放置固定的“悬停”不会导致弹出窗口出现。

当前回答

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

运行setTimeout(function(){debugger;}，5000);，然后显示你的元素并等待它进入调试器

最初的回答:

我只是遇到了同样的问题，我想我找到了一个“通用”的解决方案。(假设站点使用jQuery)

Go to elements tab in inspector Right click <body> and click "Edit as HTML" Add the following element after <body> then press Ctrl+Enter: <div id="debugFreeze" data-rand="0"></div> Right click this new element, and select "Break on..." -> "Attributes modifications" Now go to Console view and run the following command: setTimeout(function(){$("#debugFreeze").attr("data-rand",Math.random())},5000); Now go back to the browser window and you have 5 seconds to find your element and click/hover/focus/etc it, before the breakpoint will be hit and the browser will "freeze". Now you can inspect your clicked/hovered/focused/etc element in peace.

当然，你可以修改javascript和时间，如果你明白了。

2014-04-16 00:12:37

其他回答

我试过其他的解，它们都有效，但我很懒，所以这就是我的解

将鼠标悬停在元素上以触发展开状态 ctrl + shift + c 再次悬停在元素上右击导航到调试器

通过右键点击它不再注册鼠标事件，因为一个上下文菜单弹出，所以你可以安全地移动鼠标

2018-06-22 19:46:15

没有一个解决方案对我有效，只有如下所述: https://developer.chrome.com/docs/devtools/javascript/disable/

对于Linux (Mac使用命令代替控制):

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

说明截图:

2022-06-16 08:44:29