Node.js kodini debug qilish

Kod noto’g’ri natija berdi. Odatdagi yo’l — console.log qo’shish, ishga tushirish, yana qo’shish. Uch-to’rt marta takrorlangandan keyin fayl vaqtinchalik chiqishlar bilan to’lib ketadi.

Yaxshiroq yo’l bor: dasturni kerakli qatorda to’xtatib, o’sha paytdagi barcha o’zgaruvchilarni bir vaqtda ko’rish.

console.log ning chegarasi

Muammoli kod yozamiz. debug-target.js:

function calculateTotal(items) {
  let total = 0;
  for (const item of items) {
    total += item.price * item.count;
  }
  return total;
}

const cart = [
  { name: "Kitob", price: 50000, count: 2 },
  { name: "Daftar", price: 8000, count: 3 },
];

console.log("Jami:", calculateTotal(cart));
node debug-target.js
Jami: 124000

Natija to’g’ri. Lekin savol tug’ilsa — masalan, sikl har aylanishida total qanday o’sdi — console.log qo’yishga to’g’ri keladi. Har yangi savol uchun kodni qayta tahrirlash kerak.

Debugger nima

Node.js’da debugger ichiga qurilgan — o’rnatish shart emas.

node –inspect bilan ishga tushirish

Ikki bayroq bor va farqi muhim:

Bayroq Nima qiladi
--inspect Debugger ulanishi mumkin, dastur darhol ishlaydi
--inspect-brk Birinchi qatorda to’xtaydi va ulanishni kutadi

Qisqa skript uchun ikkinchisi kerak, aks holda dastur siz ulanguningizcha tugab bo’ladi:

node --inspect-brk debug-target.js
Debugger listening on ws://127.0.0.1:9229/4576bf04-8529-4f36-ab08-472969953e26
For help, see: https://nodejs.org/en/docs/inspector

Dastur to’xtab turibdi. Endi unga ulanish kerak.

Chrome DevTools bilan ulanish

Eng qulay usul — brauzer vositasi.

  1. Chrome yoki Edge brauzerini oching;
  2. Manzil satriga chrome://inspect yozing;
  3. Remote Target ro’yxatida skriptingiz ko’rinadi;
  4. Uning ostidagi inspect havolasini bosing.

Ochilgan oynada kodingiz turadi va birinchi qatorda to’xtagan bo’ladi.

Brauzer vositasi bilan DevTools darsida ishlagansiz — bu o’sha oynaning o’zi, faqat brauzer sahifasi o’rniga Node.js kodi ulangan.

Breakpoint qo’yish va ko’rish

Kod oynasida total += item.price * item.count; qatori raqamini bosing — qator ko’k rangga bo’yaladi. Bu breakpoint.

Endi yuqoridagi boshqaruv tugmasidan davom ettirishni bosing. Dastur sikl ichida to’xtaydi.

O’ng tomondagi Scope bo’limida o’sha lahzadagi hamma qiymat ko’rinadi:

Local
  item: {name: "Kitob", price: 50000, count: 2}
  total: 0
Block
  items: Array(2)

Bitta console.log yozmasdan turib butun holat ko’z oldingizda. Davom ettirsangiz, ikkinchi aylanishda total qiymati 100000 bo’lib turgani ko’rinadi.

Boshqaruv tugmalari

Amal Nima qiladi
Resume Keyingi breakpoint’gacha davom etadi
Step over Keyingi qatorga o’tadi, funksiya ichiga kirmaydi
Step into Chaqirilgan funksiya ichiga kiradi
Step out Joriy funksiyadan chiqadi

debugger operatori

Breakpoint’ni kod ichida ham belgilash mumkin:

function calculateTotal(items) {
  let total = 0;
  for (const item of items) {
    // Dastur shu yerda to'xtaydi
    debugger;
    total += item.price * item.count;
  }
  return total;
}

const cart = [
  { name: "Kitob", price: 50000, count: 2 },
  { name: "Daftar", price: 8000, count: 3 },
];

console.log("Jami:", calculateTotal(cart));

debugger so’zi debugger ulanmagan holatda e’tiborsiz qoldiriladi:

node debug-target.js
Jami: 124000

Dastur odatdagidek ishladi. Debugger bilan ishga tushirilsa esa o’sha qatorda to’xtaydi:

node --inspect-brk debug-target.js

Terminaldagi debugger

Brauzersiz ham ishlash mumkin:

node inspect debug-target.js
< Debugger listening on ws://127.0.0.1:9229/4576bf04-8529-4f36-ab08-472969953e26
< For help, see: https://nodejs.org/en/docs/inspector
connecting to 127.0.0.1:9229 ... ok
< Debugger attached.
debug> Break on start in debug-target.js:9
  7 }
  8
