Keskitaso15 min

Cursor: Debuggaus AI:n avulla

Debuggaus on olennainen osa ohjelmistokehitystä. Cursor tekee siitä helpompaa yhdistämällä perinteiset debuggaustyökalut AI:n älykkyyteen. Tässä oppaassa opit tehokkaat debuggaustekniikat.

Edellytykset: Cursor: Chat vs Composer

Virheen analysointi AI:lla

Kun kohtaat virheen, AI on paras apu:

Tapa 1: Kopioi virheviesti Chatiin 1. Kopioi koko virheviesti 2. Avaa Chat (Cmd+L) 3. Liitä ja kysy: "Mikä aiheuttaa tämän virheen?"

Tapa 2: Valitse virheellinen koodi 1. Valitse koodi jossa virhe esiintyy 2. Avaa Chat (Cmd+L) 3. "Miksi tämä koodi ei toimi?"

Tapa 3: Inline Chat 1. Klikkaa virhettä osoittavaa punaista merkintää 2. Paina Cmd+K 3. "Korjaa tämä virhe"

// Esimerkki Chat-promptista:
"Saan tämän virheen:
TypeError: Cannot read properties of undefined (reading 'map')

Koodi on:
const ProductList = ({ products }) => {
  return products.map(p => <ProductCard {...p} />)
}

Mikä aiheuttaa virheen ja miten korjaan?"

Console.log AI:n avulla

AI voi auttaa strategisten logien lisäämisessä:

Prompt: "Lisää console.log-lauseet tähän funktioon debuggausta varten. Haluan nähdä: - Funktion parametrit - Väliarvot - Lopputuloksen"

AI lisää:

function processOrder(order) {
  console.log('[processOrder] Input:', order);

  const items = order.items.map(item => {
    const total = item.price * item.quantity;
    console.log('[processOrder] Item total:', { item: item.name, total });
    return { ...item, total };
  });

  const subtotal = items.reduce((sum, item) => sum + item.total, 0);
  console.log('[processOrder] Subtotal:', subtotal);

  const result = { items, subtotal, total: subtotal * 1.24 };
  console.log('[processOrder] Result:', result);

  return result;
}

Vinkki: Pyydä AI:ta poistamaan logit kun olet valmis: "Poista kaikki console.log-lauseet tästä tiedostosta"

Breakpointit ja Debugger

Cursor tukee VS Coden debuggeria:

Breakpointin asettaminen: - Klikkaa rivinumeron vasenta puolta - Punainen pallo = breakpoint

Debuggauksen aloitus: 1. Avaa Run and Debug (Cmd+Shift+D) 2. Valitse tai luo launch.json 3. Klikkaa "Start Debugging" (F5)

Debugger-näkymä: - Variables: Muuttujien arvot - Watch: Seurattavat lausekkeet - Call Stack: Kutsupino - Breakpoints: Breakpointit

AI ja debugger yhdessä: Pysäytä breakpointiin, sitten: - Kopioi muuttujien arvot Chatiin - "Miksi muuttuja X on undefined?"

Tyyppivirheiden korjaus

TypeScript-virheet ovat yleisiä - AI osaa korjata:

Virhe: "Type 'string	undefined' is not assignable to type 'string'"

Ratkaisu AI:lla: 1. Valitse virheellinen koodi 2. Cmd+K: "Korjaa tämä tyyppivirhe"

AI ehdottaa:

// Ennen
function greet(user: User) {
  const name: string = user.name; // Error!
  return `Hello, ${name}`;
}

// AI:n korjaus
function greet(user: User) {
  const name: string = user.name ?? 'Guest';
  return `Hello, ${name}`;
}

// Tai
function greet(user: User) {
  if (!user.name) throw new Error('Name required');
  const name: string = user.name;
  return `Hello, ${name}`;
}

React-debuggaus

React-sovellusten debuggaus AI:lla:

State-ongelmat: "Miksi tila ei päivity kun kutsun setCount?"

Re-render ongelmat: "Miksi tämä komponentti renderöityy jatkuvasti?"

Hook-virheet: "Saan 'Invalid hook call' virheen, miksi?"

Esimerkki debuggauksesta:

// Ongelma: Laskuri ei toimi oikein
function Counter() {
  const [count, setCount] = useState(0);

  const increment = () => {
    setCount(count + 1);
    setCount(count + 1);
    setCount(count + 1);
    // Miksi count kasvaa vain yhdellä?
  };
}

// AI selittää ja korjaa:
function Counter() {
  const [count, setCount] = useState(0);

  const increment = () => {
    setCount(prev => prev + 1);
    setCount(prev => prev + 1);
    setCount(prev => prev + 1);
    // Nyt toimii! Käytä funktiomuotoa.
  };
}

API-kutsujen debuggaus

API-ongelmat ovat yleisiä vibekoodauksessa:

Network-tarkistus: 1. Avaa Developer Tools (F12) 2. Network-välilehti 3. Tarkista API-kutsut

AI-avusteinen debuggaus:

// Kopioi tämä Chatiin:
"API-kutsu epäonnistuu. Tässä tiedot:

Endpoint: POST /api/users
Status: 400 Bad Request
Response: { error: 'Invalid content type' }

Koodi:
async function createUser(data) {
  const response = await fetch('/api/users', {
    method: 'POST',
    body: JSON.stringify(data)
  });
  return response.json();
}

Mikä on vikana?"

// AI huomaa: Content-Type header puuttuu!
async function createUser(data) {
  const response = await fetch('/api/users', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
    },
    body: JSON.stringify(data)
  });
  return response.json();
}

Vinkki: Kopioi aina status code ja response body - ne auttavat AI:ta ymmärtämään ongelman.

Yhteenveto

Kopioi virheviestit suoraan Chatiin
AI voi lisätä ja poistaa debug-logit automaattisesti
Yhdistä breakpointit ja AI-analyysi
Tyyppivirheet ovat AI:lle helppoja korjata

Usein kysytyt kysymykset

Miten debuggaan tuotantovirhettä?

Kopioi virheloki (stack trace) Chatiin kontekstin kanssa. AI voi usein päätellä ongelman vaikka ei näe koko koodia.

Toimiiko React DevTools Cursorissa?

React DevTools on selainlaajennus, joten se toimii selaimen puolella. Cursor ei vaikuta siihen.

Seuraavaksi

Keskitaso10 min

Tutustu kaikkiin Cursor-oppaisiin

Löydä lisää vinkkejä ja oppaita Cursorin tehokäyttöön.

Kaikki Cursor-oppaat