Отладка асинхронного JavaScript в новой версии Chrome DevTools
сегодня в 16:18
В новой версии инструментов для веб-разработки DevTools в браузере Chrome Canary появился мощный инструмент для отладки асинхронного JavaScript. Поскольку такой код исполняется не линейным образов, то искать баги в нём раньше было довольно трудно. Однако, новые DevTools показывает полный список обратных вызовов (call stack), в том числе setInterval, setTimeout, XMLHttpRequest, promises, requestAnimationFrame, MutationObservers.
Таким образом, можно изучить состояние веб-приложения в любой момент, значение каждой переменной в этот момент и проч., это своеобразная «машина времени».Лучше всего новая функция DevTools демонстрируется в этой анимации.
Чтобы активировать режим отладки асинхронного JavaScript, нужно в браузере Chrome Canary (версия 35 или выше) зайти в инструменты разработчика и на вкладке «Sources» поставить галочку «Async» возле строки «Call Stack». После этого вы уже не захотите отключать эту опцию.
Для сравнения, вот как выглядит список вызовов в DevTools с отключенным режимом отладки асинхронного JavaScript (слева) и с включенным (справа).
Только зарегистрированные пользователи могут оставлять комментарии. Войдите, пожалуйста.
