Skip to content

Traces a timeline of showing which lines are running and what data they contain

Notifications You must be signed in to change notification settings

wylieconlon/timeline-trace

Repository files navigation

Timeline Trace

Instruments and visualizes execution of JS code. Supports detailed tracking of:

  • Variable assignment
  • Function calls, arguments, and return values
  • For and while Loops
  • If Conditions

Setup

npm install
npm run build
npm run watch

This project uses a node server to run, as the project uses HTML5 routing:

npm run start

Testing

npm run test

How it works

There are two parts to this project, the tracking code, and the visualization of the code. The code in src/core rewrites a string of Javascript and inserts calls to the function __tracking() whenever:

  • A variable is assigned
  • A function is calls
  • A loop is run
  • A branch of a condition is run

And the implementation of __tracking() in src/core/runtime.js sends a message to a host iframe, but you could use your own implmentation to create custom visualizations of code or integrate into an IDE.

Example

Input:

var x;

Output:

try { var x;

__tracker("assignment", "x", "1,4,1,5", x); } catch (e) { console.error(e); }

Input:

if (x === y) {
  doSomething();
} else {
  doNothing();
}

Output:

try { let _if = x === y;

__tracker("condition", "x === y", "1,4,1,11", _if);

if (_if) {
  doSomething();
} else {
  __tracker("condition", "else condition", "3,7,5,1");

  doNothing();
} } catch (e) { console.error(e); }

About

Traces a timeline of showing which lines are running and what data they contain

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published