Pull to refresh

Comments 17

Иногда брейкпойнт очень трудно или вовсе невозможно поставить в нужном месте через Dev Tools, если код транспилируется. Watch тоже иногда не работает в таком коде.

debugger выручает в первом случае, но некоторые баги не воспроизводятся, если выполнение приостанавливается.

Так что console.log иногда самый надёжный метод:)

Есть один не всем знакомый трюк для отладки всяких тонкостей связанных с popover-ми, которые исчезают при потери фокуса:


  • открываем консоль
  • запускаем setTimeout('debugger;', 3000);
  • успеваем активировать на странице что хотели и ждём
  • разбираемся с багом

Попробуйте просто при активном tooltip/popover нажать f8 и остановить исполнение. Popover/tooltip тоже "замерзнет" и его можно будет отладить. Найдено на просторах stackoverflow.

Попробовал. В общем нужно чтобы это исполнение было. В моём случае не сработало сразу, нужно было дождаться какого-то таймера сторонней библиотеки. Но тоже вариант

Хороший трюк.

Ещё можно попытаться успеть нажать f8

15 лет назад один мой друг научил меня пользоваться alert()'ом. Он был старше (senior) и опытнее (experienced) и сказал, что под Windows много лет использует ::MessageBox() и до сих пор с ним ничего плохого не случилось. Я попробовал и оказалось, что это не так уж страшно. Потом об этом узнало начальство, назвало его (и меня) извращенцем, долго ругалось, рассказало мне про console.log() и брейкпоинты, но было уже поздно. Я начал писать alert()'ы, когда думал, что никто не видит и один раз даже по ошибке закоммитил alert()в продакшен. Было очень стыдно, но я до сих пор не могу побороть этот порок.

У сеньоров баги уже не те и потому им понять проблему обычным выводом в нужном месте быстрее и проще, чем возится с брекпоинтами.

Ну во-первых, сеньоры тоже делают ошибки.
Во-вторых, сеньоры разбирают тонны чужого кода и сторонние библиотеки, где кроме дебаггера альтернатив нет.

Я тоже пользуюсь алертами. Как пошла привычка с начала, так и есть до сих пор

UFO just landed and posted this here
Как человек который пишет на TS + React + Mobx с вами не соглашусь – с реальностью очень хорошо всё бьётся. Просто вам необходимо совершить этот квантовый переход с консоль лога на брейкпоинты и тогда вы познаете всю мощь светлой стороны силы.

Совет: чтобы дебаггер дружил с транспилированным кодом нужно в конфиге вебпака установить devtool: 'eval'. Так вы будете видеть уже траспилированный код, но с разбивкой по реальным файлам как в файловой системе.

Совет вытекающий из предыдущего совета: чтобы транспилированный код был читаеме нужно в конфиге TS выставить target в ESNext (или сделать аналогичное для Бабеля)

Бонус совет: Остановившись на точке останова вы можете переключится во вкладку девтулзов console и там у вас будет доступ ко всем переменным текущей области видимости
UFO just landed and posted this here
Кстати, не нашёл это в статье, но в девтулзах есть аналог консоль лога:
А я все жду когда разработчики Chrome Devtools добавят возможность уайтлистить файлы и директории с кодом (сорсмапнутые), обычно то что мне нужно продебажить находится в 5-6 файлах. Сейчас можно только в черный список добавить, а это около миллиона файлов библиотек

Кстати вы не найдёте там теперь пункта чёрный список) потому что африканцы в америке взбунтовались в прошлом году. Теперь это называется иначе. Кажется ignore list

Я всё жду когда разработчики Chrome DevTools сделают так чтобы отладка не зависала во перед и во время брейкпойнта

Sign up to leave a comment.