Как дебажить фронтенд и бекенд: пошаговая инструкция

Для Firefox должно быть тоже должен быть аналог.

Спасибо за статью! Давно хотел научится нормально отлаживать js.

А как это все настроить для Electron?

F12

Хотелось бы выделить еще пару важных и удобных вещей в Chrome Dev tools для фронта:

1. правый клик на брейкпоинте -> Edit breakpoint -> здесь задаем нужное нам условие при котором брейкпоинт будет срабатывать (например x===5)
2. Во кладке watch можно указывать имена переменных за которыми хотим следить, таким образом на каждом брейкпоинте в этой вкладке будут отображаться значения именно нужных нам переменных
3. Во вкладке call stack отображается стэк вызовов, в том числе и из прошлого, таким образом мы можем отследить, где была вызвана данная функция, а также «вернутся в прошлое» на пару шагов
4. Если в UI что-то изменяется, но непонятно что вызвало это изменение, то можно перейти в инспектор DOM, выбрать интересующий элемент и по нажатию на правую кнопку мыши выбрать Break on...subtree modification, тем самым выполнение программы остановится в методе, изменяющем интересующий нас элемент
5. Выбранный в DOM элемент доступен из консоли по имени $0, таким образом для инспекции при отладке нет необходимости писать в консоли document.querySelector
6. Важно понимать, что делают разные «стрелочки» в правом верхнем углу. Например, перепрыгнуть через выполнение функции или выйти во внешнюю функцию. Также есть отдельная кнопка, позволяющая брейкпоинтить на всех эксепшенах
7. Вкладка Network, где можно посмотреть ход общения с сервером
8. Методы console.warn и console.error, которые визуально выделяют логи и также отображают их в разных категориях, что часто удобно для ориентирования в куче разных логов