MohirDox

Ko'rinishi

JavaScript Debugging (Xatolarni topish) ​

Boshlang'ichlar uchun debugging ​

Ko'pgina boshlang'ichlar debugging qila olmaganliklari uchun tashlab ketadilar.

Bu sahifa sizga kod nima uchun ishlamayotganini aniqlashni o'rgatadi.

Debugging — kodingizda xatolarni (bug) topish va tuzatish jarayoni. Xatolar oddiy narsa. Mahorat — ularni tezda topishni o'rganish.

Kod nima uchun ishlamaydi? ​

Dasturlash kodi sintaksis xatalari yoki mantiqiy xatolarni o'z ichiga olishi mumkin. Bu xatolarning ko'pchiligi tashxis qo'yish qiyin. Kod muvaffaqiyatsiz bo'lganda, boshlang'ichlar ko'pincha nima noto'g'ri ekanligini taxmin qiladilar. Debugging buning teskarisi: siz faktlarni tekshirasiz.

Yaxshi debugging odati: O'qi → Takrorla → Qisqartir → Tuzat

  • Xatoni o'qing
  • Muammoni takrorlang
  • Kichik misolga qisqartiring
  • Keyin tuzating

JavaScript debuggerlari ​

Debugging oson emas, lekin barcha zamonaviy brauzerlar o'rnatilgan JavaScript debuggeriga ega.

Debugger bilan siz to'xtash nuqtalarini (breakpoints) o'rnatishingiz va kod bajarilayotganda o'zgaruvchilarni tekshirishingiz mumkin.

Bilasizmi?

Debugging — bu kompyuter dasturlarida xatolarni (bug) sinash, topish va kamaytirish jarayoni. Birinchi ma'lum bo'lgan kompyuter xatosi haqiqiy hasharot (bug) edi — elektronikaga yopishib qolgan!

1-qadam: Konsolga qarang ​

Brauzer konsoli JavaScript-dan xatolar va xabarlarni ko'rsatadi. Kodingiz "hech narsa qilmasa", konsol ko'pincha sababini aytadi.

Brauzeringizda debuggingni F12 tugmasi bilan yoqing va debugger menyusida Console ni tanlang.

Muhim

Agar faqat bitta narsa qilsangiz: biror narsa muvaffaqiyatsiz bo'lganda har doim konsolni tekshiring.

2-qadam: console.log() dan foydalaning ​

JavaScript-da console.log() konsolga qiymatlarni chop etadi. Bu kodingiz nima qilayotganini ko'rishga yordam beradi.

js
console.log("Hello!");

Nima noto'g'ri ekanligini topish uchun o'zgaruvchilarni chop eting:

js
let price = 50;
let quantity = 3;
let total = price * quantity;

console.log("Jami:", total);

Maslahat

Shubhalanayotgan qator oldidan va keyin qiymatni loglang. Bu ishlar qayerda noto'g'ri ketayotganini aniqlashga yordam beradi.

3-qadam: Taxminlaringizni tasdiqlang ​

Ko'pgina xatolar siz qiymatni biror narsa deb taxmin qilganingiz, lekin u aslida boshqa bo'lganligi sababli yuzaga keladi. Qiymatni tekshiring. Turni tekshiring.

js
let x = 5;
let y = "5";

console.log(x + y);          // 55 (satr!)
console.log(x + Number(y));  // 10 (raqam)

Xato xabarlarini o'qish ​

ReferenceError ​

Ma'nosi: Bu nom mavjud emas. Ko'pincha xato yozilgan yoki o'zgaruvchi e'lon qilinmagan.

js
console.log(myValue);
// ReferenceError: myValue is not defined

TypeError ​

Ma'nosi: Siz qiymatni imkonsiz usulda ishlatmoqchi bo'ldingiz. Ko'pincha undefined yoki null.

js
let x;
console.log(x.length);
// TypeError: Cannot read properties of undefined

Eslatma

Konsol oynasida xato odatda qator raqamini o'z ichiga oladi. Uni konsolda bosib aniq qatorga o'ting.

Oddiy debugging nazorat ro'yxati ​

  • Konsolda xatolarni tekshiring
  • Xato xabarini diqqat bilan o'qing
  • Qiymatlarni console.log() bilan loglang
  • Muammoni kichik misolga qisqartiring
  • Bir vaqtda bitta narsani tuzating

Keng tarqalgan boshlang'ich xatolar ​

Xato: == yoki === o'rniga = ishlatish

js
let x = 10;
if (x = 5) {
  console.log("Bu ishlaydi");
}

Tuzatish: Taqqoslashdan foydalaning:

js
let x = 10;
if (x === 5) {
  console.log("Bu faqat x 5 bo'lganda ishlaydi");
}

Ogohlantirish

Agar if bayonoti g'alati ishlayotgan bo'lsa, tasodifan = ishlatmaganingizni tekshiring.

Asosiy brauzerlarning debugging vositalari ​

Brauzeringizda debuggingni F12 bilan yoqing va debugger menyusida Console ni tanlang.

Chrome ​

  1. Brauzerni oching
  2. Menyudan "More tools" ni tanlang
  3. Toolsdan "Developer tools" ni tanlang
  4. Console ni tanlang

Firefox ​

  1. Brauzerni oching
  2. Menyudan "Web Developer" ni tanlang
  3. "Web Console" ni tanlang

Edge ​

  1. Brauzerni oching
  2. Menyudan "Developer Tools" ni tanlang
  3. "Console" ni tanlang

Opera ​

  1. Brauzerni oching
  2. Menyudan "Developer" ni tanlang
  3. "Developer tools" ni tanlang
  4. "Console" ni tanlang

Safari ​

  1. Safari → Preferences → Advanced ga o'ting
  2. "Enable Show Develop menu in menu bar" ni belgilang
  3. Paydo bo'lgan "Develop" menyusidan "Show Error Console" ni tanlang