Debuggaus on olennainen osa ohjelmistokehitystä. Cursor tekee siitä helpompaa yhdistämällä perinteiset debuggaustyökalut AI:n älykkyyteen. Tässä oppaassa opit tehokkaat debuggaustekniikat.
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?"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;
}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?"
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-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-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();
}Optimoi Cursorin asetukset parasta vibekoodauskokemusta varten.
Opi käyttämään TypeScriptiä tehokkaasti Cursorissa - tyypit parantavat AI:n vastauksia.
Syvällinen opas Cursor Composerin käyttöön - vibekoodauksen tehokkain työkalu.
Löydä lisää vinkkejä ja oppaita Cursorin tehokäyttöön.