Ответ
Для отладки кода чаще всего использую:
-
Chrome DevTools — основной инструмент:
- Debugger для пошагового выполнения
- Console для быстрой проверки значений
- Network для анализа запросов
- Performance для профилирования
-
React DevTools и Redux DevTools — для отладки состояния в React-приложениях
-
Логирование:
console.log('Current state:', state);
console.table(data); // для массивов/объектов
-
ESLint — для выявления потенциальных проблем на этапе разработки
-
Jest/Vitest — unit-тесты помогают локализовать ошибки
Для сложных случаев использую debugger или точки останова в DevTools. В production-средах — Sentry для мониторинга ошибок.
Ответ 18+ 🔞
А, ну ты про отладку спрашиваешь? Ёпта, святое дело, без этого никуда, как без рук, блядь.
Слушай, вот мой священный ритуал, когда всё ебётся и не работает. Первым делом — Chrome DevTools, это мой основной арсенал, хуй с горы. Там, блядь, всё есть:
- Debugger — это когда уже совсем пиздец и надо по шагам разобрать, где твой код накосячил. Ставишь точку останова и смотришь, как переменные меняются, прям как в кино про хакеров, только без фуражки.
- Console — святая святых, блядь. Туда
console.logкидаешь, чтобы понять, что за хуйня летит в твою функцию. Аconsole.table(data)— это вообще магия, когда надо массив или объект красиво разложить, глаз не сломаешь. - Network — вот тут часто собака зарыта, сука. Отправил запрос, а в ответ тишина... Заходишь сюда и видишь: «400 Bad Request». Ага, понятно, я, мудак, кривой JSON отправил. Или «504 Gateway Timeout» — ну, значит, бэкенд прилёг отдохнуть.
- Performance — это когда приложение тормозит, как говно в проруби. Запускаешь запись, тыкаешь интерфейс и потом смотришь, какая функция жрёт все ресурсы, как последняя сука.
Дальше, если дело касается React, то без React DevTools и Redux DevTools — вообще никуда. Это как рентген для твоего приложения. Видишь всё дерево компонентов, каждое состояние, каждый пропс. Нашёл компонент, который не перерисовывается, когда должен — и сразу ясно, где копать. Без этого — ты просто слепой крот, блядь.
Ну и, конечно, логирование. Это основа основ. Я ж не телепат, ёпта, чтобы сходу понять, что в userData лежит undefined. Поэтому везде, где только можно, вставляю:
console.log('Текущий стейт, блядь:', state);
console.log('А вот что пришло с бэка:', response);
console.table(users); // Красота, а не вывод
Для профилактики, чтобы не накосячить по мелочи, ESLint стоит. Он как занудный друг, который постоянно бубнит: «Тут точка с запятой лишняя, тут переменная не используется, а тут, сука, отступ не по стандарту». Иногда бесит, но в целом спасает от тупых косяков.
А для самых ответственных моментов — юнит-тесты (Jest или Vitest). Пишешь маленькие тесты для каждой функции. Поломал что-то — тесты сразу орут: «Э, бошка думай, ты тут накосячил!». Локализуешь проблему в секунды, а не часами дебажишь всю систему.
Ну а если совсем жопа, ставишь debugger; прямо в код, обновляешь страницу — и браузер сам остановится на этой строке. Дальше смотришь стек вызовов, значения переменных... обычно всё становится ясно. Это как хирургическая операция, блядь.
И последнее — на продакшене, когда у пользователей всё падает, а у тебя на локальной машине работает, ставь Sentry (или аналог). Он как стукач: ловит все ошибки у клиентов, складывает в кучку и приносит тебе с подробным отчётом: кто, где и на что нажал. Без этого ты просто в темноте шаришься, на удачу надеешься.
Вот так вот, нехитрая наука. Главное — не паниковать, а методично всё проверять, слой за слоем. И тогда любой баг, даже самый ебучий, будет повержен.