Skip to main content

VS Code Setup

Install the DebuggAI browser testing extension in under 2 minutes.

Installation​

  1. Install from VS Code Marketplace

    ext install debugg-ai.debugg-ai

    Or search "DebuggAI" in the Extensions panel (Cmd+Shift+X)

  2. Sign in to DebuggAI

    • Extension will prompt for authentication
    • Use your debugg.ai account
    • Or sign up during installation

  3. Verify installation

    • Press Cmd+Shift+P
    • Type "DebuggAI" - you should see commands available
    • Status bar shows "DebuggAI: Connected"

Configuration​

Default Settings​

  • Local server port: 3000 (most common)
  • Test timeout: 60 seconds
  • Results location: VS Code Test Results panel

Custom Port Setup​

If your app runs on a different port:

  1. Open DebuggAI extension settings (gear icon)
  2. Find "Testing Configuration" section
  3. Update "Local Server Port" field
  4. Save changes

Example for Next.js on port 3001:

{
  "debuggai.localServerPort": 3001
}

Keyboard Shortcuts​

  • Cmd+Alt+C (Mac) or Ctrl+Alt+C (Windows/Linux): Create new E2E test
  • Cmd+Shift+P then "DebuggAI": Access all commands

First Test​

With your app running on localhost:

  1. Press Cmd+Alt+C
  2. Enter test description: "Test the homepage loads correctly"
  3. Click "Run Test"
  4. Watch results appear in Test Results panel

Expected result: Screenshot of your homepage with pass/fail status.

Troubleshooting​

Extension not connecting?​

  • Check VS Code reload (Cmd+Shift+P → "Reload Window")
  • Verify DebuggAI account is active
  • Check internet connection

Can't find test results?​

  • Open Test Results panel: View → Test Results
  • Or use Cmd+Shift+Y and switch to "Test Results" tab

Port issues?​

  • Confirm your app is running: open localhost:3000 in browser
  • Update port in extension settings if using different port
  • Check firewall isn't blocking localhost connections

Next: Learn to write effective tests in First Test