Port Visualiser is a professional utility for Visual Studio Code that provides a real-time dashboard to monitor, manage, and terminate active network ports directly from the sidebar.
Features
Real-Time Dashboard
Monitors all active listening ports on your local system with an automatic refresh cycle. The extension provides immediate visibility into which services are currently occupying your network interfaces.
Process Identification
Automatically identifies common development frameworks and databases including:
Web Frameworks: Node.js, React, Vite, Java (Tomcat).
Databases: MongoDB, PostgreSQL, MySQL, Redis.
System Services: Docker, SSH, RabbitMQ.
Connection Management
Browser Integration: Open web-based ports directly in your default browser.
URL Resolution: Copy standard localhost URLs or internal network IP addresses for testing on external devices.
Process Termination: Terminate (Kill) the process owning a port to resolve address-in-use conflicts.
Workspace Customization
Alias Support: Rename ports with custom nicknames for easier identification across sessions.
Filtering: Search for specific ports or processes using the integrated filter bar.
Ignore List: Hide persistent system ports from the primary view. These are moved to a dedicated "Hidden / Ignored" section.
Technical Inspection
Environment Variables: Inspect and copy the environment variables of any running process to troubleshoot configuration or secret management issues.
Technical Specifications
The extension utilizes native operating system utilities to maintain a minimal resource footprint.
Platform
Utility
Implementation Details
Windows
netstat
Utilizes netstat -ano to map ports to PIDs.
macOS
lsof
Scans TCP listeners using lsof -iTCP -sTCP:LISTEN.
Linux
lsof
Requires lsof installation. Reads /proc filesystem where available.
Permission Requirements
To view processes owned by system users (such as native database services), the extension may require elevated permissions.
Linux/macOS: To view services like mongod or postgres, ensure the user has permission to execute lsof.
Windows: Certain process names may only be visible when VS Code is running with Administrator privileges.
Installation and Setup
Build from Source
Clone the repository: git clone https://github.com/Clumsynite/port-visualiser-ext
Install dependencies: npm install
Execute build: npm run package
Development Workflow
Run npm run watch to initiate the incremental compiler.
Use F5 to launch the Extension Development Host for debugging.
Configuration
Port Visualiser stores nicknames and ignore lists within the workspaceState of the current project. This ensures that configurations are project-specific and do not modify global settings.
Refresh Interval: Default is 10 seconds.
Persistence: All custom nicknames and filters are preserved across VS Code restarts.
