Dev Browser

Overview

The Dev Browser lets you preview your running development servers — React, Vue, Next.js, Vite, or anything else on localhost — right inside the C3 mobile app. No need to switch devices or set up complicated tunnels just to check a UI change.

C3 routes all traffic through your backend, so the mobile app only needs one connection to access any of your dev servers — no matter how many you have running.

Port Forwarding

Port forwarding makes your localhost dev servers accessible from the mobile app.

Adding Ports

Open the Dev Browser from your project, tap the menu button, and select Add Port. Enter the port number your dev server is running on (e.g., 3000, 5173, 8080).

Switching Ports

If you have multiple dev servers running, tap the menu to see all forwarded ports. The active port is marked with a checkmark. Tap any other port to switch instantly — the browser reloads to show that server's output.

SSL / HTTPS

Some dev servers run on HTTPS locally. You can toggle SSL on a per-port basis when adding or configuring a port, so C3 connects to your dev server correctly.

Removing Ports

Ports you no longer need can be removed from the menu. C3 persists your forwarded ports across restarts, so you only need to set them up once per project.

Browser Features

Address Bar

The address bar at the top shows the current URL. You can type a path directly (e.g., /admin or /api/health) and tap Go to navigate. The URL updates in real time as you browse, including SPA route changes.

Navigation Controls

The browser menu provides standard navigation controls:

• Back / Forward — Navigate through your browsing history
• Reload — Force-refresh the page (cache-busting included)
• Stop — Cancel a page load in progress

Desktop Mode

Toggle Desktop Site from the menu to switch between mobile and desktop viewports, so responsive sites render their desktop layout.

Single-Page App Support

The address bar stays in sync with client-side navigation, so single-page applications (React Router, Vue Router, etc.) show the correct URL as you navigate between views.

DevTools

The Dev Browser includes a built-in developer tools panel that you can toggle from the browser menu. Once a page loads, tap the DevTools option to open it.

DevTools gives you access to:

• Console — View logs, warnings, and errors from the moment the page loads
• Network — Inspect HTTP requests, responses, and timings
• Elements — Browse and inspect the page structure
• Resources — View cookies, local storage, and session storage
• Sources — Browse loaded scripts

Live Reload

The Dev Browser supports hot module replacement (HMR) and live reload out of the box. When the agent edits your code or you save a file, the changes appear in the browser automatically — no manual refresh needed.

This works with all popular dev servers including Vite, webpack, Next.js, and any other tool that uses live reload or HMR.

Remote Access

When using C3 over the internet (not on the same local network), the Dev Browser works seamlessly with ngrok tunnels, so your dev server is accessible from anywhere.

For setup instructions, see the ngrok Setup guide.