How to run debugger on mobile view?

I have an app with top nav on large screens and bottom nav on small screens. Top nav is working. Bottom nav isn’t.

I’d like to debug bottom nav but when I go into chrome dev tools and select a mobile device screen the debugger doesn’t fit on screen. Looks like this:

How do I figure out what’s going wrong with my mobile-only elements and their associated workflows?

I still haven’t figured out if you can run debugger on a mobile size screen but I was able to figure out a workaround: just make your mobile element temporarily visible on larger screens.

Normal - Mobile Only:
image

Temporary - Debugging:
image

For anyone looking for this, here’s a workaround I found.
With Debug mode on
In Chrome > View > Developer > Developer Tools
In Elements tab > scroll down until you find section


Then edit the Styles
Deselect display: flex on the top bar

Deselect overflow on the workflow-vert-flex

… or any other section you need changing.

3 Likes

Interesting solution, the debugger-canvas doesn’t exist for a mobile-mode of a browser, only the desktop-mode. Any suggestions?

1 Like