Debugging — node --inspect, Chrome DevTools, breakpoint

~20 daq · Node.js · Amaliy

Muammodan boshlaylik

Xato topish uchun ko'pchilik shunday qiladi:

console.log('bu yerga yetdimi?');
console.log('data:', data);
console.log('users:', users);
console.log('aaaa test test');

Bu ishlaydi — lekin sekin. Har safar kodni o'zgartirib, serverni qayta ishga tushirib, chiqishni o'qib... Ko'p vaqt ketadi. Va console.log qolgan bo'lsa produksiyaga ham chiqib ketishi mumkin.

Debugger bilan esa: dasturni istalgan qatorda to'xtatib, barcha o'zgaruvchilarni real vaqtda ko'rasiz, qadam-qadam oldinga olasiz — hech narsa o'zgartirmay.

node --inspect — asosiy kalit

Node.js da debugger o'rnatishga hojat yo'q — ichida bor. --inspect flagini qo'shsangiz yetarli:

node --inspect server.js

Terminal da shu chiqadi:

Debugger listening on ws://127.0.0.1:9229/f4f1...
For help, see: https://nodejs.org/en/docs/inspector
Server ishga tushdi: http://localhost:3000

9229 — debugger port. Chrome bu portga ulanib, dasturingizni boshqaradi.

Chrome DevTools bilan ulash

  1. Chrome da chrome://inspect manzilini oching
  2. "Remote Target" bo'limida sizning server.js ko'rinadi
  3. "inspect" tugmasini bosing — DevTools ochiladi

Yoki to'g'ridan-to'g'ri: chrome://inspect → Open dedicated DevTools for Node

--inspect-brk — boshidan to'xtash

node --inspect-brk server.js

--inspect-brk — dastur birinchi qatorda to'xtaydi va siz ulangunicha kutadi. Ishga tushishi bilan darhol debug qilmoqchi bo'lsangiz shu flag.

Breakpoint — to'xtash nuqtasi

Breakpoint — siz dasturni "bu qatorda to'xta" deysiz. To'xtagan joyda barcha o'zgaruvchilarni ko'rasiz, ifodalarni hisoblaysiz, qadamba-qadam oldinlaysiz.

DevTools da breakpoint qo'yish

  1. DevTools → Sources tab
  2. Chap panelda fayl tanlang
  3. Qator raqamiga bosing — ko'k nuqta paydo bo'ladi → bu breakpoint
  4. So'rov yuboring — dastur o'sha qatorda to'xtaydi

debugger — kodda breakpoint

function narxHisobla(mahsulotlar) {
  let jami = 0;

  for (const m of mahsulotlar) {
    debugger; // ← DevTools bu qatorda to'xtatadi
    jami += m.narx * m.miqdor;
  }

  return jami;
}

debugger — dasturingiz kodida to'xtash nuqtasi. --inspect bilan ishga tushirilsa DevTools avtomatik to'xtaydi. --inspect bo'lmasa — debugger e'tiborga olinmaydi, dastur odatdagidek ishlaydi.

To'xtagandan keyin nima qilish mumkin

DevTools da to'xtaganda tepada boshqaruv tugmalari chiqadi:

▶  Resume       — to'xtatishdan davom etish (keyingi breakpointga qadar)
⤼  Step Over    — joriy qatorni bajarish, ichiga kirmay
↓  Step Into    — funksiya ichiga kirish
↑  Step Out     — joriy funksiyadan chiqish
⟳  Restart      — dasturni qaytadan boshlash
⊘  Deactivate   — barcha breakpointlarni o'chirish

Scope paneli — joriy o'zgaruvchilar:

  • Local — joriy funksiya o'zgaruvchilari
  • Closure — tashqi scope dan yopib olinganlar
  • Global — global o'zgaruvchilar

Watch — istalgan ifodani kuzatish:

// Watch ga qo'shish:
mahsulotlar.length
jami > 1000
mahsulotlar.filter(m => m.narx > 100)

Console — to'xtaganda console da iboralar yozib hisoblash mumkin:

// To'xtaganda DevTools Console da:
> mahsulotlar
[{ narx: 25000, miqdor: 2 }, ...]
> mahsulotlar.reduce((s, m) => s + m.narx, 0)
75000

VS Code bilan debugging

VS Code — Node.js uchun eng qulay IDE debug muhiti. Chrome DevTools ochmasdan to'g'ridan-to'g'ri redaktorda debug qilasiz.

launch.json sozlash

