Комментарии 5
Для Firefox должно быть тоже должен быть аналог.
0
Спасибо за статью! Давно хотел научится нормально отлаживать js.
0
А как это все настроить для Electron?
0
F12
0
Хотелось бы выделить еще пару важных и удобных вещей в Chrome Dev tools для фронта:
- правый клик на брейкпоинте -> Edit breakpoint -> здесь задаем нужное нам условие при котором брейкпоинт будет срабатывать (например x===5)
- Во кладке watch можно указывать имена переменных за которыми хотим следить, таким образом на каждом брейкпоинте в этой вкладке будут отображаться значения именно нужных нам переменных
- Во вкладке call stack отображается стэк вызовов, в том числе и из прошлого, таким образом мы можем отследить, где была вызвана данная функция, а также «вернутся в прошлое» на пару шагов
- Если в UI что-то изменяется, но непонятно что вызвало это изменение, то можно перейти в инспектор DOM, выбрать интересующий элемент и по нажатию на правую кнопку мыши выбрать Break on...subtree modification, тем самым выполнение программы остановится в методе, изменяющем интересующий нас элемент
- Выбранный в DOM элемент доступен из консоли по имени $0, таким образом для инспекции при отладке нет необходимости писать в консоли document.querySelector
- Важно понимать, что делают разные «стрелочки» в правом верхнем углу. Например, перепрыгнуть через выполнение функции или выйти во внешнюю функцию. Также есть отдельная кнопка, позволяющая брейкпоинтить на всех эксепшенах
- Вкладка Network, где можно посмотреть ход общения с сервером
- Методы console.warn и console.error, которые визуально выделяют логи и также отображают их в разных категориях, что часто удобно для ориентирования в куче разных логов
+2
Зарегистрируйтесь на Хабре, чтобы оставить комментарий
Как дебажить фронтенд и бекенд: пошаговая инструкция