Have you ever wanted to understand the performance of your asynchronous javascript code? If you have had to do it, it is quite likely that you used and . This will only give you basic logs. console.time('event') console.timeEnd('event') if there is a library that does the same thing and gives you: some ArtChar timelines, elapsed percentage of events, and overlapping events? And all without writing any additional line of code. What about Installation: npm install js-awe You can use it with require, import, and in the browser. for further installations follow: https://www.npmjs.com/package/js-awe Basic Example: import { Chrono } from 'js-awe'

let chrono = Chrono()

chrono.time('step1')
chrono.timeEnd('step1')
chrono.report() The Example Shown in the Cover Picture: We are doing the same thing as before. The complex part is for demonstration to generate asynchronous tasks so you can see the potential of the library. import { Chrono, sleepWithFunction } from 'js-awe'

let chrono = Chrono()

chrono.time('step1')

tasks().then(()=>{
  chrono.timeEnd('step1')
  chrono.report()
})


async function tasks()
{

  await sleepWithFunction(
    650,
    () => {
      chrono.timeEnd('step1')
    }
  )

  await sleepWithFunction(
    20,
    () => {
      chrono.time('step2')
    }
  )

  await sleepWithFunction(
    12,
    () => {
      chrono.time('step3')
    }
  )

  await sleepWithFunction(
    500,
    () => {
      chrono.timeEnd('step3')
    }
  ),
  await sleepWithFunction(
    100,
    () => {
      chrono.timeEnd('step2')
    }
  ),
  await sleepWithFunction(
    15,
    () => {
      chrono.time('step1')
    }
  )
}

Timeline in Your Logs Using js-awe Library: A Guide

About Author

Comments

TOPICS

THIS ARTICLE WAS FEATURED IN

Related Stories

How to Use Js-awe to Avoid Await Contamination

19 JavaScript Data Chart Libraries

5 Data Visualization Widgets for Modern JavaScirpt Libraries

5 JavaScript Project Management Libraries to Boost Web Development

7 Frameworks to Create Ideal UI/UX Prototypes in Javascript

Build Your Own JavaScript Library to Detect Mobile Browsers

How to Use Js-awe to Avoid Await Contamination

19 JavaScript Data Chart Libraries

5 Data Visualization Widgets for Modern JavaScirpt Libraries

5 JavaScript Project Management Libraries to Boost Web Development

7 Frameworks to Create Ideal UI/UX Prototypes in Javascript

Build Your Own JavaScript Library to Detect Mobile Browsers

Light-Mode

Classic

Newspaper

Minty

Dark-Mode

Neon Noir

Minty

HN StartUps