DevTools ???? Async ?? ??? ????? Promise? ?? ??? ???? ?? ??? ???? ?? ?? ??? ? ? ????. 2. ??? ??, .then ()/. catch () ???? ?? ?? ?? ???? ??? ???? ?? ? ?? ?????? ???? ?????. 3. "??? ?? ?? ??"? ???? "??? ?? ?? ??"? ????? ??? ?? ? ??? ??? ???? ???? ?? ?? ?? ? ??? ??????. 4. Async ??? Console.trace ()? ???? Async ? ??? ???? ?? ???? ?? ?? ?? ??? ?????. 5. ??? ??? ?? Console.Time ()? ???? ??? ? ?? ??? ? ? ???? ?? ?? (? : Settimeout)? ???? ??? (? : Promise.Then) ?? ??? ?? ??? ?????. ?? ??? ??? ???? ???? ???? Async ??? ???? DOM ?? ???? ????? ?? ???? ??? ??? ??? ?????. ??? ?? ???, ?? ?? ?? ? Console.trace () ??? JavaScript? ???? ?? ??? ??? ????? ????? ????.

JavaScript?? ??? ??? ????? ?? ???? ? ????. ?? ?, ??, ???/?? ? ??? ??? ?? ??? ????? ?????. Chrome Devtools? Async ??? ????? ????? ? ????? ??? ??? ?????. ?? ??? ??? ????.

1. ?? ?? ? ??? ?? ??? ??????

??? ??? ??? ? ? ?? ?? ??? ?? ?? ???? ? ????, ?? ?? ??? ?? ?? (? : Promise.then() ??)?? ??? ??? ?? ?????. ??? ??? ??? ???? ?????? ??? ?????.

??? ?? ?? ??? :

• Chrome DevTools? ?????.
• ?? (?? ???) → ?? ?? → ?? ? ??????.
• "??? ?? ??"? ??????.

?? ????? Chrome? setTimeout , Promise.then , Then ? await ?? ??? ??? ?? ?? ??? ?????. ??? ?? ?? ??? ?????? ?? ? ??? ??? ????.

?:
fetchData() → fetch() → .then(handleResult) → handleResult() ??? ?? Async ??? ??? ? ?? handleResult ? ???? .then() ??? ?? ?? ??? ?????.

2. ?? ? ??? ???? ?? ?? ??????

??? ??? ?? ??? ??? ??? ? ? ????.

• async ?? ??
• .then() ? .catch() ??
• ??? ??? ??? await

? :

• ?? ??? ? ??? ???? ?? ?? ???? ???? ??????.
• ??? async ?? ??? ?? ?? ????, await ???? ??? ???? ?? ? ?? ?????.
• ?? ??? ???? ?? ??? ??????. ??? ??? ??? ?? ( pending , fulfilled , rejected ) ? ??? ?????.

3. "??? ?? ?? ??"??? ??????

??? ??? ???? ?? ?? ?? ?? ??? ?? ???? ??? ???? ?? ??? ??? ??? ? ????.

??? ?? ?? ?? ??? :

• DevTools ?? ??? ???? ?? ??? ?????? (?).
• ??? ?? "?? ??? ?? ?? ??" ? ??????.
• ??? ?? ???? ?? ?? ?? ( --unhandled-rejections=strict ??? ?? ?? ??)?? ?? ?????.

?? ?? .then() ?? ?? ??? ?? ? ??? ???? await ??? ?????.

4. ?? ???? ?? Console.trace ()? ??????

???? ???? ???? ?? ?? ??? ??? console.trace() ? ?? ?? ??? ?? ??? ??? ??????.

 ??? ?? step1 () {
  STEP2 ();
}

??? ?? step2 () {
  Await Promise.Resolve ();
  Console.Trace ( "??? ???? ?????");
}

?? ?? ??? ?? ?? ? ? ??? ?? ?? ? ? ?? ?? ??? ?? (???? ???? ?? ??? ??)? ?????.

5. ??? ???? ?? ? ???? ???? ??????

Chrome Devtools? ?? (? : setTimeout )? ?????? (? : Promise.then )? ????? ???? ????? ???? ?? ??? ???? ? ??????.

• ?? : UI ???, setTimeout , setInterval
• queueMicrotask ??? MutationObserver Promise.then

??????? ?? ?? ?? ????? ??? ???? ??? ?? ???? ??? ??? ? ????.

? : performance.now() ?? console.time() ???? ??? ??? ??? ? ? ?? ???? ??????.

??? : ??? ??? ?? ?? ??????

??? Async ??? DOM ??? ?? ???? ??? ?? ??????.

?? ??? :

• ??? ??? ?? ?? ?????? (???).
• click , fetch ?? timeout ? ?? ???? ?? ?? ?? ???????.

????? ??? ??? ?? ? ? ?? ?? ?? ? ???? ??? ?? ?? API ??? ???? ? ??????.

Chrome DevTools? ??? ?? ???? ????? ????. ??? ?? ??? ???, ??? ???? ??? ? ??? ?? ??? ?? ???? ?? ??? ??? ? ????. ??? ???? ? ??? ?? ??? ??? ?? ????.

????? ??? ??? ????? ??? ?? ???? ??? ? console.trace() ? ??????. ???? ?? ??? ????? ????.

? ??? Chrome Devtools? ??? ?? ???? ?? ?????. ??? ??? PHP ??? ????? ?? ?? ??? ?????!