Могу ли я просмотреть цикл событий браузера, чтобы узнать порядок JS, запланированный для выполнения?

Question

Я унаследовал кодовую базу, в которой порядок выполнения JS неясен, поскольку существует множество setTimeout вызовов, глобальных переменных и разорванных цепочек Promise.Вместо того, чтобы вручную отслеживать каждый путь выполнения, я бы хотел получить информацию о том, что JS запланировано для выполнения в очереди сообщений браузера в течение определенного периода времени или в ответ на событие.

Я вижу прослушиватели событийи проследить, когда один из них запускается, но в моем случае это происходит слишком медленно. Один щелчок может распасться на несколько запланированных сценариев, каждый из которых изменяет общее состояние.Вот почему я не рассматриваю трассировку от обработчиков событий и вместо этого ищу всеобъемлющую временную шкалу для всех JS в приложении.

Учитывая, что сценарии JS запланированы для выполнения , как я могувидите порядок, в котором JS ставится в очередь?

Я начал с чего-то вроде этого, но это не дает мне полностью надежную временную шкалу.

const {
  setTimeout,
  setInterval,
} = window;

window._jsq = [];

window._record = f => {
  window._jsq.push([f, new Error().stack]);
};

window.setTimeout = (...a) => {
  window._record(a[0]);
  return setTimeout.apply(window, a);
};

window.setInterval = (...a) => {
  window._record(a[0]);
  return setInterval.apply(window, a);
};

Answer 1

Я возьму трещину на свой вопрос с точки зрения фрагмента OP.Исправления приветствуются.

Если вы не видите очередь сообщений (или, по крайней мере, сценарии, поставленные в очередь), вы все равно можете увидеть код планирования других JS и код запланировано для запуска.Таким образом, отслеживание обоих возможно независимо.

Это не все хорошие новости, потому что вам все еще приходится работать, чтобы 1) адаптировать это отслеживание к различным способам, которые JS может планировать, и 2) понять, что выcapture.

В случае setTimeout что-то быстрое и грязное, подобное этому, может, по крайней мере, обеспечить ощущение графика времени и того, когда что-то действительно произошло.Это всего лишь вопрос оборачивания функций.

const { setTimeout } = window;

// For visibility in DevTools console
window._schedulers = [];
window._calls = [];

const wrap = f => {
  const { stack } = new Error();

  window._schedulers.push([stack, f]);

  return (...a) => {
    window._calls.push([stack, f, a]);

    return f(...a);
  };
};

window.setTimeout = (f, delay, ...a) => {
  return setTimeout.apply(window, [wrap(f), delay].concat(a));
}

Тем не менее, это всего лишь один случай, в котором ничего не говорится о том, когда начинать / останавливать мониторинг, и о потенциальных точках запуска, где отслеживание является проблемой, как упомянул Мосе Рагуццини.В случае с Обещаниями этот ответ вызывает средства проверки Bluebird.

Кажется, что пока не появятся дополнительные нативные инструменты для визуализации сценариев в очереди и связанной с ними информации, вы застряли, собирая и анализируяданные от руки.

Answer 2

Нет встроенного инструмента автоматической отладки для отслеживания цикла событий вашего браузера.Для того, чтобы отслеживать цикл событий браузера, вы должны детально отслеживать интересующее вас событие и передавать его (в данном случае Chrome) DevTool:

monitorEvents(document.body, "click");

Дополнительная информация о мониторингесобытия в Chrome Dev Tools

Примечание # 1: Вы не знаете, как вызываются пользовательские события.Они могут не отправлять событие в DOM (например, некоторые библиотеки реализуют свои собственные системы регистрации и обработки событий), поэтому нет общего способа узнать, когда вызываются прослушиватели событий, даже если вы можете отслеживать отправку события.

Некоторые библиотеки также имитируют всплытие событий, но, опять же, если вы не знаете тип события, вы не сможете его прослушать.

Однако вы можете реализовать свою собственную систему управления событиями и реализовать функциюпрослушивать все события, для которых установлены прослушиватели, или события, отправляемые с помощью вашей системы.

Ref: Как я могу отслеживать все пользовательские события, генерируемые в браузере?

Примечание # 2: современный JS-подход к событиям (IE: React / Redux) предусматривает диспетчеризацию ACTIONS вместо событий.Поскольку действия часто logged для time-travel цели, мониторинг событий в этом случае не требуется.