JS debug qilish
Yangi boshlanuvchilar uchun debug
Ko‘pgina yangi boshlanuvchilar debug qila olmagani uchun chiqishadi.
Ushbu sahifada kod nima uchun ishlamayotganini qanday aniqlash mumkinligi ko‘rsatilgan.
Nosozliklarni tuzatish kodingizdagi xatolarni (xatolarni) topish va tuzatishni anglatadi.
Xatolar normaldir. Bu mahorat ularni tezda qanday topishni o‘rganishdir.
Nima uchun kod ishlamaydi?
Dasturlash kodi sintaksis yoki mantiqiy xatolarni o‘z ichiga olishi mumkin.
Ushbu xatolarning aksariyatini tashxislash qiyin.
Kod bajarilmasa, yangi boshlanuvchilar ko‘pincha nima noto‘g‘ri ekanligini taxmin qilishadi.
Nosozliklarni tuzatish buning aksi: siz faktlarni tekshirasiz.
Nosozliklarni tuzatishning yaxshi odati: O‘qing → Ko‘paytiring → Qisqartiring → Tuzatish
- Xatoni o‘qing
- Muammoni takrorlang
- Kichik bir misolga qisqartiring
- Keyin tuzating.
Ko‘pincha, dasturlash kodida xatolar bo‘lsa, hech narsa bo‘lmaydi. Hech qanday xato xabarlari yo‘q va siz xatolarni qaerdan qidirish kerakligi haqida hech qanday ko‘rsatma olmaysiz.
Dasturlash kodidagi xatolarni qidirish (va tuzatish) kodni tuzatish deb ataladi.
Har safar kompyuter kodini yozganingizda xatolar bo‘lishi mumkin va sodir bo‘ladi.
JavaScript tuzatuvchilari
Nosozliklarni tuzatish oson emas. Yaxshiyamki, barcha zamonaviy brauzerlarda o‘rnatilgan JavaScript tuzatuvchisi mavjud.
O‘rnatilgan tuzatuvchilarni yoqish va o‘chirish mumkin, bu esa xatolar haqida foydalanuvchiga xabar berishga majbur qiladi.
Tuzatish vositasi yordamida siz to‘xtash nuqtalarini (kod bajarilishi to‘xtatilishi mumkin bo‘lgan joylar) o‘rnatishingiz va kod bajarilayotganda o‘zgaruvchilarni tekshirishingiz mumkin.
Bilasizmi?
Nosozliklarni tuzatish - bu kompyuter dasturlaridagi xatolarni (xatolarni) tekshirish, topish va kamaytirish jarayoni.
Ma’lum bo‘lgan birinchi kompyuter xatosi elektronikada tiqilib qolgan haqiqiy xato (hasharot) edi.
1-qadam: Konsolga qarang
Brauzer konsoli JavaScript-dan xatolar va xabarlarni ko‘rsatadi.
Agar sizning kodingiz "hech narsa qilmasa", konsol ko‘pincha nima uchun ekanligini aytadi.
Odatda (aks holda ushbu sahifaning pastki qismidagi amallarni bajaring), siz F12 tugmasi bilan brauzeringizda debug’ni faollashtirasiz va debug menyusida Konsol-ni tanlang.
Agar siz faqat bitta narsani qilsangiz: biror narsa bajarilmasa, har doim konsolni tekshiring.
2-qadam: console.log() dan foydalaning
JavaScript-da console.log() qiymatlarni konsolga chop etadi.
Bu sizning kodingiz nima qilayotganini ko‘rishga yordam beradi.
Misollar
Xabarni chop eting:
<!DOCTYPE html>
<html>
<body>
<h1>My First Web Page</h1>
<script>
console.log("Hello!");
</script>
</body>
</html>
O‘zingiz sinab ko‘ring »
Nima noto‘g‘ri ekanligini aniqlash uchun o‘zgaruvchilarni chop eting:
let price = 50;
let quantity = 3;
let total = price * quantity;
console.log("Total:", total);
O‘zingiz sinab ko‘ring »
Maslahat:
Muammo bor deb gumon qilgan satringizdan oldin va keyin qiymatni konsolga chiqaring.
Bu sizga ishlar qayerda noto‘g‘ri ketayotganini aytishi mumkin.
3-qadam: O‘z taxminlaringizni tasdiqlang
Ko‘pgina xatolar siz qiymatni biror narsa deb o‘ylaganingiz uchun sodir bo‘ladi, lekin u emas.
Qiymatni tekshiring.
Turini tekshiring.
Misol
Raqamlar va Stringlar boshqacha harakat qiladi:
let x = 5;
let y = "5";
console.log(x + y); // 55 (string!)
console.log(x + Number(y)); // 10 (number)
O‘zingiz sinab ko‘ring »
Xato xabarlarini o‘qish (boshlang‘ichlar uchun)
Xato xabarlari qo‘rqinchli ko‘rinadi, lekin ular odatda bir nechta umumiy narsalardan birini anglatadi.
Referans xatosi
Ma’nosi: Bu nom mavjud emas.
Ko‘pincha noto‘g‘ri imlo yoki o‘zgaruvchi e’lon qilinmaydi.
TypeError
Ma’nosi: Siz qiymatdan imkonsiz tarzda foydalanishga harakat qildingiz.
Often undefined or null.
Misol
let x;
console.log(x.length);
// TypeError: Cannot read properties of undefined
O‘zingiz sinab ko‘ring »
Konsol oynasida xato odatda qator raqamini o‘z ichiga oladi.
Aniq qatorga o‘tish uchun konsolda uni bosing.
Oddiy debug nazorat ro‘yxati
- Konsolni xatolar uchun tekshiring
- Xato xabarini diqqat bilan o‘qing
- Log values with
console.log() - Muammoni kichik bir misolga qisqartiring
- Bir vaqtning o‘zida bitta narsani tuzating.
Boshlanuvchilar uchun keng tarqalgan xatolar
Misollar
Xato: == yoki === o‘rniga = dan foydalanish
let x = 10;
if (x = 5) {
console.log("This runs");
}
O‘zingiz sinab ko‘ring »
Tuzatish: Taqqoslashdan foydalaning:
let x = 10;
if (x === 5) {
console.log("This runs only if x is 5");
}
O‘zingiz sinab ko‘ring »
if operatoringiz g‘alati ishlasa, tasodifan = ishlatmaganingizni tekshiring.Asosiy brauzerlarning debug vositalari
Brauzeringizda debug’ni F12 yordamida faollashtirishingiz va debug menyusida Konsol ni tanlashingiz mumkin.
Aks holda, quyidagi amallarni bajaring:
Chrome
- Brauzerni oching.
- Menyudan "Qo‘shimcha vositalar" ni tanlang.
- Asboblardan "Dasturchi vositalari" ni tanlang.
- Nihoyat, Konsol-ni tanlang.
Firefox
- Brauzerni oching.
- Menyudan "Veb dasturchi" ni tanlang.
- Nihoyat, "Veb konsol" ni tanlang.
Chet
- Brauzerni oching.
- Menyudan "Tuzuvchi asboblari" ni tanlang.
- Nihoyat, "Konsol" ni tanlang.
Opera
- Brauzerni oching.
- Menyudan "Tuzuvchi" ni tanlang.
- "Ishlab chiquvchi" bo‘limida "Dasturchi vositalari" ni tanlang.
- Nihoyat, "Konsol" ni tanlang.
Safari
- Asosiy menyuda Safari, Preferences, Advanced-ga o‘ting.
- "Menyu satrida ishlab chiqish menyusini ko‘rsatishni yoqish" belgisini belgilang.
- Menyuda yangi "Ishlab chiqish" opsiyasi paydo bo‘lganda: "Xato konsolini ko‘rsatish" ni tanlang.
Shuningdek qarang:
W3Schools Pathfinder
Yutuqlaringizni kuzating – bu bepul!