Categories
Aside Automated Testing

Inspecting Chrome elements requiring focus

In the web app I work on we have some elements which are only rendered when their parent element has focus (such as a select list with options) but the child elements disappear when focus is lost (I don’t think this is great behaviour but that’s another story).

I had trouble inspecting these elements in Chrome devtools since using the inspect tool would remove focus, and even using F8 to pause the debugger would also lose focus before it was paused.

I found this code snippet online that can pause the debugger 3 seconds after posting it in the devtools console – which is enough time to put the element in focus and at that point the DOM is paused or frozen so you can inspect the elements in devtools as much as you like.

The script is pretty simple – change the number of milliseconds to suit you but I’ve found 3000 ms is a good amount of time:

setTimeout(function() {
  debugger;
}, 3000);

9 replies on “Inspecting Chrome elements requiring focus”

Hi Alister, nice trick!

Thanks. I wonder though, if you change the property of unfocused element to be focused manually by editing HTML of that element than you wouldn’t need that trick in a first place? It depends on the framework, element can have additional class when focused or property.

For example in my tedious custom framework we have a table and cell when unfocused has class: “jsGridCell cen-foldout__wrap col-1”

When focused there is additional class: “cell-selected” so full class when select is: “jsGridCell cen-foldout__wrap col-1 cell-selected”

If I add “cell-selected” manually by editing class in dev tools It will be selected. Can this approach work in your case also?

Hi Alister, can you not right click the element in the elements panel and set the state (focus, active, hover etc.) or am I misunderstanding your need?

Thanks, I didn’t realise that but I tried it for our app and it doesn’t work. We have React/Material UI drop downs which render in a separate part of the DOM and these are triggered by a type-ahead field so you need to type-ahead and then inspect the results, but the results dissapear from the DOM the moment focus is lost. Forcing focus or hover on the parent doesn’t keep them there 🙁

This is awesome. I only learned about the debugger command recently and have been blown away with how useful it is, but this takes it to another level 🙂

Leave a Reply

Your email address will not be published.