Brauzer DevTools va debugging

Debugging — xatoni tasodifiy kod o’zgartirib emas, sababini topib tuzatish jarayoni. Brauzer DevTools’i frontend va HTTP muammolari uchun eng muhim asboblardan biridir. Uni ochish uchun ko’p brauzerda F12 yoki Ctrl+Shift+I ishlaydi.

Asosiy panellar

Elements — brauzer ko’rayotgan sahifa

Elements panelida serverdan kelgan asl fayl emas, brauzer xotirasidagi joriy DOM ko’rinadi. JavaScript qo’shgan elementlar ham shu yerda paydo bo’ladi.

Elementni tanlab:

• qaysi CSS qoida ishlayotganini;
• qaysi qoida ustidan chizilib, yutqazganini;
• box modeldagi margin, border, padding va o’lchamni;
• accessibility tree’dagi rol va nomni ko’rish mumkin.

DevTools ichidagi HTML yoki CSS o’zgarishi vaqtinchalik. Sahifani yangilasangiz yo’qoladi, shuning uchun topilgan tuzatishni keyin source faylga yozish kerak.

Bu vaqtinchalikligi aslida afzallik: xavfsiz tajriba maydoni. Rangni, masofani yoki display qiymatini darhol o’zgartirib natijani ko’rasiz — kod tahrirlash, saqlash va yangilash tsiklisiz.

CSS nega ishlamayapti

Eng ko’p uchraydigan frontend savoli shu. Elements panelidagi Styles bo’limida javob deyarli har doim ko’rinadi:

• Qoida ustidan chizilgan bo’lsa — uni boshqa, kuchliroq selektor yengib o’tgan.
• Qoida umuman ko’rinmasa — selektor bu elementga tushmayapti yoki fayl yuklanmagan.
• Qiymat to’g’ri, lekin natija yo’q bo’lsa — element display turi buni qo’llab-quvvatlamasligi mumkin.

Computed bo’limi esa yakuniy, brauzer haqiqatan qo’llagan qiymatni ko’rsatadi. Bahs tugatadigan joy aynan shu.

Responsive va qurilma sinovi

DevTools’dagi qurilma rejimi (Ctrl+Shift+M) sahifani turli ekran o’lchamida ko’rsatadi. Bu haqiqiy telefon o’rnini bosmaydi, lekin layout muammosining ko’pini topadi.

Tekshiring: matn kesilmayaptimi, tugmalar barmoq uchun yetarlicha kattami, gorizontal aylantirish paydo bo’lmadimi? Oxirgisi eng ko’p uchraydigan xato va odatda sababi bitta juda keng element bo’ladi.

Console — xato va kuzatuvlar

Console JavaScript xatolari, ogohlantirishlar va dasturchi chiqargan loglarni ko’rsatadi. Xato matnidagi fayl va qator havolasini ochib, muammo qayerda yuz berganini ko’rish mumkin.

console.log('Yuklangan mahsulotlar:', products.length);
console.error('So\'rov bajarilmadi:', error);

Log foydali, lekin tasodifiy ko’p log muammoni yashiradi. Nimani tekshirayotganingizni aniq yozing va maxfiy token, parol yoki shaxsiy ma’lumotni Console’ga chiqarmang.

console.log dan tashqari bir necha foydali usul bor. console.table() massiv yoki obyektlar ro’yxatini jadval ko’rinishida chiqaradi — ma’lumot tuzilishini tekshirishda ancha qulay. console.warn() va console.error() esa xabarni ajratib ko’rsatadi va filtrlash imkonini beradi.

Console’da xato xabari ko’rinsa, uning yonidagi uchburchakni bosing: u stack trace ni ochadi, ya’ni xato qaysi funksiyalar zanjiri orqali yuzaga kelganini ko’rsatadi. Ro’yxatning yuqorisi — xato sodir bo’lgan joy, pastroqda esa uni chaqirgan kod turadi.

Muhim tafsilot: Console’da ko’rsatilgan obyekt jonli havola bo’lishi mumkin. Ya’ni siz uni ochganingizda, obyektning hozirgi holati ko’rinadi — log yozilgan paytdagi emas. Aniq nusxa kerak bo’lsa, console.log(JSON.stringify(obyekt)) ishlating.

Network — so’rov va javob dalili

Network paneli sahifa yuborgan HTTP so’rovlarni ko’rsatadi. Muammo frontenddami yoki serverdami, aniqlashda quyidagi savollar yordam beradi:

1. So’rov umuman yuborildimi?
2. URL va metod to’g’rimi?
3. Holat kodi nima?
4. Request body va headerlarda kutilgan ma’lumot bormi?
5. Server javobi qanday formatda?
6. So’rov qancha vaqt oldi va nimani kutdi?

Sources va breakpoint

Sources panelida JavaScript bajarilishini ma’lum qatorda to’xtatish uchun breakpoint qo’yiladi. Kod to’xtaganda o’zgaruvchilar qiymati, call stack va keyingi qadamni ko’rish mumkin. Bu ketma-ket o’nlab console.log yozishdan aniqroq bo’lishi mumkin.

Breakpoint turlari faqat qator bilan cheklanmaydi. Event listener, DOM o’zgarishi yoki ma’lum fetch so’rovi paytida ham bajarilishni to’xtatish mumkin.