> 9 const cart = [
 10   { name: "Kitob", price: 50000, count: 2 },
 11   { name: "Daftar", price: 8000, count: 3 },

debug> so’rovida buyruq yoziladi:

Buyruq Vazifasi
cont yoki c Davom ettirish
next yoki n Keyingi qator
step yoki s Funksiya ichiga kirish
repl O’zgaruvchi qiymatini so’rash
.exit Chiqish

repl rejimida o’zgaruvchi nomini yozib, qiymatini ko’rasiz. Chiqish uchun Ctrl + C.

VS Code bilan ulash

Muharrirdan chiqmasdan debug qilish mumkin.

Eng tez yo’l: .js faylini oching, qator raqami yoniga bosib breakpoint qo’ying va F5 tugmasini bosing. VS Code Node.js ni o’zi tanlaydi.

Doimiy sozlash uchun loyihada .vscode/launch.json yaratiladi:

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "node",
      "request": "launch",
      "name": "Dasturni ishga tushirish",
      "program": "${workspaceFolder}/debug-target.js",
      "skipFiles": ["<node_internals>/**"]
    }
  ]
}

skipFiles qatori muhim: usiz “step into” sizni Node.js ning ichki fayllariga olib kirib ketadi.

Testlarni debug qilish

node:test bilan yozilgan testni ham to’xtatib ko’rish mumkin:

node --inspect-brk --test

Yiqilayotgan testda breakpoint qo’yib, assert chaqirilishidan oldingi qiymatlarni ko’rasiz. Bu actual va expected farqi nimadan kelib chiqqanini tez aniqlaydi.

NODE_OPTIONS bilan

Buyruqni o’zgartirib bo’lmaydigan holat ham bo’ladi — masalan, dastur npm start orqali ishga tushadi. Unda bayroqni muhit o’zgaruvchisi bilan beriladi.

PowerShell’da:

$env:NODE_OPTIONS="--inspect"; npm start

macOS va Linux’da:

NODE_OPTIONS="--inspect" npm start
Debugger listening on ws://127.0.0.1:9229/8f2a1c44-3e7b-4c91-a2d5-6b0e9f1a8c37

Muhit o’zgaruvchilari process darsida ko’rilgan.

Qaysi vositani qachon

Holat Vosita
Bitta qiymatni tez ko’rish console.log
Murakkab mantiq, ko’p o’zgaruvchi Breakpoint
Xato qayerdan kelgani noma’lum Step into bilan yurish
Grafik muhiti yo’q server node inspect

console.log butunlay yomon emas — bitta qiymatni ko’rish uchun u tezroq. Lekin uchinchi marta qo’shayotgan bo’lsangiz, debugger’ga o’ting.

Amaliy mashq

node-start papkasida bajaring:

  1. debug-target.js ni yozib, oddiy holda ishga tushiring;
  2. node --inspect-brk bilan qayta yuriting va chrome://inspect orqali ulaning;
  3. Sikl ichidagi qatorga breakpoint qo’yib, har aylanishda total qiymati qanday o’sishini kuzating;
  4. calculateTotal chaqirig’ida avval “step over”, so’ng “step into” bosib farqni ko’ring;
  5. Kodga debugger operatorini qo’shing va uni avval debuggersiz, keyin debugger bilan ishga tushiring;
  6. VS Code’da breakpoint qo’yib F5 bilan yuriting va o’zgaruvchilar ro’yxatini oching.

3-qadam eng muhimi: sikl ichidagi qiymat o’zgarishini bir marta breakpoint bilan ko’rgan odam buning uchun boshqa console.log yozmaydi.

Qisqacha xulosa

  • Debugger dasturni to’xtatib, o’sha lahzadagi barcha o’zgaruvchilarni ko’rsatadi.
  • --inspect ulanishga ruxsat beradi, --inspect-brk birinchi qatorda to’xtatadi.
  • Chrome’da chrome://inspect sahifasi orqali ulaniladi.
  • debugger operatori kod ichidagi breakpoint — debuggersiz ishga tushirilsa e’tiborsiz qoldiriladi.
  • “Step over” funksiyani bajarib o’tadi, “step into” uning ichiga kiradi.
  • VS Code’da F5 yetarli, doimiy sozlash launch.json da yoziladi.
  • Ishlab chiqarish serverida --inspect ishlatilmaydi — u kodni ochib qo’yadi.

Keyingi darsda o’z npm paketingiz — kodni boshqalar ishlatadigan qilib chiqarish.

Bu dars foydali bo'ldimi?

—
— marta ko'rildi