#blog
Если после новогодних праздников Вы обнаружили, что написанный в конце декабря код не работает - не беда! Почитаем статью, которая раскрывает несколько полезных инструментов для отладки фронтенда. Кратко о том, что в ней есть:
- debugger в JavaScript — один из мощных инструментов для отладки. Вместо того, чтобы просто выводить ошибки в консоль, можно использовать ключевое слово debugger, чтобы сразу остановить выполнение на нужной строке кода.
- Отладка через консоль — современные браузеры позволяют запускать отладчик прямо из консоли. Например, с помощью команды debug(functionName).
- Брейкпоинты на DOM-элементах — в Chrome и Firefox можно ставить брейкпоинты на изменениях DOM. Это полезно, когда проблемы возникают из-за манипуляций с элементами на странице.
- XHR-брейкпоинты — иногда сложно понять, какой именно запрос вызвал ошибку, особенно в крупных приложениях. Используя XHR-брейкпоинты, можно установить фильтры по подстроке в URI и отслеживать, когда происходят определенные сетевые запросы.
- Эмуляция различных условий — Chrome и Firefox предлагают инструменты для имитации разных условий, например, изменяя user agent, геолокацию или ориентацию устройства.
- Отладка CSS и HTML — инспектор элементов позволяет в реальном времени изменять DOM и стили, что помогает быстро находить и исправлять баги. Особое внимание стоит уделить проблемам с специфичностью CSS-селекторов.

Статья - https://debugagent.com/front-end-debugging-part-1-not-just-console-log