Kod sifati

Brauzerda debugging

Debugging (nosozliklarni tuzatish) — bu skriptdagi xatolarni topish va bartaraf etish jarayoni. Zamonaviy brauzerlar va aksariyat boshqa muhitlar buni ancha osonlashtiradigan kuchli debugging vositalarini qo'llab-quvvatlaydi. Ushbu darsda biz brauzer vositalari bilan tanishamiz.

Bizning maydonchamizda (playground) haqiqiy debugging vositasi yo'q, shuning uchun bu darsda misollar asosan tavsif va statik kod ko'rinishida beriladi. Amaliyotni brauzeringizning haqiqiy vositalarida bajaring.

Sources paneli

Chrome brauzerida debugging'ning asosiy joyi — Sources paneli. Uni ochish uchun F12 tugmasini bosing, so'ng Sources yorlig'iga o'ting. Bu panel uch qismdan iborat:

File Navigator — sahifaga ulangan barcha fayllar (HTML, JavaScript, CSS, rasmlar) ro'yxati;
Code Editor — tanlangan faylning matni ko'rsatiladigan muharrir;
JavaScript Debugging — debugging uchun barcha boshqaruv elementlari (breakpoint'lar, o'zgaruvchilar va h.k.).

File Navigator panelini yashirish yoki ko'rsatish uchun Esc tugmasidan foydalaning — u pastdan konsolni ochadi/yopadi. Shunda kodni va konsolni bir vaqtda ko'rish qulay bo'ladi.

Konsol

Agar biz kod ichida Esc orqali konsolni ochsak, u yerda istalgan JavaScript ifodasini yozib, Enter bosib bajarishimiz mumkin. Natija darhol ko'rinadi. Bu tezkor tekshiruvlar uchun juda foydali.

konsol.js

// natija shu yerda chiqadi

Breakpoint (to'xtash nuqtasi)

Breakpoint — bu JavaScript bajarilishi avtomatik to'xtaydigan kod nuqtasi. Kod to'xtaganda biz o'sha ondagi o'zgaruvchilar qiymatlarini tekshirib, buyruqlarni bir-bir bajara olamiz.

Sources panelida faylning qator raqamini bosish orqali breakpoint qo'yiladi. Kod o'sha qatorga yetganda "muzlab" qoladi. Bir vaqtning o'zida bir nechta breakpoint qo'yish mumkin.

Breakpoint'ning yana bir kuchli imkoniyati — shartli breakpoint. Qator raqamiga o'ng tugma bosib, shart yozish mumkin. Kod faqat shart true bo'lganda to'xtaydi. Bu, masalan, sikl ichida faqat ma'lum bir qiymatda to'xtash uchun qulay.

Breakpoint qo'yishning yana bir usuli — kodda to'g'ridan-to'g'ri debugger buyrug'ini yozish. Bu quyida ko'rsatilgan.

debugger buyrug'i

Biz kodni to'xtatishni bevosita skript ichida ham belgilashimiz mumkin — buning uchun debugger buyrug'idan foydalaniladi:

function hisobla(a, b) {
  let yigindi = a + b;

  debugger; // <-- shu yerda kod to'xtaydi (agar dev tools ochiq bo'lsa)

  return yigindi * 2;
}

hisobla(3, 4);

debugger buyrug'i faqat ishlab chiquvchi vositalari (dev tools) ochiq bo'lganda ishlaydi. Aks holda brauzer uni e'tiborsiz qoldiradi. Ishlab chiqarishga (production) chiqarishdan oldin bunday buyruqlarni albatta olib tashlang.

Kodni qadamma-qadam bajarish

Kod breakpoint'da to'xtaganda, Sources panelining o'ng yuqorisidagi tugmalar orqali uni boshqaramiz. Asosiy tugmalar:

Resume (davom ettirish) — kodni keyingi breakpoint'gacha yoki oxirigacha davom ettiradi (F8);
Step (keyingi qadam) — keyingi buyruqni bajaradi (F9);
Step over — keyingi buyruqni bajaradi, lekin funksiya ichiga kirmaydi (funksiyani butunlay bajaradi);
Step into — funksiya chaqiruviga duch kelsa, uning ichiga kiradi;
Step out — joriy funksiyani oxirigacha bajarib, undan chiqadi.

Bu tugmalar yordamida siz kodning har bir qadamini kuzatib, qayerda va nima uchun kutilmagan qiymat paydo bo'lganini aniqlaysiz.

O'zgaruvchilarni kuzatish

Kod to'xtaganda, o'ng paneldagi bloklar juda foydali:

Watch — istalgan ifodani kiritib, uning joriy qiymatini doimiy kuzatish mumkin;
Call Stack — funksiya chaqiruvlarining ichki zanjirini ko'rsatadi (qaysi funksiya qaysinisini chaqirgani);
Scope — joriy paytdagi barcha o'zgaruvchilar qiymatlari (lokal va global).

Kod ichida console.log yozib "debugging" qilish mumkin, lekin breakpoint'lar ancha kuchli: ular kodni o'zgartirmasdan, istalgan ondagi holatni to'liq tekshirishga imkon beradi.

Xulosa

Kodni debugging qilishning uch asosiy yo'li bor:

Konsol — console.log orqali qiymatlarni chiqarish;
Breakpoint'lar — Sources panelida qator raqamini bosib qo'yiladi;
debugger — kod ichiga yozilgan to'xtash buyrug'i.

To'xtagan kodni Step tugmalari bilan qadamma-qadam bajarib, Watch, Call Stack va Scope bloklari orqali holatni kuzatasiz. Bu ko'nikmani egallash dasturchi uchun juda muhim.