Skip to content
The Terminal

Full-Stack Debugging

import { Steps, Aside } from ‘@astrojs/starlight/components’;

The Terminal’s unified workspace makes full-stack debugging dramatically faster. Instead of switching between Chrome DevTools, your terminal, and your editor, everything is visible at once — and your AI can see all of it.

The Debug Layout

Section titled “The Debug Layout”

Set up a four-panel workspace:

┌────────────────────┬────────────────────┐
│                    │                    │
│   Terminal          │   Browser          │
│   (dev server)     │   (your app)       │
│                    │                    │
├────────────────────┴────────────────────┤
│                                         │
│   Terminal (Gee-Code)                    │
│                                         │
└─────────────────────────────────────────┘
  • Top-left: Your dev server with hot reload
  • Top-right: Browser pointing at localhost
  • Bottom: Gee-Code, connected to both

Frontend Debugging

Section titled “Frontend Debugging”

Console Errors

Section titled “Console Errors”

When your app throws an error, Gee-Code reads it directly from the browser’s console:

You: "The page crashed after clicking submit"


Gee-Code:
  ✓ Console error: Uncaught TypeError: data.users.map is not a function
  ✓ Location: UserList.jsx:24
  ✓ The API returned {users: null} instead of {users: []}
  ✓ Fix: Added defensive check — (data.users ?? []).map(...)

Layout Issues

Section titled “Layout Issues”

Ask Gee-Code to screenshot the page and diagnose visual problems:

You: "The sidebar is overlapping the main content"


Gee-Code:
  ✓ Screenshot captured
  ✓ Inspecting DOM: sidebar has position: fixed but no left/width constraints
  ✓ Main content has no margin-left to account for sidebar width
  ✓ Fix: Added margin-left: 250px to main content container

State Problems

Section titled “State Problems”

Gee-Code can execute JavaScript in the page to inspect application state:

You: "The cart shows 0 items but I added something"


Gee-Code:
  ✓ Eval: window.__REDUX_STORE__.getState().cart
  ✓ Cart state: { items: [], lastUpdated: null }
  ✓ The addToCart action isn't dispatching — found typo in action type

API Debugging

Section titled “API Debugging”

Network Monitoring

Section titled “Network Monitoring”

Gee-Code reads network requests from the browser panel:

You: "The dashboard data isn't loading"


Gee-Code:
  ✓ Network: GET /api/dashboard → 401 Unauthorized
  ✓ Request headers missing Authorization token
  ✓ Auth token exists in localStorage but isn't being included in API client
  ✓ Fix: Added Authorization header to fetch wrapper

Request/Response Mismatches

Section titled “Request/Response Mismatches”
You: "The form submits but nothing changes"


Gee-Code:
  ✓ Network: POST /api/users → 200 OK
  ✓ Response body: { success: true, user: {...} }
  ✓ But frontend expects { data: { user: {...} } }
  ✓ Fix: Updated response handler to match actual API shape

Backend Debugging

Section titled “Backend Debugging”

Gee-Code can read your dev server’s terminal output too:

You: "API calls are slow"


Gee-Code:
  ✓ Network: GET /api/products → 200 (3.2s)
  ✓ Server logs show: "Query took 3100ms"
  ✓ Reading the query... missing index on products.category
  ✓ This query does a full table scan for each category filter

The Debug Cycle

Section titled “The Debug Cycle”
  1. Observe — Gee-Code reads console errors, network failures, and server logs
  2. Diagnose — It correlates frontend symptoms with backend causes
  3. Fix — It edits the relevant code
  4. Verify — Hot reload applies the fix, Gee-Code checks the browser to confirm

This cycle runs in seconds, not minutes, because there’s no context switching.

Next Steps

Section titled “Next Steps”