# VS Code Port Forwarding for Mobile Testing

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

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 is 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](https://xiry.app/topics/development.md)
- Topic: [Developer Tools](https://xiry.app/topics/development/developer-tools.md)
- 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](https://www.instagram.com/reel/C8rO6hMgjMG/): 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](https://xiry.app/resources/react-best-practices): Curated React performance rules and coding-agent skills by Vercel (GitHub repo, Open source)
- [Agentation](https://xiry.app/resources/agentation): Connects AI coding agents to browser annotations for automated UI reviews (Web app, Open source)
- [claude-office-skills](https://xiry.app/resources/claude-office-skills): Office document creation and editing skills for Claude Code CLI. (GitHub repo, Open source)
- [Domain SDK](https://xiry.app/resources/domain-sdk): TypeScript SDK for adding and managing custom customer domains across platforms (GitHub repo, Open source)
- [ECC](https://xiry.app/resources/ecc): Agent harness optimization system with skills, hooks, and configs for coding agents (GitHub repo, Open source)
- [Eight Dev Tools, Zero Fluff — Part 6](https://xiry.app/resources/eight-dev-tools-zero-fluff-part-6): Curated list of eight front-end design and developer utility tools (List)

Updated 3 October 2026. Page: https://xiry.app/resources/vs-code-port-forwarding-for-mobile-testing

Make your own library: Xiry takes your saved reels, tweets, Reddit bookmarks and Watch Later videos, makes them searchable and pulls the useful stuff out, like this library. It's invite-only for now; join the waitlist at https://xiry.app/#waitlist.