Отладчики и профайлеры: DevTools и Node изнутри

Второй урок раздела. console.log это не отладка, а гадание: ты заранее решаешь, что важно, печатаешь это и надеешься угадать. Отладчик и профайлер отвечают на разные вопросы, и важно не путать их. Отладчик отвечает на “что именно происходит вот здесь” (управление выполнением). Профайлер отвечает на “где уходит время и память” (статистика по всему прогону). Под капотом и тот, и другой работают через один и тот же inspect-протокол V8, поэтому навык переносится между браузером и Node.

Идея: два разных вопроса

Прежде чем хвататься за инструмент, реши, какой у тебя вопрос.

• Поведенческий вопрос: “почему на этом входе функция возвращает не то”. Здесь нужен отладчик: точка останова, пошаговое выполнение, осмотр переменных в конкретный момент.
• Вопрос производительности: “почему запрос идёт две секунды” или “почему память растёт”. Здесь нужен профайлер: он не останавливает программу, а собирает агрегированную статистику, где процессор и память провели больше всего времени.

Главная ошибка новичка это лечить вопрос производительности отладчиком (шагать по коду и гадать) или поведенческий профайлером. Сначала вопрос, потом инструмент.

Отладчик: управление выполнением

Точка останова замораживает программу на нужной строке. Дальше есть четыре движения:

• step over: выполнить строку целиком, не заходя внутрь вызова.
• step into: зайти внутрь вызываемой функции.
• step out: доделать текущую функцию и вернуться к вызывающей.
• resume: бежать дальше до следующей точки останова.

Простой breakpoint на горячей строке бесполезен: он сработает тысячу раз. Поэтому два приёма, которые отделяют умелую отладку от тыканья:

• Conditional breakpoint останавливает выполнение только когда условие истинно. id === '42', и ты сразу на проблемном входе, минуя тысячу нормальных.
• Logpoint печатает выражение и бежит дальше. Это тот же console.log, но без правки кода: поставил, посмотрел, снял.

Blackboxing прячет фреймы библиотек, чтобы step into не проваливался в недра React или node_modules, а стек показывал только твой код.

Chrome DevTools вглубь

DevTools это не только Console и Elements. Реально полезны вкладки, в которые редко заходят.

• Network: waterfall запросов, фильтры, “copy as fetch” и “copy as curl”, чтобы воспроизвести запрос вне браузера. CPU и network throttling эмулируют медленное устройство и мобильную сеть.
• Performance: записать профиль реального взаимодействия, увидеть long tasks, разбивку времени на scripting, rendering, painting и FPS.
• Memory: heap snapshot и сравнение двух снимков, чтобы поймать утечку: что не освободилось между двумя действиями.
• Coverage: показывает мёртвый JS и CSS, который грузится, но не выполняется. Прямой кандидат на удаление или ленивую загрузку.
• Lighthouse: автоматический аудит производительности, доступности и SEO с конкретными рекомендациями.

Типичный сценарий “страница тормозит”: записать Performance во время взаимодействия, найти самый широкий long task, открыть его и увидеть, на какую функцию приходится пик. Дальше уже точечно: профиль показал адрес, отладчик покажет, что там.