HostScan - Mobile QR Testing

Instantly test your localhost projects on mobile devices with a single click!

HostScan eliminates the tedious process of manually typing local IP addresses and ports into your mobile browser. Simply click a button, scan a QR code, and your localhost project loads on your physical mobile device.

Why HostScan?

The Problem

Testing localhost projects on mobile devices currently requires:

1. Opening terminal and running ipconfig/ifconfig
2. Finding your IPv4 address from a list of network interfaces
3. Checking your server's port number
4. Manually typing the full URL (e.g., http://192.168.1.68:5500) on your phone
5. Dealing with typos and repeating this every time your IP changes

The Solution

With HostScan, testing becomes:

1. Click the QR icon in VS Code's status bar
2. Scan the QR code with your phone's camera
3. Done! Your site loads instantly

Features

• One-Click QR Generation - Generate a scannable QR code instantly
• Smart IP Detection - Intelligently detects your local network IP address (filters out virtual adapters)
• Automatic Port Detection - Scans for running dev servers (Next.js, Vite, Live Server, etc.) - No manual input needed!
• Multi-Server Support - If multiple servers are running, shows a quick pick menu
• Clean Webview Interface - Beautiful, easy-to-scan QR code display
• Copy URL Button - Quickly copy the URL to clipboard
• Configurable Settings - Customize default ports, protocols, and paths
• Zero External Dependencies - Pure local network, no tunneling services required
• Cross-Platform - Works on Windows, macOS, and Linux

Installation

1. Open VS Code
2. Go to Extensions (Ctrl+Shift+X / Cmd+Shift+X)
3. Search for "HostScan"
4. Click Install

Usage

Quick Start

1. Start your local development server (e.g., npm run dev for Next.js, or Live Server)
2. Click the QR icon (📱) in the VS Code status bar (bottom right)
3. That's it! HostScan automatically detects your server's port
4. Scan the QR code with your mobile device's camera
5. Your website opens on your phone!

Note: If HostScan detects multiple running servers, you'll be able to choose which one to use.

Command Palette

You can also access HostScan via the Command Palette:

• Open Command Palette (Ctrl+Shift+P / Cmd+Shift+P)
• Type "HostScan: Generate Mobile QR Code"
• Press Enter

Configuration

Customize HostScan in VS Code settings:

{
  "hostscan.defaultPort": 5500,
  "hostscan.customPath": "/",
  "hostscan.protocol": "http",
  "hostscan.autoDetectPort": true
}

Settings Reference

Supported Frameworks

HostScan automatically detects ports for:

• Next.js (port 3000)
• Vite (port 5173)
• Live Server (port 5500)
• Create React App (port 3000)
• Angular (port 4200)
• webpack-dev-server (port 8080)
• Python/Django (port 8000)
• Flask (port 5000)
• Gatsby (port 4000)
• And any other development server!

How It Works

1. IP Detection: HostScan uses Node.js's os.networkInterfaces() to detect your local IPv4 address, prioritizing WiFi and Ethernet connections. It filters out virtual adapters (Docker, WSL, Hyper-V).

2. Port Detection: The extension scans for listening ports using netstat (Windows) or lsof/ss (macOS/Linux), then filters for common development server ports.

3. QR Generation: A QR code is generated using the qrcode library, encoding the full URL.

4. Display: A clean webview panel displays the QR code for easy scanning.

Requirements

• VS Code version 1.80.0 or higher
• Your mobile device must be on the same local network as your development machine
• A running local development server

Troubleshooting

QR Code Won't Scan

• Ensure your phone and computer are on the same WiFi network
• Try increasing your screen brightness
• Hold your phone steady at different distances

Wrong IP Address Detected

• If you have multiple network interfaces, HostScan prioritizes WiFi over Ethernet
• Check your network settings to ensure you're using the correct network

Connection Refused on Mobile

• Verify your development server is running
• Check that your firewall isn't blocking local network connections
• Ensure the port number is correct

Can't Find Local IP

• Check that you're connected to a network (WiFi or Ethernet)
• HostScan filters out localhost (127.0.0.1) and only shows LAN addresses

Common Use Cases

• Responsive Design Testing: Quickly test how your site looks on real mobile devices
• Touch Interaction Testing: Test touch gestures and mobile-specific interactions
• Device-Specific Debugging: Debug issues that only appear on certain mobile devices
• Client Demonstrations: Show work-in-progress to clients on their own devices

Comparison with Other Solutions

Roadmap

• [ ] Automatic port detection from terminal output
• [ ] Support for multiple simultaneous servers
• [ ] Custom QR code styling options
• [ ] History of recently generated QR codes
• [ ] Support for HTTPS local development

Contributing

Found a bug or have a feature request? Please open an issue on our GitHub repository.

License

MIT License - See LICENSE file for details

Support

If you find HostScan helpful, please:

• ⭐ Star the repository
• 📝 Leave a review on the VS Code Marketplace
• 🐛 Report bugs or suggest features

Made with ❤️ for developers who care about mobile UX

Stop typing IP addresses. Start scanning QR codes.