5 ms·

Show HN: Test your website on 180+ device viewports (with multi-device mode)

74 points by onassar 2y ago

Hey HN! We do a lot of frontend testing, and one thing we find frustrating is the limited tooling available to observe how a URL renders on different viewports/devices simultaneously. For example, we can use Chrome Inspector's "Device" previews, but we run into the following: - Chrome doesn't keep those devices/viewports up to date, and adding new ones is pretty annoying (we've open sourced our collection of 180+ viewports/dimensions under MIT). - You can’t see multiple viewports at once (and it’s cumbersome switching back and forth) - When you notice a problem, there's no simple way to deep-link someone on your team to take a look at that viewport (likely have to open a Jira/Linear with the specifics) - You can’t favourite viewports (for tracking the viewports specific to your project/client) We’ve built a product with the goal of addressing these limitations (among others), and would love to hear your feedback. Finally, feel free to use the open sourced data for your own projects :)

deleted 2y ago
[deleted]
jeswin 2y ago
After clicking on four screen sizes. > To continue enjoying full, unrestricted use, please sign up for updates. I don't want to give you my email. Why are you forcing me to?
- onassar 2y ago
  Whoops! That was only meant to stay in there for an unrelated feature. Removed :)
  - jeswin 2y ago
    Thanks. Very useful app.
    - onassar 2y ago
      Thanks! Let me know if you have any feedback :)
throwaway481 2y ago
Something doesnt seem right. This website loads fine on Chrome's inspector design previews, but looks broken here: https://viewport-tester.com/?url=https%3A%2F%2Fespncricinfo.com https://viewport-tester.com/?url=https%3A%2F%2Fespncricinfo....
- onassar 2y ago
  Great find! I'll create an issue for this one. I'm guessing it's related to the media queries that are taking place (or possibly, JS). Will track this one and comment on your reply again once it's fixed.
lbhdc 2y ago
I am getting a "Mobile version not available" modal that wont go away on its own on desktop. I can trick it by making my browser full screen, refreshing, then resizing it back to a half sized window.
- onassar 2y ago
  Ahh bug related to how we detect mobile. Would ya mind reaching out at hello@viewport-tester.com so I can get a few more details on this?
  - altdataseller 2y ago
    That’s not a bug. Thats a feature. When I request desktop view in my iphone, it should just treat me as a desktop user. I know its buggy. I know its a horrible experience but I just wanna see what its like. Now I wont even check it out because I didnt get that first impression on my phone. I will just forget it. Just my 2c
    - onassar 2y ago
      Really sorry to hear your first impression wasn't great @altdataseller It has to do with limitations around performance/memory. In some instances, loading large documents in multiple iframes at the same time could cause mobile safari to crash. We have plans on how to address this, but we thought that seeing as frontend responsive testing is most likely going to be done on a Desktop-like device, we would prevent possibly crashing your mobile browser and show you a video walkthrough of how it works on desktop. Happy to chat more about this offline if you want: hello@viewport-tester.com
- onassar 2y ago
  This should be fixed now.
  - lbhdc 2y ago
    Nice, that seems to be fixed now. Thanks! I noticed another possible bug. When trying it out on your website, it reports an "Invalid URL" error.
account42 2y ago
Targeting specific viewports is such a wrong way to go about it. Just resize your browser (or use the built in responsive design preview and freely resize that) to see if you reflow in a sane way. A single drag gets you hundreds if not thousands of different widths and aspect ratios tested.
- onassar 2y ago
  Thanks for the comment @account42 Agreed that a really-great responsive site is one where specific viewport dimensions don't matter. One thing we've run into (and want to test for) is users mentioning they're using a specific device and having issues. In those cases, it's helpful for us to really quickly choose from a list the device, and view the site. That way, we don't need to know the exact dimensions of the device, and can also test a possible fix for that device against other viewports.
