MohirDox

Ko'rinishi

JavaScript Debugging To'xtash Nuqtalari (Breakpoints) ​

Breakpoints, Watch, Scope ​

To'xtash nuqtalari JavaScript-ni pauza qilib, haqiqatan nima sodir bo'layotganini tekshirishga imkon beradi. Bu konsoldan keyin eng kuchli debugging texnikasidir.

To'xtash nuqtasi nima? ​

To'xtash nuqtasi kod bajarilishini ma'lum bir qatorda to'xtatadi. Kod to'xtaganda, o'zgaruvchilarni tekshirishingiz va kodni qatorma-qator bajarishingiz mumkin. To'xtash nuqtalari brauzerning dasturchi vositalari ichida o'rnatiladi.

Eslatma

To'xtash nuqtalarini ishlatganda qiymatlarni taxmin qilmaysiz — ularni ko'rasiz.

To'xtash nuqtasini o'rnatish ​

Debugger oynasida JavaScript kodida to'xtash nuqtalarini o'rnatishingiz mumkin. Har bir to'xtash nuqtasida JavaScript bajarilishni to'xtatadi va JavaScript qiymatlarini tekshirishingizga imkon beradi. Qiymatlarni tekshirgandan so'ng, kodni davom ettirishingiz mumkin (odatda play tugmasi bilan).

js
function add(a, b) {
  let result = a + b;
  return result;
}

document.getElementById("demo").innerHTML = add(10, 5);
document.getElementById("demo").innerHTML = add(10, 50);
document.getElementById("demo").innerHTML = add(10, 500);
document.getElementById("demo").innerHTML = add(10, 5000);
  1. Brauzer dasturchi vositalarini F12 bilan oching va Sources tabiga o'ting
  2. Skriptingizdagi qator raqamlarini bosib to'xtash nuqtalarini qo'shing
  3. To'xtash nuqtasini ishga tushirish uchun sahifani qayta yuklang
  4. Kodni qatorma-qator bajarish uchun play tugmasini ishlating

debugger kalit so'zi ​

debugger kalit so'zi JavaScript bajarilishini to'xtatadi va (agar mavjud bo'lsa) debugging funksiyasini chaqiradi. Bu debuggerda to'xtash nuqtasini o'rnatish bilan bir xil funksiyaga ega.

Agar debugging mavjud bo'lmasa, debugger bayonoti hech qanday ta'sirga ega bo'lmaydi.

js
let x = 15 * 5;
debugger;
document.getElementById("demo").innerHTML = x;

Kodni qadamma-qadam bajarish ​

Bajarish pauza qilinganda, kodni qanday ishlashini boshqarishingiz mumkin:

  • Step Over — keyingi qatorni bajaradi
  • Step Into — funksiyaga kiradi
  • Step Out — joriy funksiyadan chiqadi

Maslahat

Sekin qadamlang va qiymatlar qanday o'zgarishini kuzating.

Scope paneli ​

Scope paneli joriy qatorda qaysi o'zgaruvchilar mavjudligini ko'rsatadi. U o'zgaruvchilarning qayerda yashashini tushunishga yordam beradi.

  • Local o'zgaruvchilar funksiya ichida mavjud
  • Global o'zgaruvchilar hamma joyda mavjud
js
let x = 10;

function test() {
  let y = 5;
  console.log(x + y);
}

test();

To'xtash nuqtasida y faqat funksiya ichida mavjud.

O'zgaruvchilarni kuzatish (Watch) ​

Watch paneli o'zgaruvchi qiymatlarini jonli kuzatishga imkon beradi. Bu qiymatlar ko'p marta o'zgarganda foydalidir.

Watch paneliga o'zgaruvchi nomini qo'shing. Kodni qadamma-qadam bajarayotganda qiymat avtomatik yangilanadi.

Maslahat

Ko'p console.log() chaqiruvlari qo'shish o'rniga o'zgaruvchilarni kuzating.

Keng tarqalgan boshlang'ich xatolar ​

Ogohlantirish

Boshlang'ichlar ko'pincha to'xtash nuqtasini qo'shgandan keyin sahifani qayta yuklashni unutadilar.

Ogohlantirish

Sikllar ichidagi to'xtash nuqtalari ko'p marta ishga tushishi mumkin.

Agar bajarish qayta-qayta to'xtasa, to'xtash nuqtasini vaqtincha o'chiring.

To'xtash nuqtalarini qachon ishlatish kerak ​

  • Qiymatlar kutilmaganda o'zgarganda
  • Kod ishlaydi, lekin noto'g'ri natija berganida
  • Murakkab mantiqni debug qilayotganda