VS Code DevTools Logger

A VS Code extension that captures and logs all DevTools Console output to a persistent, human-readable log file. Perfect for debugging extensions, tracking console messages, and analyzing VS Code's internal behavior.

🚀 Quick Start Guide

After installing this extension, you'll see a Welcome screen with a "Create Desktop Shortcut" button:

1. Click "Create Desktop Shortcut" in the Welcome view
2. Approve the admin privilege prompt (required to place the shortcut on your desktop)
3. Use the desktop shortcut to launch VS Code - This launches VS Code with DevTools logging enabled
4. View your logs using the command DevTools Logger: Show DevTools Console Log

⚠️ Important: You must run VS Code through the desktop shortcut for logging to work! The shortcut automatically sets the required environment variables.

✨ Features

• 📝 Human-Readable Timestamps - Automatically converts Chromium timestamps to readable format (2025-10-22 22:08:46.241)
• 🔄 Auto-Clear on Reload - Log clears when VS Code reloads (mirrors DevTools Console behavior)
• ⚡ Real-Time Formatting - Timestamps formatted automatically every 500ms
• 🎯 Easy Access Commands - Quick commands to view logs and open log folder
• 🚀 Silent Launcher - Invisible VBS script to start VS Code with logging enabled
• 📊 Complete Console Capture - Captures all console output, errors, warnings, and info messages

📦 Installation

Option 1: From VSIX File

1. Download the latest .vsix file from Releases
2. Open VS Code
3. Press Ctrl+Shift+P and run: Extensions: Install from VSIX...
4. Select the downloaded .vsix file

Option 2: From Marketplace (Coming Soon)

Search for "VS Code DevTools Logger" in the VS Code Extensions Marketplace

🚀 Quick Start

Step 1: Enable Logging

To enable DevTools logging, you need to launch VS Code with the ELECTRON_ENABLE_LOGGING environment variable:

1. Close VS Code completely
2. Run the launcher script:
   • Locate restart-vscode-silent.vbs in your extension folder
   • Double-click it (no windows will appear - it runs silently)
   • VS Code will restart automatically with logging enabled

Step 2: View Logs

Once VS Code restarts with the extension active:

1. Press Ctrl+Shift+P to open Command Palette
2. Type: DevTools Logger: Show DevTools Console Log
3. The formatted log will open in a new editor tab

Or use the command: DevTools Logger: Open Logs Folder to browse all log files

📁 Log Files

The extension creates two log files in C:\logs\:

File	Description
vscode-devtools-raw.log	Raw Chromium log format (internal use)
vscode-devtools.log	Formatted log with human-readable timestamps ← Use this one!

Example Log Output

Before (Raw Chromium format):

[5828:1022/220130.241:INFO:CONSOLE:526] "Extension Host loaded"

After (Human-readable format):

[2025-10-22 22:01:30.241] INFO:CONSOLE:526] "Extension Host loaded"

🛠️ How to Run VS Code with Logging

Method 1: Silent VBS Launcher (Recommended)

The easiest way to start VS Code with logging enabled:

' Simply double-click: restart-vscode-silent.vbs
' This script will:
' 1. Close all VS Code instances
' 2. Clear old logs
' 3. Set ELECTRON_ENABLE_LOGGING=1
' 4. Launch VS Code with your workspace
' 5. Start background timestamp formatter

Method 2: Manual PowerShell

If you prefer manual control:

# Close VS Code
taskkill /F /IM Code.exe

# Set environment variable
$env:ELECTRON_ENABLE_LOGGING = "1"
$env:ELECTRON_LOG_FILE = "C:\logs\vscode-devtools-raw.log"

# Launch VS Code
code "C:\path\to\your\workspace"

Method 3: Batch File

Create a .bat file:

@echo off
taskkill /F /IM Code.exe >nul 2>&1
timeout /t 2 /nobreak >nul
set ELECTRON_ENABLE_LOGGING=1
set ELECTRON_LOG_FILE=C:\logs\vscode-devtools-raw.log
start "" code "C:\path\to\your\workspace"

🎮 Available Commands

Open Command Palette (Ctrl+Shift+P) and search for:

Command	Description
DevTools Logger: Show DevTools Console Log	Opens the formatted log file in editor
DevTools Logger: Open Logs Folder	Opens C:\logs in File Explorer

🔧 How It Works

1. Electron Logging: VS Code is built on Electron (Chromium). Setting ELECTRON_ENABLE_LOGGING=1 enables Chromium's console logging to a file
2. Raw Log Capture: Chromium writes logs to vscode-devtools-raw.log with its native timestamp format
3. Real-Time Formatting: The extension runs a background timer (every 500ms) that:
   • Reads the raw log file
   • Converts timestamps from MMDD/HHMMSS.mmm to YYYY-MM-DD HH:MM:SS.mmm
   • Writes the formatted output to vscode-devtools.log
4. Auto-Clear: On VS Code reload/restart, both log files are cleared automatically

📋 Requirements

• VS Code: Version 1.70.0 or higher
• Operating System: Windows (VBS launcher is Windows-specific; manual methods work on all platforms)
• Disk Space: Minimal (logs are cleared on reload)

🐛 Troubleshooting

No log file appears

• Ensure you launched VS Code using the VBS script or with ELECTRON_ENABLE_LOGGING=1
• Check that C:\logs folder exists (the extension creates it automatically)

Timestamps not formatted

• Verify the extension is installed and enabled
• Reload VS Code window (Ctrl+R or Developer: Reload Window)

VBS script doesn't work

• Check Windows file path in the script matches your workspace location
• Run the script as Administrator if needed

📝 Configuration

The extension uses these default paths:

• Raw Log: C:\logs\vscode-devtools-raw.log
• Formatted Log: C:\logs\vscode-devtools.log

To change paths, edit:

• restart-vscode-silent.vbs (environment variable)
• extension.js (constants at the top)

🤝 Contributing

Contributions are welcome! Please feel free to submit issues or pull requests.

📄 License

MIT License - see LICENSE file for details

👤 Author

Ilan Aviv

---

Enjoy debugging with readable DevTools logs! 🎉