Brajeshwar 2y ago
This reminded me of a very similar one but for the desktop from a few years back. Here you go; https://responsively.app https://responsively.app Source at https://github.com/responsively-org/responsively-app https://github.com/responsively-org/responsively-app
- onassar 2y ago
  Thanks for sharing this @Brajeshwar! This is a great tool and one we played with. One primary motivation for us, that caused us to build a web-based Responsive UI testing tool, was we wanted to be able to easily share issues/links with our team. It has it's limitations, but there's something super-handy about being able to test a URL, find an issue, and then link directly to that experience on Slack, Linear, Jira, etc.
- westurner 2y ago
  shot-scraper is a CLI tool for HTML render snapshots with --height --width and --scale-factor (--retina ~= --scale-factor=2.0) args, and a -j/--javascript option to run JS before taking the screenshot. There's not yet a way to resize the viewport and take another screenshot without loading the page again. There's not yet a way to store (h,w,scale,showbrowserchrome) configurations in a YAML file; but shot-scraper does work in GitHub Actions. Some web testing tools can record a video of a test session and save it if there's a test failure. E.g. Playwright defaults to an 800x600 viewport for test videos to retain-on-failure or record only if on-first-retry: https://playwright.dev/docs/videos https://playwright.dev/docs/videos Something like Cloudflare Browser Isolation - which splits the browser at an interface such that a Chrome browser server runs on a remote server and a Chrome client runs locally - might make it easier to compress recordings of n x test invocations (in isolated browsers or workers)
  - onassar 2y ago
    This is awesome: thanks for these resources! We'll take a look at Cloudflare Browser Isolation for sure. We've played with screenshot tools at specific viewport dimensions etc, but it's not often the right fit for when we're doing interactive frontend responsive updates. That aside though, the screenshot APIs could be a great integration to be able to download/save screenshots of specific viewports.
doctorpangloss 2y ago
Are the viewports sized with or without browser chrome, like the address bar and bottom bar?
- onassar 2y ago
  Great question! Right now, it doesn't take into consideration the browser or device address/bottom bars. We documented that here: https://github.com/bitcomplete/labs-delta-viewport-tester-viewports https://github.com/bitcomplete/labs-delta-viewport-tester-vi... (Caveat #1). We plan to address this in the future, but at the moment, Viewport Tester works in a similar way to Chrome's native Device Inspector: it resizes the viewport to the exact dimensions.
  - deleted 2y ago
    [deleted]
  - retrofuturism 2y ago
    If I could toggle between different states of the top/bottom bars I would use this tool every day.
    - onassar 2y ago
      Interesting: can you elaborate on this? Would love to better understand it, so we can consider adding this.
      - doctorpangloss 2y ago
        This is like that scene in Star Wars where Luke asks questions and Yoda just closes his eyes, fades away and dies. This is meant as a light hearted question: how could you have gotten this far making a viewport tester and the mobile website development journey without understanding and dealing with the most important and disruptive behavior in mobile viewports? Like I get that this is just a free project and it does what it does.
SBArbeit 2y ago
This is brilliant. Thanks for building it.
- onassar 2y ago
  Thanks! If you run into any issues or have any ideas, please share :)
clueless 2y ago
could this be a replacement for emailonacid's device viewport preview feature?
- onassar 2y ago
  This absolutely could work with HTML emails. One challenge with Email On Acid's is you do need to have an account with them, and it is limited to emails. We find most of our viewport testing is related to landing pages, etc.
ivanjermakov 2y ago
"Mobile version not available" popup that cannot be closed is such an irony. Next time, test your website with a viewport tester :)
- onassar 2y ago
  @ivanjermakov I know: it's a bummer that it doesn't work on mobile. We initially _did_ make it work (and responsive), but we ran into performance/memory issues. This is related to how much memory can be allocated on mobile devices, and since we open multiple iframes, it caused a lot of problems. We have a specific plan on making this work on mobile, but for this initial version, we decided that making it limited to Desktop was okay (since, realistically, people who are doing frontend responsive testing, are most likely doing it on a wider display).
kmfsousa 2y ago
Pretty cool stuff!
- onassar 2y ago
  Thanks @kmfsousa! Feel free to leave another comment if you have any ideas, or run into any issues :)
Dev_Olly 2y ago
Thank you for creating this! Impressed by multi-devices at once. Looking forward to seeing how this evolves!
- onassar 2y ago
  Thanks @Dev_Olly! Feel free to leave a comment if you run into any issues!
