Какие инструменты использовал для отладки кода

Ответ

Для отладки кода чаще всего использую:

  1. Chrome DevTools — основной инструмент:

    • Debugger для пошагового выполнения
    • Console для быстрой проверки значений
    • Network для анализа запросов
    • Performance для профилирования
  2. React DevTools и Redux DevTools — для отладки состояния в React-приложениях

  3. Логирование:

    console.log('Current state:', state);
    console.table(data); // для массивов/объектов
  1. ESLint — для выявления потенциальных проблем на этапе разработки

  2. 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 (или аналог). Он как стукач: ловит все ошибки у клиентов, складывает в кучку и приносит тебе с подробным отчётом: кто, где и на что нажал. Без этого ты просто в темноте шаришься, на удачу надеешься.

Вот так вот, нехитрая наука. Главное — не паниковать, а методично всё проверять, слой за слоем. И тогда любой баг, даже самый ебучий, будет повержен.