CSS 在 chrome 调试器/ DevTools 面板中冻结屏幕以进行弹出框检查？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17931571/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Freeze screen in chrome debugger / DevTools panel for popover inspection?
提问by Abram
I'm using the chrome inspector to try and analyze the z-indexof a twitter bootstrap popover, and finding it extremely frustrating...
我正在使用 chrome 检查器来尝试分析z-indextwitter bootstrap popover，发现它非常令人沮丧......
Is there a way to freeze the popover (while shown) so that I can assess and modify the associated CSS?
有没有办法冻结弹出窗口（显示时），以便我可以评估和修改相关联的 CSS？
Placing a fixed 'hover' on the associated link does not cause the popover to appear.
在关联链接上放置固定的“悬停”不会导致弹出窗口出现。
回答by Abram
Got it working. Here was my procedure:
得到它的工作。这是我的程序：
- Browse to the desired page
- Open the dev console - F12on Windows/Linux or option+ ?+ Jon macOS
- Select the
Sourcestab in chrome inspector - In the web browser window, hover over the desired element to initiate the popover
- Hit F8on Windows/Linux (or fn+ F8on macOS) while the popover is showing. If you have clicked anywhere on the actual page F8 will do nothing. Your last click needs to be somewhere in the inspector, like the sources tab
- Go to the
Elementstab in inspector - Find your popover (it will be nested in the trigger element's HTML)
- Have fun modifying the CSS
- 浏览到所需页面
- 打开开发者控制台-F12在Windows / Linux或option+ ?+J在MacOS
Sources在 Chrome 检查器中选择选项卡- 在 Web 浏览器窗口中，将鼠标悬停在所需元素上以启动弹出窗口
- 在弹出窗口显示时点击F8Windows/Linux（或fn+F8在 macOS 上）。如果您点击了实际页面上的任何地方，F8 将什么也不做。您的最后一次点击需要在检查器中的某个位置，例如“来源”选项卡
- 转到
Elements检查器中的选项卡 - 找到您的弹出框（它将嵌套在触发器元素的 HTML 中）
- 享受修改 CSS 的乐趣
回答by Brad Parks
To be able to inspect any element do the following. This should work even if it's hard to duplicate the hover state:
为了能够检查任何元素，请执行以下操作。即使很难复制悬停状态，这也应该有效：
Run the following javascript in the console. This will break into the debugger in 5 seconds.
setTimeout(function(){debugger;}, 5000)Go show your element (by hovering or however) and wait until Chrome breaks into the Debugger.
- Now click on the
Elementstab in the Chrome Inspector, and you can look for your element there. - You may also be able to click on the
Find Elementicon (looks like a magnifying glass) and Chrome will let you go and inspect and find your element on the page by right clicking on it, then choosingInspect Element
在控制台中运行以下 javascript。这将在 5 秒内进入调试器。
setTimeout(function(){debugger;}, 5000)显示您的元素（通过悬停或然而）并等待 Chrome 进入调试器。
- 现在单击
ElementsChrome Inspector 中的选项卡，您可以在那里查找您的元素。 - 您也可以单击该
Find Element图标（看起来像一个放大镜），Chrome 会让您通过右键单击它来检查并在页面上找到您的元素，然后选择Inspect Element
Note that this approach is a slight variation to this other great answeron this page.
请注意，此方法与此页面上的其他出色答案略有不同。
回答by frzsombor
UPDATE:As Brad Parks wrote in his comment there is a much better and easier solution with only one line of JS code:
更新：正如 Brad Parks 在他的评论中所写的那样，只有一行 JS 代码有一个更好、更简单的解决方案：
run
setTimeout(function(){debugger;},5000);, then go show your element and wait until it breaks into the Debugger
运行
setTimeout(function(){debugger;},5000);，然后显示您的元素并等待它进入调试器
Original answer:
原答案：
I just had the same problem, and I think I found an "universal" solution. (assuming the site uses jQuery)
Hope it helps someone!
我刚刚遇到了同样的问题，我想我找到了一个“通用”的解决方案。（假设该站点使用 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 Consoleview 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.
- 转到检查器中的元素选项卡
- 右键单击
<body>并单击“编辑为 HTML” - 添加以下元素，
<body>然后按 Ctrl+Enter：<div id="debugFreeze" data-rand="0"></div> - 右键单击这个新元素，然后选择“中断...”->“属性修改”
- 现在转到控制台视图并运行以下命令：
setTimeout(function(){$("#debugFreeze").attr("data-rand",Math.random())},5000); - 现在返回浏览器窗口，您有 5 秒钟的时间找到您的元素并单击/悬停/聚焦/等等，然后断点将被命中并且浏览器将“冻结”。
- 现在您可以安心地检查您的点击/悬停/聚焦/等元素。
Of course you can modify the javascript and the timing, if you get the idea.
当然，如果您有想法，您可以修改 javascript 和时间。
回答by Adrian Enriquez
- Right click anywhere inside Elements Tab
- Choose Breakon... >subtree modifications
- Trigger the popup you want to see and it will freeze if it see changes in the DOM
- If you still don't see the popup, click
Step over the next function(F10)button besideResume(F8)in the upper top center of the chrome until you freeze the popup you want to see.
- 右键单击“元素”选项卡内的任意位置
- 选择 Breakon... >subtree modifications
- 触发您想要查看的弹出窗口，如果它看到 DOM 中的更改，它将冻结
- 如果您仍然没有看到弹出窗口，请单击chrome 顶部中心
Step over the next function(F10)旁边Resume(F8)的按钮，直到您冻结要查看的弹出窗口。
回答by Leah Huyghe
I found that this works really well in Chrome.
我发现这在 Chrome 中非常有效。
Right click on the element that you'd like to inspect, then click Force Element State > Hover. Screenshot attached.
右键单击要检查的元素，然后单击强制元素状态 > 悬停。附上截图。
回答by Parker Lucenzo
Put this in console tab:
把它放在控制台选项卡中：
setTimeout(function(){debugger;}, 5000)
Then click on where to show the popup, 5s later - the screen will be frozen and have fun customize CSS.
然后单击显示弹出窗口的位置，5 秒后 - 屏幕将被冻结并享受自定义 CSS 的乐趣。
回答by Nadav B
My simple way:
我的简单方法：
setTimeout(function(){ debugger; }, 3000);
回答by Vincent Tang
I tried the other solutions here, they work but I'm lazy so this is my solution
我在这里尝试了其他解决方案，它们有效但我很懒所以这是我的解决方案
- hover over the element to trigger expanded state
- ctrl+shift+c
- hover over element again
- right click
- navigate to the debugger
- 将鼠标悬停在元素上以触发展开状态
- ctrl+ shift+c
- 再次悬停在元素上
- 右键点击
- 导航到调试器
by right clicking it no longer registers mouse event since a context menu pops up, so you can move the mouse away safely
右键单击它不再注册鼠标事件，因为会弹出上下文菜单，因此您可以安全地将鼠标移开