butz 2y ago
Getting some CORS errors. E.g. https://www.gnome.org/ https://www.gnome.org/ fails to load fontawesome icons. And there's an interesting bug where opening mobile menu loads a page.
- onassar 2y ago
  Oh CORS… we’re still figuring out an approach on how to handle static assets that have restrictions. Sorry about that, but I assure it’s one of the top things we are going to address.

74 points by onassar 2y ago

deleted 2y ago

[deleted]

jeswin 2y ago

After clicking on four screen sizes. > To continue enjoying full, unrestricted use, please sign up for updates. I don't want to give you my email. Why are you forcing me to?

onassar 2y ago
Whoops! That was only meant to stay in there for an unrelated feature. Removed :)
- jeswin 2y ago
  Thanks. Very useful app.
  - onassar 2y ago
    Thanks! Let me know if you have any feedback :)

throwaway481 2y ago

Something doesnt seem right. This website loads fine on Chrome's inspector design previews, but looks broken here: https://viewport-tester.com/?url=https%3A%2F%2Fespncricinfo.com https://viewport-tester.com/?url=https%3A%2F%2Fespncricinfo....

onassar 2y ago
Great find! I'll create an issue for this one. I'm guessing it's related to the media queries that are taking place (or possibly, JS). Will track this one and comment on your reply again once it's fixed.

lbhdc 2y ago

I am getting a "Mobile version not available" modal that wont go away on its own on desktop. I can trick it by making my browser full screen, refreshing, then resizing it back to a half sized window.

onassar 2y ago
Ahh bug related to how we detect mobile. Would ya mind reaching out at hello@viewport-tester.com so I can get a few more details on this?
- altdataseller 2y ago
  That’s not a bug. Thats a feature. When I request desktop view in my iphone, it should just treat me as a desktop user. I know its buggy. I know its a horrible experience but I just wanna see what its like. Now I wont even check it out because I didnt get that first impression on my phone. I will just forget it. Just my 2c
  - onassar 2y ago
    Really sorry to hear your first impression wasn't great @altdataseller It has to do with limitations around performance/memory. In some instances, loading large documents in multiple iframes at the same time could cause mobile safari to crash. We have plans on how to address this, but we thought that seeing as frontend responsive testing is most likely going to be done on a Desktop-like device, we would prevent possibly crashing your mobile browser and show you a video walkthrough of how it works on desktop. Happy to chat more about this offline if you want: hello@viewport-tester.com
onassar 2y ago
This should be fixed now.
- lbhdc 2y ago
  Nice, that seems to be fixed now. Thanks! I noticed another possible bug. When trying it out on your website, it reports an "Invalid URL" error.

account42 2y ago

Targeting specific viewports is such a wrong way to go about it. Just resize your browser (or use the built in responsive design preview and freely resize that) to see if you reflow in a sane way. A single drag gets you hundreds if not thousands of different widths and aspect ratios tested.

onassar 2y ago
Thanks for the comment @account42 Agreed that a really-great responsive site is one where specific viewport dimensions don't matter. One thing we've run into (and want to test for) is users mentioning they're using a specific device and having issues. In those cases, it's helpful for us to really quickly choose from a list the device, and view the site. That way, we don't need to know the exact dimensions of the device, and can also test a possible fix for that device against other viewports.

Brajeshwar 2y ago

This reminded me of a very similar one but for the desktop from a few years back. Here you go; https://responsively.app https://responsively.app Source at https://github.com/responsively-org/responsively-app https://github.com/responsively-org/responsively-app

