@perf-tools/keeper

@perf-tools/keeper (aka PerfKeeper)
-----------------------------------
PerfKeeper — It's a tool for performance monitoring and profiling your application (also best replacement for console.time).

- ➡️   Living example of work   😲

``sh
npm i --save @perf-tools/keeper
`

---

$3

- Groups! 🗂
- DevTools -> Performance -> UserTiming 💡
- Output -> DevTools / Console or custom output 💬
- Out of box ⚡️
- Monitorings ⏱
- FPS 🌀
- Navigation Connection 🎛
- Navigation Timings 🚏
- Paint Timings: FCP / LCP / CLS 🏞
- Performance: FID / TBT / TTI 🚀
- Resource/Traffic ⚖️
- Memory 🤖
- Addons ✨
- console
- timeline

---

$3

`ts
// System keeper
import { system } from '@perf-tools/keeper';


// Custom keeper
import { create } from '@perf-tools/keeper';
import { googleAnalytics } from '@perf-tools/keeper/analytics/google';

const keeper = perfKeeper.create({
print: true, // DevTools -> Console
timeline: true, // DevTools -> Performance -> User timings
prefix: '⏱',
analytics: [
googleAnalytics({prefix: 'MyApp-'}),
],
});

// 1. Classic usage variant
keeper.time('FooBar');
// ...
keeper.timeEnd('FooBar'); // ⏱FooBar: 37ms

// 2. Shorted usage variant
const timer = keeper.time('FooBar'); // ⏱FooBar: 37ms
// ...
timer.stop();

// 3. Functional usage variant
keeper.time('FooBar', () => { // ⏱FooBar: 37ms
// ...
});

// 4. Usage variant with groups
const group = keeper.group('App');
group.mark('init'); // starting 'init' timer
// ...

group.mark('prepare'); // ending 'init' and starting 'prepare' timer
// ...

group.mark('render'); // ending 'prepare' and starting 'render' timer
// ...

group.stop(); // starting 'render' timer

// ⏱App: 382ms
// ⏱init: 243ms
// ⏱prepare: 19ms
// ⏱render: 120ms
`

$3

`html
























`

---

$3

- npm i
- npm test`, code coverage