Как дебажить js в браузере

Самый популярный инструмент для отладки кода в браузере - Chrome DevTools.

Откровенно говоря, отладка кода может занимать много времени. Особенно, если использовать такие простые команды как console.log() или alert().

И на этом моменте в игру вступает Chrome DevTools, позволяя нам дебажить код без утомительных команд. С помощью этого инструмента можно легко редактировать CSS и HTML "на лету", тестировать сеть, проверять скорость сайта и даже эмулировать экран мобильных устройств для тестирования адаптивности верстки проекта.

Для запуска отладчика (на примере браузера Chrome) необходимо нажать клавишу F12, или выбрать интересующий элемент на страницы, щелкнуть по нему правой кнопкой мыши и выбрать - Inspect.

Очень хорошо раскрыт вопрос в ролике от Никиты Михайлова, из наставников Хекслета по направлению "Верстальщик".