Editor and browser side by side on a Mac, without the shuffle

Web work means looking at two things at once: the code and the page. Then the browser's dev tools want a third slice.

With macOS alone

Tile the editor left and the browser right with fn ⌃ and the arrows (macOS 15 and later). Dock the dev tools to the bottom of the browser so they do not need their own column. It works until a third window arrives and lands on top.

Widths that suit the work

• Editor at two thirds, browser at a third: when you are mostly writing code.
• Half and half: when you are adjusting layout and watching it change.
• Browser at two thirds with dev tools open: when you are debugging the page.

Switch widths in one key

In ClutterFreeMac, ⌃ ⌥ R cycles the focused window through a third, a half and two thirds. Its neighbour keeps its own width; the row just shifts. Open the dev tools in their own window and they slot in beside the browser instead of covering it.