https://github.com/raisinten/perftrace

Visualize Performance issues in your JavaScript Applications
https://github.com/raisinten/perftrace

perfetto performance tracing

Last synced: about 5 hours ago
JSON representation

Visualize Performance issues in your JavaScript Applications

• Host: GitHub
• URL: https://github.com/raisinten/perftrace
• Owner: RaisinTen
• License: mit
• Created: 2024-04-24T08:57:49.000Z (7 months ago)
• Default Branch: main
• Last Pushed: 2024-09-16T12:31:46.000Z (about 2 months ago)
• Last Synced: 2024-09-17T12:45:57.640Z (about 2 months ago)
• Topics: perfetto, performance, tracing
• Language: JavaScript
• Homepage: https://www.npmjs.com/package/perftrace
• Size: 12.2 MB
• Stars: 40
• Watchers: 2
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# perftrace

Record [`PerformanceEntry`](https://w3c.github.io/performance-timeline/#dom-performanceentry) objects from [Node.js](https://nodejs.org/api/perf_hooks.html) and the [Web](https://w3c.github.io/performance-timeline) in the [Trace Event Format](https://docs.google.com/document/d/1CvAClvFfyA5R-PhYUmn5OOQtYMH4h6I0nSsKchNAySU/preview), so that it can be visualized on  like this!

![](./docs/examples/tracing-requires/perfetto.png)

The code for this example is available [here](docs/examples/tracing-requires).

![](./docs/examples/client-side-use-on-web-browser/perftrace-web.gif)

The code for this example is available [here](docs/examples/client-side-use-on-web-browser).

Check out the blog !

## Install

To install via [NPM](https://www.npmjs.com/package/perftrace), run:

```

npm i perftrace

```

Alternatively, you can use it in vanilla JS, without any bundler, by using a CDN or static hosting. For example, using ES Modules, you can import the library with:

```html

  import { TraceEvents } from "https://cdn.jsdelivr.net/npm/perftrace/index.mjs";

```

## Usage



```js

const { TraceEvents, trackRequires } = require('perftrace');

const { writeFileSync } = require('fs');

const traceEvents = new TraceEvents();

// Writes the performance traces in the "events.json" file during process exit.

process.on("beforeExit", () => {

  const events = traceEvents.getEvents();

  traceEvents.destroy();

  writeFileSync("events.json", JSON.stringify(events));

});

// Enables tracking require() calls.

trackRequires(true);

// The assert module takes milliseconds to load, so it would be distinctly

// visible in the performance trace.

const assert = require('assert');

const { performance } = require("node:perf_hooks");

// This is tracing an async setTimeout event which is interlaced with

// repeating setInterval events.

performance.mark("Timeout mark"); // marks the beginning of the timeout trace

setTimeout(() => {

  performance.measure("Timeout", "Timeout mark"); // marks the ending of the timeout trace

}, 20);

let id = 0;

performance.mark(`Interval mark ${id}`); // marks the beginning of the first interval trace

setInterval(function () {

  performance.measure(`Interval ${id}`, `Interval mark ${id}`); // marks the ending of the current interval trace

  ++id;

  // The intervals should go up to 3 counts only.

  if (id === 3) {

    this.close();

  }

  performance.mark(`Interval mark ${id}`); // marks the beginning of the next interval trace

}, 5);

```

After running this script with `node filename.js`, open the generated `events.json` file on .

Check out the [API documentation](docs/api) and the [code examples](docs/examples) for details.

## License

This project is available under the [MIT license](https://opensource.org/license/MIT). See [LICENSE](LICENSE) for the full license text.