Reach-ui: Trick to debugging CSS of open menu?

[hedgerh]

What's the best way to inspecting the CSS styles of the open menu/menu items in Chrome? Every time I click on the inspector, the menu closes. I ended up pulling down reach, changing the isOpen state, removing the click listeners, rebuilding, and linking locally.

Am I missing something here? Is there an easier way to do this? Thanks.

[jakierice]

First click the button to open the menu, and then right click -> inspect element on the MenuButton while the menu is open.

[hedgerh]

Ah, thank you! That didn't occur to me. I was having a rough time trying to inspect the MenuList/MenuItem.

[jakierice]

Glad I could help!

[lee-reinhardt]

I went through this exact same conundrum yesterday. I also ended up commenting out the blur handler in the source while I styled it.

Usually interacting with the devtools "preserves" the UI, but it was closing super aggressively no matter what I did. /shrug

[nathanforce]

You can also use F8 to halt execution and the page will be frozen in the current state.

Another option is to add an HTML breakpoint on subtree modifications

[hedgerh]

This seems to be a common enough problem that it should probably be formally documented, unless there is some way to fix this. I imagine that there may not be..

[ryanflorence]

Would be interesting to have a "how to debug web applications" page, but none of this is really unique to React or Reach UI :)

[qoalu]

Chrome crashes when doing this trying to click on the MenuItem:

jakierice's solution works and seems to disable focus behaviour going from the page to the inspector and closing the dropdown