# The best window layout for web development on a Mac
Source: https://ribbonformac.com/web-development-window-layout-mac
Updated: 2026-10-29
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](https://ribbonformac.com/ultrawide-monitor-window-manager-mac).
## 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](https://ribbonformac.com/):
1. Make the editor two thirds wide (⌃⌥R cycles preset widths).
2. Put the browser beside it at a third for mobile, or cycle it wider for desktop.
3. Pop DevTools out into its own window; it becomes another column to the right, as wide as you like.
4. 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](https://ribbonformac.com/#demo); [pricing](https://ribbonformac.com/#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](https://ribbonformac.com/manage-browser-windows-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.
## Keep reading
- [Mac setup for developers](https://ribbonformac.com/mac-setup-for-developers) — Homebrew, terminal, editor, launcher, windows and the settings to change on day one.
- [Xcode and Simulator layout](https://ribbonformac.com/xcode-simulator-window-layout-mac) — Xcode panels and tabs, Simulator sizing, Previews, and a layout that fits a MacBook.
- [VS Code multiple windows](https://ribbonformac.com/vs-code-multiple-windows-mac) — New windows, editors in their own window, switching, native tabs and arranging.
- [Manage browser windows](https://ribbonformac.com/manage-browser-windows-mac) — Switching, merging, naming, profiles, tab groups, and keeping windows visible.
- [Arrange terminal windows](https://ribbonformac.com/arrange-terminal-windows-mac) — Tabs, splits and windows in each terminal, and keeping many sessions visible at once.