# devtrace

> Benchmark runner for trace metrics

Latest version **0.13.0** (published 2018-04-14) · Apache-2.0 license · 0 weekly downloads

## Install

```sh
npm install devtrace
pnpm add devtrace
yarn add devtrace
bun add devtrace
```

Provides the commands `plot`, `report`, `runtime-stats`.

## Health

**Score 25/100 (F)** — status: abandoned.

Positive: has types; no vulnerabilities; high quality score.

Warnings: low downloads; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.13.0 |
| Published | 2018-04-14 |
| First published | 2018-04-14 |
| Weekly downloads | 0 |
| License | Apache-2.0 |
| TypeScript types | bundled |
| Module format | CommonJS |
| Dependencies | 2 |
| Unpacked size | 107.4 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 250 |
| Author | Kris Selden |
| Maintainers | krisselden |
| Keywords | chrome, tracing |

## Links

- npm: https://www.npmjs.com/package/devtrace
- Repository: https://github.com/devtrace/chrome-tracing
- npm.io page: https://npm.io/package/devtrace

## Dependencies (2)

- [array-binsearch](https://npm.io/package/array-binsearch.md) ^1.0.1
- [chrome-debugging-client](https://npm.io/package/chrome-debugging-client.md) ^0.4.2

## Recent versions

- 0.13.0 (latest) — 2018-04-14

## README

chrome-tracing
==============
[![Build Status](https://travis-ci.org/krisselden/chrome-tracing.svg?branch=master)](https://travis-ci.org/krisselden/chrome-tracing)

Chrome tracing allows you to automate Chrome benchmarking. It's goal is to provide a JavaScript variant of [Telemetry](https://www.chromium.org/developers/telemetry/run_locally).

## Basic Usage

The most basic benchmark is the `InitialRenderBenchmark`.

```js
import { InitialRenderBenchmark, Runner } from "chrome-tracing";

let control = new InitialRenderBenchmark({
  name: "control",
  url: "http://localhost:8001/",
  endMarker: "renderEnd",
  browser: {
    type: "canary"
  }
});

let experiment = new InitialRenderBenchmark({
  name: "experiment",
  url: "http://localhost:8002/",
  endMarker: "renderEnd",
  browser: {
    type: "canary"
  }
});

let runner = new Runner([control, experiment]);
runner.run(50).then(result => {
  console.log(result);
}).catch(err => {
  console.error(err);
  process.exit(1);
});
```

In the app you must place a marker to let Chrome Tracing know that you are done rendering. This is done by using a `performance.mark` function call.

```
function endTrace() {
  // just before paint
  requestAnimationFrame(function () {
    // after paint
    requestAnimationFrame(function () {
      document.location.href = "about:blank";
    });
  });
}

renderMyApp();
performance.mark("renderEnd");
endTrace();
```

In the example above we would mark right after we render the app and then call an `endTrace` function that ensures that we schedule a micro-task after paint that transitions to a blank page. Internally Chrome-Tracing will see this as the cue to start a new sample.

## Extending Benchmarks
TODO

---
_Source: https://npm.io/package/devtrace · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._