xiry.

Development · Tip

VS Code Port Forwarding for Mobile Testing

Tunnel local web servers to mobile devices directly inside Visual Studio Code

From the Xiry library · Updated 3 October 2026

Visual Studio Code includes a built-in port forwarding system that creates dev tunnels for localhost services. It lets you test locally hosted web apps on physical mobile devices over HTTPS without installing third-party tools like ngrok.

How it works

  1. In Visual Studio Code, open the Command Palette (Cmd/Ctrl + Shift + P) and type 'Forward a Port' (or open the 'Ports' tab in the bottom panel).
  2. Click 'Forward a Port' and enter the local server port number (e.g., 3000 or 5500).
  3. In the Ports table, right-click the port entry, navigate to 'Port Visibility', and select 'Public'.
  4. Copy the Forwarded Address link (VS Code dev tunnel URL).
  5. Open the copied URL in your phone's browser to view and live-test your local site.

What it's for

  • Test responsive web layouts directly on a physical smartphone browser
  • Share a running local development server with team members or clients
  • Debug mobile-specific touch events and browser behaviors during development

Key points

  • Open the Ports tab in the bottom panel or use the Command Palette to forward a port
  • Enter the local development port number such as 3000 or 5173
  • Switch port visibility from Private to Public to allow external device access
  • Generate an HTTPS dev tunnel URL automatically managed by VS Code
  • Open the generated address on any mobile browser to inspect the live site

Pricing

Free built-in feature of Visual Studio Code

Details

Type
Tip
Category
Development
Topic
Developer Tools
Open source
Yes
Platforms
macOS, Windows, Linux
For
Web developers wanting to preview local code on mobile devices
Alternative to
ngrok, localtunnel, Cloudflare Tunnels
Tags
vscode, port forwarding, tunnels, mobile testing, web development

Why it was saved

  • @deeecode, 26 June 2024: Enables instant live testing of responsive designs on a physical phone without needing external tunneling services like ngrok or complex local network configurations.

Related

  • react-best-practices

    Curated React performance rules and coding-agent skills by Vercel

  • Agentation

    Connects AI coding agents to browser annotations for automated UI reviews

  • claude-office-skills

    Office document creation and editing skills for Claude Code CLI.

  • Domain SDK

    TypeScript SDK for adding and managing custom customer domains across platforms

  • ECC

    Agent harness optimization system with skills, hooks, and configs for coding agents

  • Eight Dev Tools, Zero Fluff — Part 6

    Curated list of eight front-end design and developer utility tools

All 13 in Developer Tools →

Updated