Швейцарский нож отладки JavaScript

[k12th]

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

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

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

[faiwer]

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

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

[anatoly314]

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

[faiwer]

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

[Tauyekel]

до сих пор пользуюсь)

[jt3k]

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

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

[ImagineTables]

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

[xadd]

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

[extempl]

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

[cliff_5]

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

[inoyakaigor]

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

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

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

Бонус совет: Остановившись на точке останова вы можете переключится во вкладку девтулзов console и там у вас будет доступ ко всем переменным текущей области видимости

[inoyakaigor]

Кстати, не нашёл это в статье, но в девтулзах есть аналог консоль лога:

[Tauyekel]

А я все жду когда разработчики Chrome Devtools добавят возможность уайтлистить файлы и директории с кодом (сорсмапнутые), обычно то что мне нужно продебажить находится в 5-6 файлах. Сейчас можно только в черный список добавить, а это около миллиона файлов библиотек

[jt3k]

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

[jt3k]

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