Как стать автором
Обновить

Комментарии 5

Для Firefox должно быть тоже должен быть аналог.
Спасибо за статью! Давно хотел научится нормально отлаживать js.
А как это все настроить для Electron?
Хотелось бы выделить еще пару важных и удобных вещей в 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, которые визуально выделяют логи и также отображают их в разных категориях, что часто удобно для ориентирования в куче разных логов
Только полноправные пользователи могут оставлять комментарии. Войдите, пожалуйста.

Публикации

Истории