Debug — console, xato ekrani, React DevTools

~12 daq · React Native · Kirish va o'rnatish

Muammodan boshlaylik

Vebda xato bo'lsa — F12, Console, Elements. Telefonda esa F12 yo'q. Ilova oq ekran ko'rsatyapti yoki tugma bosilganda hech narsa bo'lmayapti — qayerdan qidirish kerak?

React Native da debug vositalari bor — faqat ular boshqa joyda.

console.log — terminalda

<Pressable onPress={() => {
  console.log('Bosildi, stakan =', stakan);
  setStakan(stakan + 1);
}}>

Natija npx expo start ishlab turgan terminalda chiqadi:

 LOG  Bosildi, stakan = 3

console.warn — sariq, console.error — qizil.

Xato ekrani (RedBox)

Ishlash vaqtidagi xato:

const foydalanuvchi = undefined;
return <Text>{foydalanuvchi.ism}</Text>;

Telefonda qizil ekran:

TypeError: Cannot read property 'ism' of undefined

  app/index.tsx (12:28)
  10 |   const foydalanuvchi = undefined;
> 12 |   return <Text>{foydalanuvchi.ism}</Text>;

Xato matni, fayl, qator va kod parchasi. Tuzatib saqlang — ekran o'zi yopiladi.

Sariq ogohlantirishlar (LogBox) — ekran pastida. Masalan, ro'yxatda key yo'q. Ularni e'tiborsiz qoldirmang — ko'pincha haqiqiy xatoning belgisi.

[!INFO] Qizil va sariq ekranlar faqat ishlab chiqish rejimida. Do'kondagi ilovada xato bo'lsa — ilova shunchaki yopiladi. Shuning uchun production da xatolarni kuzatish vositasi kerak (pastda).

Dev menyu

  • Telefonni silkitish
  • Android emulyator: Ctrl + M (macOS da Cmd + M)
  • iOS simulator: Cmd + D
  • Yoki terminalda m

Menyuda: Reload, Open JS Debugger, Toggle Element Inspector, Toggle Performance Monitor.

Element Inspector

Ekrandagi elementni bosing — uning stillari, o'lchami va komponentlar daraxtidagi o'rni ko'rinadi. Brauzerdagi "Inspect element" ga o'xshash. "Nega bu element joyida emas?" degan savolga eng tez javob.

JS Debugger — Chrome DevTools ga o'xshash

Terminalda j ni bosing (yoki Dev menyu → Open JS Debugger). Kompyuterda React Native DevTools ochiladi:

  • Console — barcha console.log lar, ob'ektlarni ochib ko'rish
  • Sources — kodga breakpoint qo'yish, qadam-baqadam bajarish, o'zgaruvchilarni ko'rish
  • Components — React komponentlar daraxti, props va state
  • Profiler — qaysi komponent qancha vaqt render bo'lyapti

Breakpoint ni kodda ham qo'yish mumkin:

function hisobla(narxlar: number[]) {
  debugger;   // debugger ochiq bo'lsa — shu yerda to'xtaydi
  return narxlar.reduce((a, b) => a + b, 0);
}

Tarmoq so'rovlari

API bilan ishlaganda (31-dars) — so'rov ketdimi, javob nima keldi? React Native DevTools ning Network paneli so'rovlarni ko'rsatadi. Oddiy holatlarda — console.log:

const javob = await fetch(url);
console.log('Status:', javob.status);
const data = await javob.json();
console.log('Data:', JSON.stringify(data, null, 2));

Tez-tez uchraydigan muammolar

Oq ekran, xato yo'q — ko'pincha element flex: 1 siz va balandligi 0. Element Inspector bilan tekshiring.

"Unable to resolve module" — paket o'rnatilmagan yoki import yo'li xato:

npx expo install paket-nomi

O'zgarishlar ko'rinmayapti — keshni tozalab qayta ishga tushiring:

npx expo start --clear

Hech narsa yordam bermasa:

rm -rf node_modules
npm install
npx expo start --clear

Loyiha muammolarini avtomatik tekshirish:

npx expo-doctor

Mos kelmagan kutubxona versiyalari va konfiguratsiya xatolarini topadi.

Production da xatolarni kuzatish

Foydalanuvchi telefonidagi xatoni siz ko'rmaysiz. Buning uchun — Sentry (@sentry/react-native) yoki shunga o'xshash xizmat: har bir xato stack trace, qurilma modeli va OS versiyasi bilan sizga keladi. Haqiqiy ilovada — majburiy.

Nima uchun shunday?

Nima uchun console.log telefonda emas, kompyuter terminalida chiqadi?

Telefonda konsolni ko'rsatadigan joy yo'q — ekran ilovaning o'ziga tegishli. Ishlab chiqish rejimida ilova kompyuterdagi Metro serveriga doimiy ulangan (2-dars): kod u yerdan keladi, loglar u yerga qaytadi. Bu ikki tomonlama aloqa debug ni qulay qiladi — telefon "ekran", kompyuter esa "boshqaruv paneli".

Xulosa

Eslab qoling:

  • console.log — Expo terminalida
  • Qizil ekran — xato, fayl va qator; sariq — ogohlantirish, e'tiborsiz qoldirmang
  • Dev menyu — silkitish, Ctrl/Cmd + M, Cmd + D yoki terminalda m
  • Element Inspector — layout muammolari uchun
  • j — React Native DevTools: Console, breakpoint, Components, Profiler, Network
  • npx expo start --clear, npx expo-doctor — kesh va versiya muammolari
  • Production — Sentry

Keyingi dars

6-dars: View va Text — div va p o'rnida nima bor