Trace the sequence of events in a Meiosis application. http://meiosis.js.org
JavaScript HTML
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
chrome-devtool
dist
lib
src
.babelrc
.eslintrc.js
.gitignore
.npmignore
LICENSE
README.md
package-lock.json
package.json
webpack.config.js

README.md

Meiosis-Tracer

Meiosis-Tracer is a development and debugging tool that traces, rewinds, and replays snapshots in a Meiosis application. You can also directly enter your own model snapshots and see the resulting view.

NEW: you can now use Meiosis-Tracer as a Chrome DevTools Extension! See Chrome DevTools Extension further down the page for details.

VERSION 1.2.0 RELEASED: see what's new in this short screencast on YouTube

You can install Meiosis-Tracer with npm:

npm i --save meiosis-tracer

Then use it along with Meiosis. First, add an HTML element to your page where you want the tracer to be rendered, and give it a way to identify it via a selector. For example:

<div id="tracer" style="position: fixed; top: 0px; right: 0px;"></div>

Call the Meiosis trace function by passing it the update stream and the dataStreams that you want to trace. Optionally, specify otherStreams for other streams to trace, such as an eventStream. Then, create the tracer by passing it the selector for the element where the tracer will be rendered:

import { trace } from "meiosis";
import meiosisTracer from "meiosis-tracer";

const update = ...;
const model = ...;
const viewModel = model.map(...);
const eventStream = ...;

trace({ update, dataStreams: [ model, viewModel ], otherStreams: [ eventStream ]});
meiosisTracer({ selector: "#tracer" });

This will render the tracer into the element that has the tracer id.

You can also download the JavaScript file from the Meiosis downloads page and add it to your page with a plain <script> tag. In that case it will be available as the meiosisTracer global variable.

Chrome DevTools Extension

Meiosis-Tracer is now also available as a Chrome DevTools Extension, so that you can use it without needing to add it to your page.

You can get it from the Chrome Web Store.

Once installed:

  • If DevTools was already open, close it
  • When you open DevTools, you should have a Meiosis tab.

Alternatively, you can run it directly from the source code. To do so, clone the repository:

git clone https://github.com/foxdonut/meiosis-tracer
  • In Chrome, open chrome://extensions
  • Press Load unpacked extension...
  • Select the chrome-devtool directory under meiosis-tracer
  • If DevTools was already open, close it
  • When you open DevTools, you should have a Meiosis tab.

Meiosis-Tracer works in the same way either added to the page, or in DevTools. Enjoy!

Credits

The following repositories were very helpful in developing the Chrome extension for Meiosis-Tracer. My thanks and appreciation go to their authors!

--

Meiosis is developed by foxdonut (@foxdonut00) and is released under the MIT license.