Web development nowadays is a lot different than what it was a decade ago. Developers have to take into account a lot of factors, ranging from the plethora of devices (with different screen sizes) their website is accessed from, to multiple accessibility aspects that have to be taken into account.
That’s exactly why Polypane can prove such a life-saver. Polypane is probably the closest rival of Sizzy (a very similar product) and is without a doubt one of the best products for developing and testing websites and web apps mainly due to the plethora of powerful dev tools it provides.
These include over 20 debugging tools, multiple synced viewports, full-height screenshots, device and media query emulation, and super useful built-in live-reloading, just to name a few.
First and foremost, it’s worth noting that Polypane is an Electron-based application with the Chromium browser built-in. Because it uses Chromium as its foundation, you’re entitled to all of Chrome’s dev tools for website inspection and debugging with support for some of the most popular DevTools extensions as well (React DevTools, Vue.js DevTools, Redux DevTools, Angular, Svelte, and so forth).
The app runs on Windows, macOS, and Linux (only .deb and .AppImage), and it universally supports Intel, Apple Silicon, and even ARM processors. The app runs multiple Chromium instances for the website you’re currently testing, allowing you to configure them with different emulation settings.
Polypane is also quite good at emulating other browsers like Safari for iOS or Firefox, even though, truth be told, Polypane is not particularly designed to be used for cross-browser debugging (even though it does cover some of the most popular browsers out there). In short, if you’re still required to fire up the specific browsers and test the website if they’re not Chromium-based.
Since it’s a Chromium-based browser, it shouldn’t come as much of a surprise that when launching the app it looks like, well, a stripped-down Chrome browser. There are, of course, a lot of changes, the most obvious one is that the Preferences/Settings section found in Chromium is not there.
Each viewport has its own set of dedicated buttons above which makes rearranging the panes and viewport a simple task. The app also allows zooming of the entire workspace so you can get a much better comparison view of your project.
An area where Polypane really shines is the plethora of device presets it offers. The pane presets are stacked in four different categories: Mobile, Tablet, Desktop, and Other. We won’t list all of them here, but just know that it contains a wide range of common devices, from Android phones and tablets and iOS devices to smart watches, desktops, and TV sizes.
What’s even better is that Polypane also allows you to add your own custom dimensions.
One of the things that makes Polypane a joy to work with is the fact that it automatically syncs all your interactions. That means that all your keyboard and mouse interactions are perfectly and smoothly synced between all viewports. The same goes for other actions such as scrolling, hovering, clicking, and form inputs.
One thing that Polypane doesn’t excel at is something called “scroll to anchor on refresh,” which is somewhat strange, especially considering Chromium itself is quite good at remembering your vertical scroll position on soft reload.
Device emulation is another one of Polypane’s strong points. You can add touch emulation, switch between light and dark modes on the fly, send custom headers to each pane, and even enable various network conditions to make your tests as thorough as possible.
Last but not least, let’s talk about the A11Y tools that Polypane packs. You’re provided with everything from color blindness simulators to network throttling, horizontal overflow detection, to color contrast suggestions. In short, you get over 80 different A11y tests, 8 of which are for color blindness simulation.
Polypane might not seem like a necessity, and that, of course, is your decision to make. However, considering the impressive number of tools, the very clever workspace manipulation, and the staggering number of accessibility tests Polypane provides, it’s really difficult to dismiss its value.
A value that isn’t only quantified in the quality of the website, but also in how much time you actually save while using Polypane.
