PassFront
  1. PassFront
  2. База знаний
  3. Ошибки и отладка

Когда использовать инструменты debugging кроме console.log?

Ошибки и отладка

Инструменты отладки, кроме `console.log`, используют, когда нужна глубокая диагностика: точки останова, профилирование, анализ сети и памяти, отладка сложного потока выполнения.

Когда console.log недостаточно

console.log хорош для быстрой проверки, но плох для сложных случаев: много переменных, сложный поток, производительность, утечки.

Инструменты и когда их применять

Breakpoints (точки останова)

Когда нужно пошагово пройти код, осмотреть все переменные и стек в конкретной точке:

debugger; // остановит выполнение

Условные breakpoints — останов по условию (в цикле на нужной итерации).

DevTools Sources

Пошаговое выполнение (step over/into/out), watch-выражения, call stack.

Network

Когда проблема в запросах: статусы, тело, заголовки, тайминги.

Performance

Когда что-то тормозит: профилирование, поиск долгих операций, лишних ре-рендеров.

Memory

Когда утечка памяти: heap snapshots, поиск detached DOM-узлов.

React/Redux DevTools

Дерево компонентов, props/state, ре-рендеры, actions, time-travel.

Тесты

Воспроизвести баг тестом — надёжнее ручной проверки.

Преимущества перед console.log

  • Не нужно менять код и перезагружать.
  • Видно всё состояние сразу, а не отдельные значения.
  • Профилирование и анализ, недоступные логам.

Коротко для собеседования

Кроме console.log: breakpoints (пошаговый обход, осмотр всех переменных), DevTools Sources (step, watch, call stack), Network (запросы), Performance (тормоза, ре-рендеры), Memory (утечки, heap snapshots), React/Redux DevTools, тесты. Их применяют для глубокой диагностики без правки кода.

Другие вопросы раздела