Is there a way to emulate a focused page in Firefox similar to Chrome’s functionality?

Is there a way to emulate a focused page in Firefox similar to Chrome’s functionality, allowing developers to debug overlay elements and CSS pseudo-classes without losing focus when interacting with the browser's Developer Tools?

Unfortunately, Firefox does not currently have a direct equivalent to Chrome's "Emulate a focused page" feature in its Developer Tools. However, there are some workarounds you can use to achieve similar functionality:

Freeze JavaScript Execution: You can pause JavaScript execution in Firefox Developer Tools to keep focus styles active. Open the Debugger tool, keep focus in DevTools, and press F8 to pause JavaScript execution2. This will keep the focus styles active even when you interact with DevTools.

Force Pseudo-Classes: In Firefox Developer Tools, you can force the :focus and :hover pseudo-classes from the Styles panel. Open the Inspector tool, select the element you want to inspect, and in the Styles panel, click on the :hov button to force the pseudo-classes.

Use setTimeout: You can use JavaScript's setTimeout function to pause execution and inspect elements. For example, you can enter setTimeout(() => { debugger }, 3000) in the Console tool, and within 3 seconds, focus the element you want to inspect.

While these methods are not as seamless as Chrome's feature, they can help you debug overlay elements and CSS pseudo-classes without losing focus when interacting with the browser's Developer Tools.