Emulate a Focused Page

Here's a life changing Google Chrome DevTools trick if you're a Web Developer.[

Let's say you are working on debugging something that requires you to have an element focused, but when you click inside Dev Tools, what you had selected immediately loses focus. Super frustrating, right? Especially if it's an element you can't select in the DOM and use the "Force state" feature.

Well, there is a setting to prevent that from happening.

1. Open DevTools
2. Open the Command Menu*
3. Start typing "Rendering"
4. Select "Show Rendering"
5. In the new Panel, click the checkbox "Emulate a focused page"

This setting will make it so that if you click inside DevTools, it will keep whatever focus you had in the web page, just like you never left.

** Command+Shift+P (Mac) or Control+Shift+P (Windows)

Emulate a Focused Page

DevOps

SFCC Docs External Search

More from this blog

JS Libraries for Salesforce Commerce Cloud B2C

Sandbox Launchd

SFCC Docs External Search

Git Branch Workflows

Command Palette

DevOps

SFCC Docs External Search

More from this blog