Testing App in Different Screen Sizes?

I have been using Google Chrome’s Developer Tools by pressing Control + Shift + J, but it seems to lack consistency - lately I have had to refresh the screen multiple times to get it to render correctly and sometimes that doesn’t even work. It’s very frustrating because I can’t tell if it’s actually something I need to adjust in my app or something glitchy with Chrome’s developer tools. Has anyone else experienced this? Or do you know of any better tools to test screen size responsiveness besides Bubble’s responsive tool?

It hasn’t happened to me but you can try Responsively app to test responsive on different screen sizes on a single page. It let you access the dev tools as well

Hey! If you’re using Chrome, you can use this extension: https://chrome.google.com/webstore/detail/responsive-viewer/inmopeiepgfljkpkidclfgbgbmfcennb

It’ll let you interact with any of your bubble apps with many screen sizes like this:

Hope that works for you!

3 Likes

This is a great tool - thank you!!

My pleasure, enjoy!

Have you found it helpful to look at your app in every available simulated device, or is that overkill? My thought is to add each screen size to the emulator, regardless of the device, but I’m curious what your thoughts are.

Depends on what you’re working on. If it’s a mobile app, and therefore you need the page height to work perfectly (especially if you have a floating group footer), then yes, I’d check on every available device size.

For most use cases, if you make sure your page is responsive down to about ~320px width from the responsive tab of Bubble, you’ll be good.

Makes sense - thanks!