VS Code’da debugging: breakpoint’lar va launch.json

Bu qanday ishlaydi

VS Code debugger’i dasturni kerakli qatorda to‘xtatadi va uning holatini ko‘rsatadi: o‘zgaruvchilar qiymati, chaqiruvlar steki, ifodalar natijasi. Bu console.log yoki print qo‘yib, kodni qayta ishga tushirishdan tezroq va ishonchliroq.

Hammasi .vscode/launch.json faylida sozlanadi. Unda konfiguratsiyalar ro‘yxati bor, har biri ishga tushirishning bitta usulini tavsiflaydi:

• "request": "launch" — VS Code dasturni o‘zi debugger ostida ishga tushiradi;
• "request": "attach" — VS Code allaqachon ishlayotgan jarayonga ulanadi.

Faylni yaratishning eng oson yo‘li — Run and Debug paneli: «create a launch.json file», keyin muhitni tanlang. Ishga tushirish — F5, breakpoint — F9 yoki qator raqamining chap tomoniga bosish.

Node.js

Skriptni ishga tushirish uchun konfiguratsiya:

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "node",
      "request": "launch",
      "name": "Run server",
      "program": "${workspaceFolder}/src/index.js",
      "skipFiles": ["<node_internals>/**"],
      "env": { "NODE_ENV": "development" }
    }
  ]
}

• skipFiles qadamma-qadam bajarishda debugger’ning Node.js ichki modullariga kirishiga yo‘l qo‘ymaydi.
• TypeScript uchun source map’lar kerak: tsconfig.jsonda sourceMapni yoqing, konfiguratsiyada esa yig‘ilgan .js fayllar yo‘li bilan outFilesni ko‘rsating.
• Loyiha npm-skript orqali ishga tushsa, JavaScript Debug Terminal qulay: unda ishga tushirilgan har qanday buyruq avtomatik ravishda debugger’ga ulanadi.

Brauzer

Frontend uchun VS Code Chrome yoki Edge’ni ishga tushiradi va kodni to‘g‘ridan-to‘g‘ri muharrirda debug qiladi:

{
  "type": "chrome",
  "request": "launch",
  "name": "Debug frontend",
  "url": "http://localhost:3000",
  "webRoot": "${workspaceFolder}"
}

Avval dev-serverni, keyin shu konfiguratsiyani ishga tushiring. webRoot server manba kodlarini beradigan papkaga ishora qilishi kerak, aks holda breakpoint’lar fayllarga mos kelmaydi. Edge uchun turni msedgega almashtiring.

Python

Microsoft’ning Python kengaytmasi kerak. Joriy versiyalarda debugger debugpy deb ataladi, eski konfiguratsiyalarda python turini uchratish mumkin.

{
  "type": "debugpy",
  "request": "launch",
  "name": "Python: current file",
  "program": "${file}",
  "console": "integratedTerminal"
}

Django yoki FastAPI uchun program o‘rniga "module" (masalan, uvicorn) va ishga tushirish parametrlari bilan "args" ishlatiladi. VS Code’da virtual muhitning to‘g‘ri interpretatori tanlanganini tekshiring.

Shartli breakpoint’lar va logpoint’lar

Qator raqamining chap tomonida o‘ng tugma bosilsa, variantlar ochiladi:

• Conditional Breakpoint → Expression — faqat ifoda rost bo‘lganda to‘xtash, masalan user.id === 42 yoki len(items) > 100. Sikllarda juda foydali.
• Hit Count — qatordan N-marta o‘tilganda to‘xtash.
• Logpoint — to‘xtash o‘rniga Debug Console’ga xabar chiqaradi. Ifodalar jingalak qavslarda yoziladi: Order {order.id}, total {order.total}. Kodni o‘zgartirish shart emas, commit’ga hech narsa tushmaydi.

Logpoint’lar ayniqsa to‘xtash xatti-harakatni buzadigan holatlarda foydali: timeout’lar, tarmoq so‘rovlari, animatsiyalar.

Watch, stek va Debug Console

Dastur to‘xtaganda Run and Debug panelida quyidagilar mavjud:

• Variables — joriy sohaning lokal va global o‘zgaruvchilari;
• Watch — har qadamda qayta hisoblanadigan ifodalar: cart.items.length, response.status;
• Call Stack — chaqiruvlar zanjiri; kadrga bosilsa, uning o‘zgaruvchilari ko‘rinadi;
• Debug Console — bu yerda joriy nuqta kontekstida istalgan ifodani bajarish mumkin.

Qadamma-qadam bajarish: F10 — funksiyani aylanib o‘tib qadam, F11 — ichkariga qadam, Shift+F11 — funksiyadan chiqish, F5 — davom ettirish.

Ishlayotgan jarayonga ulanish

Ba’zan dasturni VS Code emas, Docker, boshqa terminal yoki jarayonlar menejeri ishga tushiradi. Bunda attach’dan foydalaning.

Node.js: jarayonni --inspect bayrog‘i bilan ishga tushiring (yoki debugger’ni birinchi qatorda kutishi uchun --inspect-brk bilan):

{
  "type": "node",
  "request": "attach",
  "name": "Attach to Node",
  "port": 9229
}

Shuningdek "processId": "${command:PickProcess}"ni ko‘rsatib, jarayonni ro‘yxatdan tanlash mumkin.

Python: python -m debugpy --listen 5678 --wait-for-client app.py buyrug‘ini ishga tushiring va "request": "attach" hamda "connect": { "host": "localhost", "port": 5678 } bo‘lgan konfiguratsiya bilan ulaning.

Konteyner ichidagi jarayon uchun debugger portini tashqariga yo‘naltiring va konteynerdagi yo‘llar loyiha fayllariga mos kelishi uchun localRoot/remoteRoot (Node.js) yoki pathMappings (Python)ni sozlang. Ishchi serverlarda debugger portini tashqariga ochmang: u orqali ixtiyoriy kodni bajarish mumkin.

Ko‘p uchraydigan muammolar

• Breakpoint kulrang, «unbound» — debugger faylni moslashtira olmagan: source map’lar, webRoot, outFiles yoki konteynerdagi yo‘llarni tekshiring.
• Dastur breakpoint’gacha tugab qoladi — --inspect-brk yoki --wait-for-clientdan foydalaning.
• Python paketlarni ko‘rmaydi — noto‘g‘ri interpretator tanlangan.