Polypane

Alternative browser modes

Polypane currently supports three different browser modes: Pane mode, which is the default view, Focus mode and Devtools mode. Each mode has a different function and which one to use depends on what you're currently working on. For best results, switch often!

You can quickly toggle between the default view and the last used mode (focus or devtools) using the Eye icon in the header. To select a specific alternative mode, right click the Eye icon.

Focus mode

Focus mode shows a single pane centered in view, letting you focus on a single viewport and quickly iterate and try out different sizes. By clicking on the Eye icon in the address bar, or with the cmd/ctrl m shortcut, you can switch to and from Focus mode.

To stress test a pane, you can use the "random pane" shortcut. cmd/ctrl shift n. The pane will automatically resize to a random width and height.

When you try to increase the pane beyond the available width, either by choosing a preset or by dragging, Polypane will automatically zoom out the pane so it fits.

Devtools mode

Devtools mode looks and works identical to Focus mode but it has an important difference: The pane is isolated and has its own dedicated devtools. This means that you can use it to run your lighthouse tests and use Devtools extensions like the React or Vue devtools on your page.

The Devtools pane resizes slightly slower than the pane in Focus mode because of this isolation, so we recommend you use it specifically when needing to use extensions or do audits.

Quick switcher

Shown in both Focus Mode and Devtools Mode.

The quick switcher shows a list of buttons at the top of focus and devtools mode, allowing you to quickly switch to any of the pane sizes from your default view, or, by clicking the toggle button, to any of the CSS breakpoints defined in the website you're currently viewing.

You can also use your left and right arrow keys to quickly switch between the sizes show in the Quick switcher.

Full mode

Full mode takes all the space available to show a website, similar to regular browsers. It supports devtools extensions and is a nice way to work on sites when you're not working on the responsive aspects, but for example on the JavaScript.

Is your question not answered?
Ask via Twitter, Slack or our contact form

Build high quality websites in half the time

Start your free 14 day trial
Polypane screenshot
By using our site you agree to our privacy policy and disclaimer