Emulate a Focused Page

Emulate a Focused Page

Google Chrome DevTools

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)