VS Code: отладчик (Debugger)

Встроенный отладчик VS Code позволяет ставить брейкпоинты, пошагово выполнять код, инспектировать переменные и стек вызовов прямо в редакторе.

Зачем нужно

console.log — медленный и неточный способ отладки. Отладчик останавливает выполнение в нужной точке и показывает полное состояние программы: все переменные, стек вызовов, доступ к watches. Это особенно ценно для Node.js бэкенда и тестов Jest.

Где используется

  • Node.js скрипты и серверы Express
  • Тесты Jest — отладка упавшего теста
  • TypeScript — с source maps видны оригинальные .ts файлы
  • React/Vue — Chrome DevTools интегрирован с VS Code

Конфигурация launch.json()

// .vscode/launch.json()
{
  "version": "0.2.0",
  "configurations": [
    {
      "name": "Debug Node.js",
      "type": "node",
      "request": "launch",
      "program": "${workspaceFolder}/src/index.js",
      "skipFiles": ["<node_internals>/**"]
    },
    {
      "name": "Debug TypeScript",
      "type": "node",
      "request": "launch",
      "runtimeArgs": ["-r", "ts-node/register"],
      "program": "${workspaceFolder}/src/index.ts",
      "sourceMaps": true,
      "skipFiles": ["<node_internals>/**"]
    },
    {
      "name": "Attach to Node (port 9229)",
      "type": "node",
      "request": "attach",
      "port": 9229,
      "restart": true,
      "skipFiles": ["<node_internals>/**"]
    },
    {
      "name": "Debug Jest Tests",
      "type": "node",
      "request": "launch",
      "runtimeArgs": [
        "--inspect-brk",
        "${workspaceFolder}/node_modules/.bin/jest",
        "--runInBand",
        "--watchAll=false"
      ],
      "console": "integratedTerminal",
      "internalConsoleOptions": "neverOpen",
      "skipFiles": ["<node_internals>/**"]
    }
  ]
}

Запуск отладки

# Вариант 1: через launch.json() (F5)
# Запускает конфигурацию из launch.json()

# Вариант 2: attach к запущенному процессу
node --inspect-brk src/index.js
# В VS Code: Run → "Attach to Node (port 9229)"

# Вариант 3: автоматически с nodemon
# package.json:
# "debug": "nodemon --inspect src/index.js"

Горячие клавиши отладчика

F5              — запустить / продолжить выполнение
Shift+F5        — остановить отладку
F9              — поставить/убрать breakpoint на текущей строке
F10             — Step Over (следующая строка, не входить в функцию)
F11             — Step Into (войти внутрь функции)
Shift+F11       — Step Out (выйти из текущей функции)
Ctrl+Shift+F5   — перезапустить

Типы брейкпоинтов

// 1. Обычный брейкпоинт — F9 или клик на поле строки

// 2. Условный брейкпоинт
// ПКМ на поле строки → Add Conditional Breakpoint
// Пример условия: i > 100 || user.role === 'admin'

// 3. Logpoint (вместо console.log)
// ПКМ → Add Logpoint → "{user.name}: {user.role}"
// Выводит в Debug Console без изменения кода

// 4. Exception Breakpoint
// Debug панель → BREAKPOINTS → "All Exceptions" или "Uncaught Exceptions"
// Остановится при любой ошибке

// 5. debugger в коде
function processData(data) {
  debugger; // программный breakpoint — отладчик остановится здесь
  return data.map(item => item.value * 2);
}

Инспекция переменных

Variables панель — все переменные в текущем scope
Watch панель — выражения для отслеживания (добавить через +)
Call Stack — стек вызовов функций
Debug Console — выполнение JS-выражений в контексте текущего frame

Hover над переменной в коде — показывает текущее значение

Частые ошибки

  • Нет sourceMaps: true в launch.json() — отладка минифицированного кода
  • skipFiles не настроен — шаги проваливаются в node_modules
  • Не используют условные брейкпоинты — вручную нажимают Continue сотни раз
  • Attach без --inspect/--inspect-brk у Node.js процесса — подключение невозможно

Связанные темы

Ресурсы