Skip to main content

VS Code Extension

Install the DebuggAI extension for browser testing.

Installation Methods​

VS Code Marketplace​

  1. Open VS Code
  2. Press Cmd+Shift+X (Extensions panel)
  3. Search "DebuggAI"
  4. Click Install

Command Line​

code --install-extension debugg-ai.debugg-ai

Manual Installation​

  1. Download .vsix from GitHub Releases
  2. VS Code → Extensions → ... → Install from VSIX

Setup​

1. Sign In​

  1. Press Cmd+Shift+P
  2. Type "DebuggAI: Sign In"
  3. Create account at debugg.ai

2. Configure Settings​

Press Cmd+, → Search "DebuggAI":

Essential Settings:

  • Local Port: Default 3000
  • Auto-Start Testing: Enable commit-based testing
  • Telemetry: Anonymous usage data (optional)

3. Verify Installation​

  1. Start your app: npm run dev
  2. Press Cmd+Alt+C
  3. Enter test: "Test homepage loads correctly"

Requirements​

System Requirements​

  • VS Code: Version 1.60+
  • Node.js: Version 16+ (if using local development)
  • Operating System: macOS, Windows, Linux

Network Requirements​

  • Internet connection for AI processing
  • Localhost access (ports 3000-8080)
  • Firewall allows outbound HTTPS

Key Shortcuts​

Primary Commands:

  • Cmd+Alt+C - Create E2E test
  • Cmd+L - Open AI chat
  • Cmd+I - Edit mode
  • Cmd+Shift+R - Debug terminal

Secondary Commands:

  • Cmd+Alt+E - Generate test suite
  • Cmd+Shift+P → "DebuggAI" - All commands

Extension Settings​

Core Configuration​

settings.json
{
  "debuggAI.localPort": 3000,
  "debuggAI.autoTesting": true,
  "debuggAI.telemetry": true,
  "debuggAI.timeout": 30000
}

Advanced Options​

settings.json
{
  "debuggAI.browsers": ["chromium", "firefox"],
  "debuggAI.viewport": {
    "width": 1280,
    "height": 720
  },
  "debuggAI.retries": 2,
  "debuggAI.notifications": true
}

Workspace Configuration​

Project-Level Settings​

Create .vscode/settings.json:

.vscode/settings.json
{
  "debuggAI.localPort": 8080,
  "debuggAI.testPatterns": [
    "components/**",
    "pages/**"
  ]
}

Git Integration​

Add to .gitignore:

# DebuggAI
.debuggai/
test-results/

Troubleshooting​

Extension Not Loading​

# Check VS Code version
code --version

# Reinstall extension
code --uninstall-extension debugg-ai.debugg-ai
code --install-extension debugg-ai.debugg-ai

Command Not Working​

  1. Restart VS Code
  2. Check extension is enabled
  3. Verify DebuggAI account is signed in

Localhost Connection Issues​

  1. Verify app is running: curl localhost:3000
  2. Check firewall settings
  3. Try different port in settings

API Connection Problems​

  1. Check internet connection
  2. Verify account is active
  3. Sign out and sign in again

Updates​

Auto-Updates​

VS Code auto-updates extensions by default.

Manual Update​

  1. Extensions panel
  2. Find DebuggAI
  3. Click "Update" if available

Release Notes​

Check CHANGELOG.md for latest features.

Uninstall​

Remove Extension​

  1. Extensions panel → DebuggAI → Uninstall
  2. Restart VS Code

Clean Removal​

# Remove extension data
rm -rf ~/.vscode/extensions/debugg-ai.*
rm -rf ~/.config/Code/User/globalStorage/debugg-ai.*