|
Отладка (debugging) в JavaScript — это не только console.log(). Современный стек инструментов позволяет находить баги на всех этапах: от написания кода до анализа production-ошибок.
Вот полная классификация методов отладки:
1. Базовые консольные методы (Console API)
Это фундамент. Используйте не только `log`, но и другие уровни:
console.log(), console.info(), console.warn(), console.error() — вывод текста в консоль с разными иконками.
console.table() — идеально для массивов объектов (отображает их в виде красивой таблицы).
console.trace() — показывает стек-трейс (цепочку вызовов функций) в момент вызова.
console.time() / console.timeEnd() — замер времени выполнения участка кода.
console.group() / console.groupCollapsed() — группировка логов для читаемости.
console.assert() — выводит ошибку в консоль только если условие ложно (отличный способ проверять инварианты).
2. Отладка в браузере (Chrome DevTools, Firefox)
Самый мощный инструмент для frontend-разработки.
• Точки останова (Breakpoints): вкладка Sources -> клик по номеру строки.
- Conditional breakpoint: условная точка останова. Правый клик мышью по номеру строки -> добавить условие (сработает только при `x > 10`).
- Logpoint: (или console.log без изменения кода) — ставите точку, но вместо остановки пишете выражение для вывода в консоль.
• Пошаговое выполнение (Stepping): кнопки `Step over` (F10), `Step into` (F11), `Step out`.
• Watch Expressions: панель справа, где можно ввести любое JS-выражение (`user.name.length`) и видеть его значение в реальном времени во время выполнения.
• Blackboxing: скрыть сторонние библиотеки (jQuery, React) от пошаговой отладки, чтобы не прыгать по их внутреннему коду.
3. Отладка асинхронного кода (Async/Await, Promises)
Асинхронность — главная боль в JS.
• Async Stack Traces: в DevTools включено по умолчанию. Позволяет увидеть, где был вызван promise, даже если ошибка произошла через несколько тиков (вкладка Call Stack покажет полную цепочку).
• Асинхронные брейкпоинты: в панели Sources -> раздел `Event Listener Breakpoints` — можно остановить выполнение на клике, таймауте или загрузке DOM-элемента.
4. Отладка серверного кода (Node.js)
• Встроенный инспектор: запуск с флагом `node --inspect-brk app.js`. Затем открываете в Chrome `chrome://inspect` и подключаетесь — получаете полный функционал DevTools для бэкенда.
• Отладка через VS Code: настройка `launch.json`. Вы можете ставить брейкпоинты прямо в редакторе, нажать F5, и код остановится в IDE (без открытия браузера).
• `--trace-warnings`: показывает стек трейсы для предупреждений (например, Unhandled Promise Rejection).
5. Отладка состояния во фреймворках (React/Vue/Angular)
• React DevTools / Vue Devtools: позволяют смотреть `props`, `state` и `hooks` в реальном времени. Можно менять значения на лету и смотреть, как перерисовывается интерфейс.
• Redux DevTools: позволяет "путешествовать во времени" (Time Travel) — отменять и повторять действия (actions), чтобы понять, как менялся state.
6. Обработка ошибок (Error Handling)
• Try...Catch: блокируйте потенциально опасные участки.
• Глобальный перехват:
- В браузере: `window.onerror` и `window.addEventListener('unhandledrejection', ...)`.
- В Node.js: `process.on('uncaughtException', ...)`.
• Stack-trace: передавайте в `new Error()` осмысленные сообщения. Используйте `.stack` свойства ошибки для логирования.
7. Продвинутые инструменты (Production)
• Source Maps: обязательно загружайте source maps на сервер (или в Sentry). Без них вы будете видеть ошибки в минифицированном коде (одна строка), а с ними — точное место в вашем исходном файле.
• Sentry / LogRocket / Datadog: инструменты для "отладки продакшена". Они записывают:
- Ошибки с полным стеком.
- Скриншот экрана перед ошибкой.
- Последовательность действий пользователя (клики, скроллы).
• Feature Flags (Toggles): включайте "режим отладки" на проде для конкретного пользователя, чтобы включить расширенное логирование без передеплоя кода.
8. Отладка производительности (не баги, а тормоза)
• Chrome Performance Tab: запись временной шкалы (FPS, Layout, Paint).
• React Profiler: находит компоненты, которые перерисовываются слишком часто.
• `performance.mark()` и `performance.measure()`: программный замер производительности конкретных участков кода.
9. Инструменты разработчика в IDE (VS Code)
• Встроенный отладчик: позволяет не выходить из редактора.
• Quokka.js: плагин, который показывает результаты выполнения кода прямо рядом со строкой (в real-time), как в Jupyter Notebook — невероятно ускоряет написание простых функций.
Главный совет профессионала: не используйте `console.log` для сложных багов. Научитесь пользоваться брейнкпоинтами (Sources / Node Inspector) — это экономит часы времени, так как вы видите всё состояние приложения, а не только то, что решили вывести в лог.
[Оператор debugger]
debugger; — не просто оператор, это «ручной тормоз» в коде.
Вот всё, что нужно о нём знать:
1. Как это работает
Когда интерпретатор JavaScript встречает ключевое слово debugger;, он принудительно останавливает выполнение кода в этой точке только в том случае, если открыты инструменты разработчика (DevTools).
Если DevTools закрыты, браузер или Node.js просто игнорируют эту строку (она работает как пустышка).
function calculatePrice(items) {
let total = 0;
for (let item of items) {
debugger; // Выполнение остановится здесь на каждой итерации цикла
total += item.price * item.quantity;
}
return total;
}
2. Главное преимущество перед обычным брейкпоинтом
В отличие от клика по номеру строки в интерфейсе DevTools (`Sources`), оператор debugger; живет прямо в исходном коде. Если вы передаете код коллеге или деплоите его на тестовый стенд — остановка сработает у всех, у кого открыты консольные инструменты. Это удобно, когда нужно остановиться строго перед сложным участком, который тяжело найти мышкой в минифицированном коде или в огромном файле.
3. Подводные камни (будьте осторожны!)
Забытые debugger в продакшене — это катастрофа. Если пользователь случайно откроет консоль разработчика (F12), скрипт зависнет на этом месте, и сайт перестанет отвечать на взаимодействие.
Решение1: используйте линтеры (ESLint rule `no-debugger`) и CI/CD, чтобы автоматически отклонять сборку с оператором `debugger`.
Решение2: на этапе сборки (Webpack/Vite) плагины для минификации автоматически удаляют все `debugger;` из продакшен-билда.
В Node.js: если вы запустили `node app.js` (без флага `inspect`), то debugger; просто не сработает. Чтобы он сработал, нужно либо подключить инспектор, либо запустить с флагом `node inspect app.js`.
4. Условный debugger (самый полезный прием)
Вы не можете поставить «условный» брейкпоинт через клик в DevTools так же легко, как в коде. А через debugger — легко:
// Остановит выполнение ТОЛЬКО если пользователь администратор
if (user.role === 'admin' && user.actions.includes('delete')) {
debugger;
// Теперь вы можете в консоли изучить объект user,
// не останавливаясь на обычных пользователях
}
5. Как это сочетается с console.log
Хитрый трюк для быстрой отладки без остановки выполнения (альтернатива `console.log`):
// Вместо console.log('user:', user) можно написать:
debugger; // Остановка, вы посмотрите user в консоли,
// нажмете "Continue" (F8) и побежите дальше.
Это позволяет не захламлять консоль тоннами логов, а получить доступ к полному состоянию приложения (замыканиям, областям видимости) в момент выполнения, чего `console.log` не даёт (он копирует только поверхностные значения).
Итог: debugger; — мощнейший "якорь". Я использую его в 2 случаях:
1. Когда нужно отловить баг, который воспроизводится только после 5 кликов (ставлю `debugger` прямо в обработчике).
2. Вместе с if для отлова "недостижимых" состояний (аналог `console.assert`, но с остановкой). |
