VS Code Localhost Browser Extension

A Visual Studio Code extension that adds an integrated browser tab for viewing and debugging localhost applications without leaving your editor.

Features

• Integrated Browser: View your localhost application directly in VS Code
• Customizable Port: Easily switch between different localhost ports
• DevTools Support: Open Chrome DevTools with one click for better debugging
• Clean Interface: White background and intuitive controls for better visibility

Installation

1. Download the .vsix file from the releases section
2. In VS Code, go to the Extensions view (Ctrl+Shift+X)
3. Click on the "..." menu and select "Install from VSIX..."
4. Select the downloaded .vsix file

Usage

Opening the Browser

• Click the "Open Localhost" button in the status bar (bottom of VS Code)
• Or use the command palette (Ctrl+Shift+P) and search for "Open Localhost Browser"

Navigating to Your Application

1. Enter the port number in the input field (default is 3000)
2. Click "Navigate" or press Enter to load the page
3. Use the "Refresh" button to reload the current page

Using DevTools

1. Navigate to the page you want to debug
2. Click the "Open DevTools" button
3. A Chrome window will open with DevTools already active for your page

Requirements

• Visual Studio Code 1.60.0 or newer
• Google Chrome (for DevTools functionality)

Extension Settings

This extension contributes the following commands:

• portal-web.openLocalhost: Open the localhost browser panel
• portal-web.openDevTools: Open DevTools for the current localhost page