onassar 2y ago
Thanks for sharing this @Brajeshwar! This is a great tool and one we played with. One primary motivation for us, that caused us to build a web-based Responsive UI testing tool, was we wanted to be able to easily share issues/links with our team. It has it's limitations, but there's something super-handy about being able to test a URL, find an issue, and then link directly to that experience on Slack, Linear, Jira, etc.
westurner 2y ago
shot-scraper is a CLI tool for HTML render snapshots with --height --width and --scale-factor (--retina ~= --scale-factor=2.0) args, and a -j/--javascript option to run JS before taking the screenshot. There's not yet a way to resize the viewport and take another screenshot without loading the page again. There's not yet a way to store (h,w,scale,showbrowserchrome) configurations in a YAML file; but shot-scraper does work in GitHub Actions. Some web testing tools can record a video of a test session and save it if there's a test failure. E.g. Playwright defaults to an 800x600 viewport for test videos to retain-on-failure or record only if on-first-retry: https://playwright.dev/docs/videos https://playwright.dev/docs/videos Something like Cloudflare Browser Isolation - which splits the browser at an interface such that a Chrome browser server runs on a remote server and a Chrome client runs locally - might make it easier to compress recordings of n x test invocations (in isolated browsers or workers)
- onassar 2y ago
  This is awesome: thanks for these resources! We'll take a look at Cloudflare Browser Isolation for sure. We've played with screenshot tools at specific viewport dimensions etc, but it's not often the right fit for when we're doing interactive frontend responsive updates. That aside though, the screenshot APIs could be a great integration to be able to download/save screenshots of specific viewports.

doctorpangloss 2y ago

Are the viewports sized with or without browser chrome, like the address bar and bottom bar?

onassar 2y ago
Great question! Right now, it doesn't take into consideration the browser or device address/bottom bars. We documented that here: https://github.com/bitcomplete/labs-delta-viewport-tester-viewports https://github.com/bitcomplete/labs-delta-viewport-tester-vi... (Caveat #1). We plan to address this in the future, but at the moment, Viewport Tester works in a similar way to Chrome's native Device Inspector: it resizes the viewport to the exact dimensions.
- deleted 2y ago
  [deleted]
- retrofuturism 2y ago
  If I could toggle between different states of the top/bottom bars I would use this tool every day.
  - onassar 2y ago
    Interesting: can you elaborate on this? Would love to better understand it, so we can consider adding this.
    - doctorpangloss 2y ago
      This is like that scene in Star Wars where Luke asks questions and Yoda just closes his eyes, fades away and dies. This is meant as a light hearted question: how could you have gotten this far making a viewport tester and the mobile website development journey without understanding and dealing with the most important and disruptive behavior in mobile viewports? Like I get that this is just a free project and it does what it does.

SBArbeit 2y ago

This is brilliant. Thanks for building it.

onassar 2y ago
Thanks! If you run into any issues or have any ideas, please share :)

clueless 2y ago

could this be a replacement for emailonacid's device viewport preview feature?

onassar 2y ago
This absolutely could work with HTML emails. One challenge with Email On Acid's is you do need to have an account with them, and it is limited to emails. We find most of our viewport testing is related to landing pages, etc.

ivanjermakov 2y ago

"Mobile version not available" popup that cannot be closed is such an irony. Next time, test your website with a viewport tester :)

onassar 2y ago
@ivanjermakov I know: it's a bummer that it doesn't work on mobile. We initially _did_ make it work (and responsive), but we ran into performance/memory issues. This is related to how much memory can be allocated on mobile devices, and since we open multiple iframes, it caused a lot of problems. We have a specific plan on making this work on mobile, but for this initial version, we decided that making it limited to Desktop was okay (since, realistically, people who are doing frontend responsive testing, are most likely doing it on a wider display).

kmfsousa 2y ago

Pretty cool stuff!

onassar 2y ago
Thanks @kmfsousa! Feel free to leave another comment if you have any ideas, or run into any issues :)

Dev_Olly 2y ago

Thank you for creating this! Impressed by multi-devices at once. Looking forward to seeing how this evolves!

onassar 2y ago
Thanks @Dev_Olly! Feel free to leave a comment if you run into any issues!

butz 2y ago

Getting some CORS errors. E.g. https://www.gnome.org/ https://www.gnome.org/ fails to load fontawesome icons. And there's an interesting bug where opening mobile menu loads a page.

onassar 2y ago
Oh CORS… we’re still figuring out an approach on how to handle static assets that have restrictions. Sorry about that, but I assure it’s one of the top things we are going to address.