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 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 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.
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.
Is your question not answered?
Ask via Twitter, Slack or our contact form