Intro to panes
Each pane shows your page, and your interactions are synced between panes. Each pane can have a different width, height, zoom level and various other properties.
You can resize panes in horizontal, vertical and focus layout in three different ways:
- Dragging the right side, bottom side or bottom right corner. If you hold shift while resizing, the aspect ratio is maintained.
- Focus the width or height of a pane and fill in new values. Use the arrow keys to go up or down by 10.
- Select a new device preset by clicking a pane title and clicking another preset. You can also use the arrow keys to select one.
In the focus layout you can also use the Quick switcher to switch between the panes you have in the horizontal layout or by switching between the CSS breakpoints.
The pane header
All the information about a pane is shown in the pane header and here you can manage everything you do with it.
The top left of the pane header has a close button and arrows to re-order panes. These are only visible when you hover over a pane header.
The top right shows a list of icons. Here is what they do from left to right:
- Rulers, grids, columns and row overlays
- Overlay an image
- Debug tools
- Device emulation
- Devtools (not visible in legacy mode)
The bottom left of the pane header contains the title. Clicking on it to show a list of device presets. click on them, or use your arrow keys and enter to find and apply a new one. You can also give your panes a custom name.
Finally, the bottom right contains the size attributes of the pane. From left to right:
- Zoom Double click to fit the pane to the height of the application
- Unit Clicking on it switches from `pixels` to `ems` and back.
- Rotate Click it to rotate the device.
When you click into a pane, a blue bar at the top of the pane indicates that it is active. When a pane is active, keyboard input (like space and arrow keys) are sent to the pane rather than to the browser. To clear this, press
Each pane can show the web vitals gathered for that pane when "Show webvitals status" is checked in the Global display settings in the top right corner of the app.
When all your web vitals are in the "good" range, it will show a green circle. if there are web vitals that need improvement we show an orange square and show the web vital and its score. For web vitals that score "poor" we show a red triangle and similarly show the web vital and the score.
Hover over the icon to get an overview of all web vitals and their score.
At the bottom left of each panel we'll automatically show counters for console messages, warnings and errors so you always know what panes are sending console messages. Click these to open the console to inspect them further.
To hide them, go to the display settings in the top right corner and toggle "Show Console Stats per Pane".
Is your question not answered?
Ask via Twitter, Slack or our contact form