Google's web browser with DevTools and extension ecosystem

How to Record Chrome

Record Chrome without leaking tabs and bookmarks. Guide for DevTools tutorials, web app demos, and clean browser recordings with a dedicated profile.

When you’d need to record Chrome

Web app demos and bug reports

Record a web application running in Chrome — show the bug, the URL, the console errors, and the network requests. QA teams get full reproduction context in one recording.

DevTools tutorials for junior developers

Walk through Chrome DevTools: Elements panel for CSS debugging, Console for JavaScript errors, Network tab for API calls. DevTools has 8 main panels with hundreds of features — video is the only effective teaching format.

Website walkthroughs for clients

Record a guided tour of a client's website — point out design changes, responsiveness issues, or UX improvements. Faster than annotated screenshots and shows actual interactions.

Extension demos and reviews

Record Chrome extensions in action — show the popup UI, content scripts modifying pages, and options pages. Extension UIs are too dynamic for screenshots.

Recommended settings

Resolution

2560x1440

Frame rate

30fps

Audio

Microphone only

Capture mode

Window Capture

Things to know

•Tab bar shows titles of all open tabs — tab names can reveal personal browsing, email subjects, or confidential docs
•Chrome's bookmark bar (visible by default) shows personal bookmarks, including saved URLs with potentially sensitive names
•DevTools panels have 11px monospace text that's unreadable at 1080p after compression
•Hardware acceleration can conflict with some screen capture methods — disable in Settings > System if you see black frames or flickering

Step-by-step

1
In Screenify Studio, select Window Capture and pick the Chrome window.
If you have DevTools in a separate window, you may want Full Screen capture to get both, or record them separately.
2
Close unnecessary tabs. Every open tab shows its title in the tab bar. Titles like 'My Salary Spreadsheet' or 'Indeed - Job Search' appear in your recording. Keep only tabs relevant to the demo.
3
Hide the bookmarks bar: press Cmd+Shift+B. Your bookmarks bar shows saved URLs with names you chose — and some auto-generated names from bookmarked pages that may be personal.
4
If using DevTools, undock it to a separate window: open DevTools (Cmd+Option+I), click the three-dot menu > Dock side > Separate window. This lets you position DevTools and the web page side by side at readable sizes.
5
Start recording. When demonstrating web interactions, move the cursor visibly to each element before clicking. Chrome's cursor is a small arrow that viewers lose on content-heavy pages.

For DevTools and debugging recordings

6
Open DevTools (Cmd+Option+I) and increase the DevTools font size: Settings (gear icon in DevTools) > Preferences > Font Size > increase to 14px or 16px. Default 11px is unreadable in recordings.
7
To show responsive design, open DevTools Device Mode: Cmd+Shift+M. Select a device preset (iPhone 14, iPad, etc.) and record the responsive behavior. Toggle between devices to show how the layout adapts.
8
For Network tab recordings, clear the network log first (Cmd+E), then perform the action. This shows a clean request/response sequence instead of a wall of pre-existing requests.
9
Use Console drawer (press Esc in any DevTools panel) to show console output alongside Elements or Network panels simultaneously.

Pro tips

Auto-zoom on DevTools panels. Chrome DevTools renders text at 11px by default. When you click a CSS property in the Elements panel or a network request in the Network tab, auto-zoom detects the click and zooms in so viewers can actually read 'font-size: 14px' instead of a gray blur.

Keyboard overlay for DevTools shortcuts. DevTools power users rely on Cmd+Shift+C (inspect element), Cmd+Option+J (console), Cmd+Shift+M (device mode). Without keyboard overlay, viewers see panels magically appearing and have no idea how to replicate what you did.

Use a clean Chrome profile for recording. Create a separate Chrome profile (chrome://settings > People > Add Person) with no bookmarks, no extensions, no browsing history, and no saved passwords. Switch to this profile before recording. Zero chance of leaking personal data.

Disable Chrome notifications globally before recording. Go to chrome://settings/content/notifications and switch to 'Don't allow sites to send notifications'. This prevents any website notification popup during your recording — not just from one site, but all of them.

Common mistakes

Leaving all tabs open. Your tab bar becomes a table of contents of your browsing life. 'Gmail - 3 unread', 'Amazon.com: OLED TV', 'LinkedIn - Messages'. Close everything except the tab you're recording, or use a clean Chrome profile.

Recording DevTools at default font size. DevTools default is 11px monospace. After video compression, CSS properties, console output, and network headers become unreadable gray lines. Go to DevTools Settings > Font Size > 14px minimum before recording.

Forgetting that Chrome auto-fills personal data. If you click on a form field during a demo, Chrome may show auto-fill suggestions with your real name, email, address, and credit card number. Use a clean profile or disable auto-fill in Settings > Addresses and more.

Recording with hardware acceleration conflicts. Some screen capture configurations produce black frames or flickering when Chrome's hardware acceleration is on. If you see artifacts, go to chrome://settings > System > turn off 'Use hardware acceleration when available', restart Chrome, and try again.