.vscode/launch.json fayli yarating:

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "node",
      "request": "launch",
      "name": "Server ishga tushir",
      "program": "${workspaceFolder}/server.js",
      "restart": true,
      "runtimeExecutable": "node"
    },
    {
      "type": "node",
      "request": "attach",
      "name": "Ishlab turgan serverga ulan",
      "port": 9229,
      "restart": true
    }
  ]
}

launch — VS Code o'zi ishga tushiradi va debug qiladi. attach — siz tashqarida node --inspect server.js ishga tushirasiz, VS Code unga ulanadi.

Ishlatish

  1. F5 → VS Code server ni debug rejimda ishga tushiradi
  2. Kod satriga bosib breakpoint qo'yasiz (qizil nuqta)
  3. So'rov yuborganda — to'xtatadi
  4. F10 — Step Over, F11 — Step Into, Shift+F11 — Step Out
  5. Variables panelida barcha o'zgaruvchilar ko'rinadi

nodemon bilan birgalikda

{
  "type": "node",
  "request": "launch",
  "name": "nodemon debug",
  "runtimeExecutable": "nodemon",
  "program": "${workspaceFolder}/server.js",
  "restart": true,
  "console": "integratedTerminal"
}

Fayl o'zgarganda nodemon qayta ishga tushiradi, VS Code esa avtomatik qayta ulanadi.

console metodlari — to'g'ri ishlatish

console.log dan tashqari boshqa foydali metodlar:

// Har xil darajalar
console.log('Oddiy ma\'lumot');
console.info('Axborot');
console.warn('Diqqat!');     // sariq rang (ba'zi terminallarda)
console.error('Xato!');      // qizil rang, stderr ga yozadi

// Ob'ektni chuqurroq ko'rsatish
const user = { id: 1, settings: { theme: 'dark', notifs: { email: true } } };
console.log(user);           // [Object] — chuqur qismlari ko'rinmaydi
console.dir(user, { depth: null }); // ← to'liq, cheksiz chuqurlikda

// Vaqtni o'lchash
console.time('db so\'rovi');
await db.query('SELECT * FROM users');
console.timeEnd('db so\'rovi'); // "db so'rovi: 23.456ms"

// Jadval ko'rinishida
const foydalanuvchilar = [
  { id: 1, ism: 'Jasur',  rol: 'admin' },
  { id: 2, ism: 'Malika', rol: 'user'  },
];
console.table(foydalanuvchilar);
// ┌─────────┬────┬────────┬────────┐
// │ (index) │ id │  ism   │  rol   │
// ├─────────┼────┼────────┼────────┤
// │    0    │  1 │ 'Jasur'│'admin' │

// Chaqirilgan joy
console.trace('Bu yerdan chaqirildi');
// Trace: Bu yerdan chaqirildi
//   at Object.<anonymous> (server.js:15:9)
//   at ...

Tez-tez uchraydigan xatolar

Port band — debugger ulanmaydi

# 9229 port band bo'lsa
node --inspect=9230 server.js  # ← boshqa port

# Kim 9229 ni ishlatayotganini topish
lsof -i :9229
kill -9 <PID>

debugger ishlamaydi

--inspect yoki --inspect-brk flag qo'yilmagan bo'lsa debugger e'tiborga olinmaydi. Yoki DevTools ulanmagan. Chrome da chrome://inspect ni tekshiring.

async funksiya ichida breakpoint ishlamaydi

Async funksiyalarda to'xtatilganda Step Into kutilmagan joyga o'tishi mumkin. Buning o'rniga await ning keyingi qatoriga alohida breakpoint qo'ying.

Xulosa

Debugger — console.log dan ko'ra kuchliroq va tezroq vosita. Bir marta o'rgansangiz, debugging vaqtingizni ikki baravarga qisqartiradi.

Eslab qoling:

  • node --inspect server.js — debug rejimda ishga tushirish
  • node --inspect-brk server.js — birinchi qatorda to'xtatib kutish
  • chrome://inspect — Chrome bilan ulash
  • debugger — kodda to'xtash nuqtasi
  • VS Code launch.json — to'g'ridan-to'g'ri redaktorda debug
  • F5 ishga tushirish, F10 qadam, F11 ichiga kirish
  • console.time/timeEnd — ishlash vaqtini o'lchash
  • console.table — massivlarni jadvalda ko'rish

Keyingi dars

27-dars: Environment Variables — dotenv, process.env, konfiguratsiya boshqarish