How does Media Preview work in 1DevTool?

Step 1: Set Your URL — Enter your local dev server URL or set a default per project. The browser loads your app instantly. Step 2: Navigate & Test — Use back, forward, and refresh controls. Open multiple tabs for different routes or states. Step 3: Debug with DevTools — Right-click or use the keyboard shortcut to open Chrome DevTools. Inspect elements, network, and console. Step 4: Iterate Rapidly — See code changes reflected in the browser without switching windows. Your dev loop stays inside 1DevTool.

Browser Preview

Media Preview

Open PDFs, videos, and audio files directly in the built-in browser panel. Click a media file in the file explorer and it renders inline — full PDF navigation, native video controls, and audio playback without switching to an external app.

Download 1DevTool All Features

More Screenshots

Click any image to zoom in

1DevTool displaying a PDF document in the browser panel with page navigation and zoom controls

Why You Need This

How this feature boosts your daily productivity

Every time you click a PDF or video in your project, the OS launches a separate app. You lose your place in the editor, gain another window to manage, and break your focus. Media preview keeps those files inside 1DevTool so you can read documentation, review recordings, or listen to audio assets alongside your code.

How It Works

Get started in 4 simple steps

1

Set Your URL

Enter your local dev server URL or set a default per project. The browser loads your app instantly.

2

Navigate & Test

Use back, forward, and refresh controls. Open multiple tabs for different routes or states.

3

Debug with DevTools

Right-click or use the keyboard shortcut to open Chrome DevTools. Inspect elements, network, and console.

4

Iterate Rapidly

See code changes reflected in the browser without switching windows. Your dev loop stays inside 1DevTool.

Without 1DevTool

The manual way vs. the 1DevTool way

The Hard Way

# Search for the right tool online

# Switch between multiple apps

# Copy-paste data between windows

# Lose context every time you switch

# Repeat dozens of times per day

The 1DevTool Way

Everything in one workspace.

No context switching.

All tools integrated and connected.

Key Capabilities

Everything included with Media Preview

Embedded Chromium-based WebView with full rendering support

URL bar with navigation controls (back, forward, refresh)

Multi-tab support for previewing multiple routes simultaneously

Chrome DevTools access for network, console, and element inspection

Per-project default URLs and URL history tracking

One-click open in system browser for full-featured testing

Why It Matters

The productivity impact of having browser preview built into your workspace

Tighter Dev Loop

See changes instantly without alt-tabbing to Chrome. Your code, terminal, and preview live in one window.

Built-in DevTools

Full Chrome DevTools for network, console, and DOM inspection. Debug without switching apps.

Multi-Tab Preview

Preview multiple routes or states simultaneously. Compare the login page and dashboard side by side.

Per-Project URLs

Each project remembers its default preview URL. Switch projects and the browser loads the right dev server.

More in Browser Preview

Other features in this category you might find useful

Embedded Browser

Preview your local dev server with a full browser — URL bar, tabs, back/forward, and refresh controls.

DevTools Access

Open Chrome DevTools for network inspection, console debugging, and element inspection inside 1DevTool.

Ready to boost your workflow?

Download 1DevTool for free and experience Media Preview along with 122 other features — all in one app.

Download for Free View Changelog