Ayniqsa foydali turi — shartli breakpoint. Sikl ming marta aylanayotgan bo’lsa, har aylanishda to’xtash foyda bermaydi. Qator raqamiga o’ng tugma bosib shart yozasiz, masalan id === 42, va kod faqat o’sha holatda to’xtaydi.

Kod to’xtaganda Scope bo’limida o’sha paytdagi barcha o’zgaruvchi qiymati ko’rinadi, Call Stack esa bu funksiya qayerdan chaqirilganini ko’rsatadi. Ikkinchisi ayniqsa qimmatli: xato funksiya ichida ko’rinsa ham, sabab uni noto’g’ri qiymat bilan chaqirgan joyda bo’lishi mumkin.

Kod minifikatsiya qilingan bo’lsa (production’da odatda shunday), source map yordam beradi — u brauzerga asl, o’qiladigan kodni ko’rsatish imkonini beradi.

Application va boshqa panellar

Elements, Console, Network va Sources — eng ko’p ishlatiladigan to’rttasi. Lekin yana bir nechtasi bilim beradi.

Application panelida brauzer saqlagan ma’lumot ko’rinadi: cookie’lar, localStorage, sessionStorage va service worker. Login muammosini tekshirishda birinchi navbatda shu yerga qaraladi — cookie o’rnatilganmi, HttpOnly belgilanganmi, muddati tugamaganmi?

Lighthouse sahifani avtomatik tahlil qilib, performance, accessibility va SEO bo’yicha ball va aniq tavsiyalar beradi. Bu boshlang’ich tekshiruv sifatida juda foydali, lekin ball ortidan quvmang — tavsiyalarni o’qing va qaysi biri sizning foydalanuvchingizga haqiqatan ta’sir qilishini baholang.

Performance paneli sahifa yuklanishi va ishlashini vaqt bo’yicha yozib oladi. Sahifa “sekin” ekanini his qilish boshqa, sabab qayerdaligini ko’rish boshqa. Bu vosita murakkabroq, lekin performance bilan jiddiy ishlaganda kerak bo’ladi.

Tizimli debugging usuli

1. Takrorlang. Xato qaysi aniq qadamda yuz berishini yozing.
2. Kutilgan natijani belgilang. Nima bo’lishi kerak edi?
3. Chegarani toraytiring. DOM, CSS, JavaScript, HTTP yoki serverdan qaysi biri?
4. Bitta taxmin tuzing. Masalan, “API 401 qaytaryapti”.
5. Dalil bilan tekshiring. Network yoki breakpointdan foydalaning.
6. Eng kichik tuzatishni qiling. Bir vaqtning o’zida ko’p narsani almashtirmang.
7. Qayta test va regressiya. Muammo ketdimi, boshqa joy buzilmadimi?

Keng tarqalgan xatolar va ularning belgisi

Tajriba orttirgani sari ba’zi xatolarni belgisidan tanib olasiz. Quyidagi jadval eng tez-tez uchraydiganlarini jamlaydi:

Belgi	Ehtimoliy sabab	Qayerga qarash
undefined is not a function	Nom noto’g’ri yoki obyekt hali yuklanmagan	Console, Sources
Ekran bo’sh, xato yo’q	Ma’lumot keldi, render mantig’i xato	Network + breakpoint
Tugma bosilmayapti	Hodisa ulanmagan yoki ustida boshqa element bor	Elements, Console
Stil qo’llanmayapti	Selektor yutqazgan yoki fayl yuklanmagan	Elements → Styles
So’rov ketmayapti	preventDefault yo’q yoki JS xatosi to’xtatgan	Console, Network
401 qaytmoqda	Cookie yuborilmayapti yoki muddati tugagan	Application, Network

Bu jadval o’ylashni almashtirmaydi, lekin qayerdan boshlashni aytadi. Xato belgisi va tekshiriladigan panel orasidagi bog’lanish vaqt bilan avtomatik bo’lib qoladi.

Amaliy mashq

Har kuni ishlatadigan bitta saytni oching va uch vazifani bajaring.

Avval Elements panelida biror sarlavhaning rangini o’zgartiring va natijani ko’ring. Keyin Network panelida sahifani yangilab, eng uzoq davom etgan so’rovni toping. Oxirida Console’da document.querySelectorAll('img').length yozib, sahifada nechta rasm borligini aniqlang.

So’ng ataylab xato qiling: Console’da mavjud bo’lmagan funksiyani chaqiring va xato xabarini diqqat bilan o’qing. Unda fayl, qator va sabab ko’rsatilganini ko’rasiz — aynan shu ma’lumot haqiqiy debuggingda yo’l ochadi.

Qisqacha xulosa

• Elements DOM, CSS va box modelni tekshiradi.
• Console JavaScript xatosi va nazorat loglarini ko’rsatadi.
• Network HTTP so’rovi, javob, holat kodi va vaqtni ochib beradi.
• Breakpoint kodni to’xtatib, qiymatlarni qadam-baqadam ko’rishga yordam beradi.
• Debuggingning asosi — muammoni takrorlash, toraytirish va dalil bilan tekshirish.

Keyingi darsda HTTP amaliy laboratoriya — DevTools bilan real so’rovni qadam-baqadam tahlil qilamiz.