How to Create a Loom Video with the Developer Console Open

Recording your screen with the browser developer console open can be helpful when reporting bugs or demonstrating issues to a support or development team. Here's how to record a Loom video while showing the developer tools (also known as the DevTools panel) in your browser.

Step-by-Step Instructions

1. Install Loom

If you haven’t already,register for a FREE Loom account at https://www.loom.com/

Loom Desktop App: Download Loom
Loom Chrome Extension: Get Loom Extension

For best results when recording with the developer console, we recommend using the Loom Desktop App instead of the Chrome extension.

2. Open the Website and Developer Console

Open the webpage or web app you want to demonstrate.
Open the developer console:
- Windows: Press Ctrl + Shift + I or F12
- Mac: Press Cmd + Option + I

3. Start Your Loom Recording

Launch the Loom desktop app.
Choose your recording type:
- Screen + Camera (if you want your webcam in the video)
- Screen Only (if you just want to show the screen)
  Under “What do you want to record?” select:
- Full screen: Best for showing both the site and developer tools
- Window: Select the browser window with the dev console open
Click Start Recording.

4. Record and Save

Perform the actions you want to capture.
When you're done, click the Loom icon in your menu bar or use the Loom control panel to Stop Recording.
Loom will automatically upload and open your video in a new browser tab where you can rename, trim, and share it.

Tips for a Clear Recording

Make sure the browser and console areas are not too crowded—resize panels if needed.
Use the “Pause” and “Resume” features if you need to collect your thoughts mid-recording.
Speak clearly and explain what you’re doing, especially if you're reporting an issue.