RibbonThe best window layout for web development on a Mac
Web work has four windows that want to be seen together: the editor, the browser preview, DevTools, and a terminal running the dev server. On a big monitor, put the editor and the preview side by side and dock DevTools inside the browser. On a MacBook, there isn't room for four, so give the editor most of the width and keep the preview one keystroke away.
The four windows
| Window | Needs to be visible when |
|---|---|
| Editor | Always |
| Browser preview | After each save, to see the change |
| DevTools | Debugging layout, network or console errors |
| Terminal (dev server, tests, git) | When something fails, or to run a command |
The terminal can usually live inside the editor (VS Code's integrated terminal, ⌃`), which takes it off the list of windows to arrange.
Where to dock DevTools
DevTools can dock to the right, the bottom, or open as a separate window (the ⋮ menu in Chrome's DevTools, Dock side; the equivalent options in Safari's Web Inspector and Firefox).
- Docked right shrinks the page's viewport, which is useful for testing narrow layouts and annoying otherwise.
- Docked bottom keeps the page's width and suits a tall monitor.
- Separate window gives you a fifth window to arrange, but lets the preview stay full width. Worth it with a window manager, not without one.
On a big monitor
Editor on the left half, browser on the right half, DevTools docked at the bottom of the browser. On macOS 15 and later that's Fn⌃← for the editor and Fn⌃→ for the browser. On an ultrawide, three columns (editor, preview, DevTools or docs) work better than two; see window managers for ultrawide monitors.
On a MacBook
Halves don't work well on a 13- or 14-inch screen: a half-width editor wraps lines and a half-width browser can drop your site into its tablet layout. Better options:
- Editor full width, browser behind it, and ⌘Tab to check. Simple, but you lose sight of the page while you type.
- Editor at two thirds, browser at one third. The narrow browser shows the mobile layout, which is often what you're fixing anyway.
- A scrolling strip. Windows sit side by side in columns on a strip wider than the screen.
With Ribbon:
- Make the editor two thirds wide (⌃⌥R cycles preset widths).
- Put the browser beside it at a third for mobile, or cycle it wider for desktop.
- Pop DevTools out into its own window; it becomes another column to the right, as wide as you like.
- Docs, the design file and chat sit further along. ⌃⌥← / → or a swipe moves between them; nothing covers the editor.
When you need to see the desktop layout, ⌃⌥F makes the browser full width for a moment, and ⌃⌥R brings it back. Try it in the live demo; pricing is $9.99 once.
Tips that save time
- Hot reload: Vite, Next.js and most frameworks reload the browser on save, so you only need to see the preview, not click it.
- Responsive testing: Chrome's device toolbar (⌘⇧M with DevTools open) and Safari's Develop → Enter Responsive Design Mode. Turn on Safari's Develop menu in Safari Settings → Advanced.
- Separate browser profile for development, so extensions and logins from your personal browsing don't interfere. See managing browser windows on a Mac.
FAQ
Should DevTools be docked or in a separate window?
Docked bottom on a tall screen, separate window if you use a window manager that can place it beside the preview. Docked right is best only when you're testing narrow layouts.
How do I see code and browser side by side on a MacBook?
On macOS 15 and later, tile them with Fn⌃← and →. Two thirds and one third works better on a small screen; a window manager makes uneven widths easy.
What's the best screen size for web development?
Any external monitor of 27 inches or more makes side-by-side comfortable. On a MacBook alone, a scrolling layout or uneven split helps most.