Previewing Remote Web Apps

Testing and Debugging Remote Web Applications on Android

Developing responsive web applications requires testing on real mobile viewports and touch browsers. With Casshper's Port Forwarding Service, you can bridge local web development servers running on remote staging hosts (such as Vite, Next.js, Django, or Rails) directly to your Android device's local loopback network interface (127.0.0.1).

Step-by-Step Tunnel Setup

1. Start your Remote Web Development Server

SSH into your remote server using Casshper and launch your development web server on any target port (for example, Vite on port 5173, Next.js on port 3000, or Rails on port 8080):

npm run dev -- --host 127.0.0.1 --port 3000

2. Configure and Start Port Forwarding in Casshper

1. Open Casshper and open the sidebar menu to view your saved connections.
2. Tap the options menu icon next to your saved SSH connection (or tap the host inside Connection Manager) and select Manage Ports.
3. Tap Add Port Forward to configure your rule:
   • Type: Select Local (Device -> Remote)
   • Source Port (Bind): Set to 3000 (local port on your Android phone)
   • Dest Host: Set to localhost or 127.0.0.1 (remote target host)
   • Dest Port: Set to 3000 (remote server dev port)
4. Tap Add, then tap Save in the Manage Ports dialog to apply your configuration.
5. Tap the options menu icon next to the host again and select Start Forwarding to activate the encrypted SSH port forwarding service.

3. Preview in Mobile Chrome or Firefox

1. Open Chrome, Firefox, or Brave on your Android phone.
2. Navigate to http://localhost:3000 or http://127.0.0.1:3000.
3. Your remote web application will render instantly on your mobile screen with full hot module replacement (HMR) and touch gesture support!

Debugging and Inspection Strategies

Once your remote web app is previewed on mobile, use these technical strategies to inspect DOM trees, capture Javascript console logs, track network requests, and debug responsive touch layouts:

Desktop Chrome Remote DevTools (USB Debugging)

Connect your Android phone to a computer for full Chrome DevTools inspection of your mobile browser viewports:

1. Enable Developer Options on Android (Settings → About Phone → tap Build Number 7 times).
2. Turn on USB Debugging under Developer Options.
3. Connect your phone to your computer via USB cable.
4. Open Google Chrome on your computer and navigate to chrome://inspect/#devices.
5. Select your mobile browser target under Remote Target and click Inspect to launch full desktop DevTools (DOM element inspector, console log stream, network waterfall, and CSS style modifier).

On-Device Console Injection (Eruda and vConsole)

If you don't have a computer nearby, embed a mobile-native DevTools console directly inside your web application during development:

• Eruda Mobile Console: Inject a single script tag into your HTML document header to render an overlay button with full DOM tree navigation, Javascript execution console, and network payload monitor:

  <script src="https://cdn.jsdelivr.net/npm/eruda"></script>
  <script>eruda.init();</script>

• vConsole Log Inspector: Alternative lightweight console logging overlay for mobile touch devices:

  <script src="https://unpkg.com/vconsole@latest/dist/vconsole.min.js"></script>
  <script>var vConsole = new VConsole();</script>

Remote File and Asset Inspection (Internal SFTP Browser - Pro Admin)

When previewing remote web applications, you may need to inspect compiled build artifacts (such as bundled scripts or stylesheets), review server-side logs, or modify configuration files without stopping your dev server:

1. Open the options menu for your active SSH host in Casshper and select Browse (Internal).
2. Casshper opens the Internal Browser—a touch-optimized SFTP file manager modal—directly over your session without disrupting the active terminal or background port forwarding tunnel.
3. Navigate your remote project directories to verify generated output in build folders (such as dist/ or build/), check server logs, or adjust file permissions (chmod).
4. Dismiss the modal when finished to return to your terminal shell or resume previewing in your mobile browser.