Headless Chrome Debugger is a VS Code extension that allows you to capture screenshots, record performance traces, and collect console logs from any web page using headless Chrome – all without leaving your editor.
Perfect for web developers, QA engineers, and performance analysts.
✨ Features
- Capture Screenshot – Save a full‑page screenshot of any URL.
- Record Performance Trace – Generate a performance trace (e.g., for Core Web Vitals) in JSON format.
- Get Console Logs – Capture all console messages (log, warn, error) from a page.
- Headless Operation – Runs silently in the background; no visible browser window.
- Configurable – Set default URL and output paths in VS Code settings.
📦 Installation
From VSIX (Manual)
- Download the
.vsixfile. - Open VS Code, go to Extensions (
Ctrl+Shift+X). - Click the
…menu →Install from VSIX…and select the file.
From the Marketplace (once published)
- Open Extensions view.
- Search for
Headless Chrome Debugger. - Click Install.
🚀 Usage
After installation, open the Command Palette (Ctrl+Shift+P) and choose one of the commands:
| Command | Description |
|---|---|
Headless Chrome: Capture Screenshot |
Takes a full‑page screenshot of the provided URL and saves it as a PNG file. |
Headless Chrome: Record Performance Trace |
Records a performance trace and saves it as a JSON file. |
Headless Chrome: Get Console Logs |
Captures all console messages from the page and displays them in the output channel. |
You will be prompted for a URL (defaults to https://example.com). Results appear in the "Headless Chrome Debugger" output channel.
⚙️ Configuration
Open VS Code Settings (Ctrl+,) and search for headlessChrome to customise:
| Setting | Description | Default |
|---|---|---|
headlessChrome.defaultUrl |
Default URL when none is provided | https://example.com |
headlessChrome.screenshotPath |
Where to save screenshots | ${workspaceFolder}/screenshot.png |
headlessChrome.tracePath |
Where to save traces | ${workspaceFolder}/trace.json |
📋 Requirements
- Google Chrome or Chromium installed on your system (the extension finds it automatically at common locations).
- VS Code version 1.120.0 or higher.
🛠️ Building from Source
git clone https://github.com/DjaluA901/headless-chrome-debugger
cd headless-chrome-debugger
npm install
npm run compile
vsce package