Как правильно расставлять console.log для отладки асинхронного кода? На что обращать внимание в порядке вывода?

Понимание асинхронности и console.log

При отладке асинхронного кода в JavaScript важно учитывать, что console.log выполняется синхронно, но может отображать ссылки на объекты, которые изменяются асинхронно. Порядок вывода сообщений зависит от механизма event loop, который управляет очередями макрозадач и микрозадач.

Практические примеры

Рассмотрим пример с setTimeout и Promise:

console.log('1');
setTimeout(() => console.log('2'), 0);
Promise.resolve().then(() => console.log('3'));
console.log('4');
// Вывод: 1, 4, 3, 2

Здесь видно, что микрозадачи (Promise) выполняются раньше макрозадач (setTimeout), даже если таймер равен 0.

Рекомендации по отладке

• Используйте console.log внутри колбэков и then/catch блоков.
• Для отслеживания изменений объектов используйте JSON.stringify(JSON.parse(obj)).
• Добавляйте уникальные метки, например console.log('fetchData start').

Вывод

Правильное использование console.log в асинхронном коде помогает понять порядок выполнения и выявить проблемы с race conditions или неправильной последовательностью операций.