DEV Community

Cover image for Console log timelines
josuamanuel
josuamanuel

Posted on • Edited on

Console log timelines

Logs are as necessary as tedious. They give valuable information in a usually terrible format. Coming to the rescue when we need to log time events, we have Chrono functionality in js-awe library:

https://www.npmjs.com/package/js-awe

npm install js-awe
Enter fullscreen mode Exit fullscreen mode

Chrono

Chrono time events and visualize them.

Spread in your Async code some:

chrono.time('step1')
chrono.timeEnd('step1')
Enter fullscreen mode Exit fullscreen mode

And then


 to log the timeline and some stats.

Full example: [chronoExample.js](https://github.com/josuamanuel/js-awe/blob/main/sandbox/Chrono/chronoExample.js)



```Plaintext
chronoCreation :  2023-05-25T20:58:17.175Z
report :  2023-05-25T20:58:18.480Z

Timeline of events:
┌────────┬───────────────────────────────────────────────────────────────────────────────────────┐
│ Events │ ms 0                                     650                             1186   1288  │
├────────┼───────────────────────────────────────────────────────────────────────────────────────┤
│ step1  │    |--------------------------------------|                                        || │
│ step2  │                                             |-------------------------------------|   │
│ step3  │                                              |-----------------------------|          │
└────────┴───────────────────────────────────────────────────────────────────────────────────────┘

Total elapse Time of each event:
┌─────────┬─────────┬────────┬────────────┐
│ (index) │  name   │ elapse │ percentage │
├─────────┼─────────┼────────┼────────────┤
│    0    │ 'step1' │  650   │   36.81    │
│    1    │ 'step2' │  615   │   34.84    │
│    2    │ 'step3' │  501   │   28.36    │
└─────────┴─────────┴────────┴────────────┘

Coinciding Events timeline:
┌─────────┬──────────────────────┬──────────┬────────────┐
│ (index) │    runningEvents     │ elapseMs │ percentage │
├─────────┼──────────────────────┼──────────┼────────────┤
│    0    │     [ 'step1' ]      │   650    │   51.38    │
│    1    │     [ 'step2' ]      │   114    │    9.04    │
│    2    │ [ 'step2', 'step3' ] │   501    │   39.58    │
└─────────┴──────────────────────┴──────────┴────────────┘
Enter fullscreen mode Exit fullscreen mode

Top comments (0)