How to Record a Clean Browser Window

A browser with 23 tabs, a bookmarks bar full of folders, and 8 extension icons tells viewers one thing: this person didn't prepare. Here's the 3-minute setup for a recording-ready browser.

Create a dedicated browser profile

The cleanest approach: a separate Chrome/Firefox/Arc profile used only for recordings.

In Chrome: click your profile icon (top-right) → Add → create "Recording" profile. This gives you:

• Zero bookmarks
• No extensions
• No browsing history (clean URL suggestions)
• No saved passwords or autofill data
• A distinct theme/color so you know which profile you're in

Only install in this profile what you need for the demo (if anything). Sign into your demo account here, not your personal account.

Essential cleanup checklist

If you can't use a separate profile, clean your current one:

• ☐ Close all tabs except the ones you'll show
• ☐ Hide bookmarks bar (Cmd+Shift+B on Chrome/Firefox)
• ☐ Hide extension icons — click the puzzle piece icon and unpin all extensions from the toolbar
• ☐ Clear URL bar history — or start typing your URL to make sure no embarrassing autofill suggestions appear
• ☐ Close DevTools if open
• ☐ Disable notifications — Site Settings → Notifications → block all, or use Focus/DND mode

Set a precise viewport size

For consistent recordings, set your browser to an exact viewport size rather than "approximately full screen."

Using DevTools responsive mode:

1. Open DevTools (Cmd+Option+I)
2. Toggle device toolbar (Cmd+Shift+M)
3. Set to "Responsive" and enter exact dimensions (1280×720 for a 720p feel, 1440×900 for a more spacious look)

Or resize the browser window programmatically:

window.resizeTo(1440, 900);

Note: this only works if the window was opened by JavaScript. For manual control, window management tools like Rectangle (macOS) let you set exact pixel sizes.

Tab management during recording

If your demo requires multiple tabs:

• Name them clearly (pin the important ones)
• Arrange in the order you'll visit them
• Pre-load all pages — never show a tab loading during a recording
• Close or hide any tab that shows notification badges or unread counts

Maximum visible tabs: 3-4. Beyond that, the tab bar becomes cluttered and distracting. If you need more, hide less-important ones in a tab group.

URL bar considerations

The URL bar reveals:

• Your environment (localhost:3000 vs production domain)
• Route structure (/admin/users/12345 reveals internal architecture)
• Query parameters (may contain tokens, user IDs)

Options:

• Full-screen mode: Hides the URL bar entirely
• Show production URL: Record against your production domain (use the demo account)
• Crop in post: Remove the top portion containing the URL bar

Fonts and rendering

Ensure your browser renders fonts consistently:

• Disable font-smoothing experiments (chrome://flags → fonts)
• Set zoom to exactly 100% (or your chosen demo zoom level)
• Clear font cache if you've recently installed/removed fonts
• Ensure dark/light mode matches what you intend to record

The 30-second pre-record ritual

Before every recording session:

1. Switch to recording profile (or clean current)
2. Navigate to starting URL
3. Cmd+Shift+B (hide bookmarks)
4. Close DevTools
5. Set browser zoom to target level
6. Enable system Do Not Disturb
7. Take a screenshot — review it for anything you missed

That last step catches 90% of remaining issues. If the screenshot looks ready for your marketing site, you're ready to record.