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