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 .vsix file.
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
