JavaScript execution logs.
Earhorn instruments your JavaScript and shows you a detailed, reversible, line-by-line log of JavaScript execution, sort of like console.log's crazy uncle.
The demo is here. Check it out!
Step 1
Add Earhorn to your website. An easy way:
git clone https://github.com/omphalos/earhorn
Step 2
Add a reference to earhorn.js to your page.
<script src="/earhorn/earhorn.js"></script>
Step 3
Wrap your code with a call to earhorn$.
For example, to instrument this code:
var x = 3;
var square = x * x;
Wrap it with a call to earhorn$:
earhorn$('a made-up label', function() {
var x = 3;
var square = x * x;
})()
The call to earhorn$ just returns an instrumented version of what you pass to it.
Step 4
Navigate to /earhorn/index.html. Then open the web page hosting your JavaScript in a separate tab.
(You can also open your web page in an iframe, by adding iframe=your-web-page-url after the hash. For example, /earhorn/index.html#iframe=examples/mouse.html.)
This thing is still at the prototype stage, and the code is in flux. There are some performance issues at the moment with larger codebases. If you're just using Earhorn on less than 1000 LOC, you'll generally be okay.
Right now, Earhorn gives you a detailed view of code execution. It should be possible to integrate code instrumentation deeper into the editing experience. Some possibilities:
- Instrumentation-based autocomplete for autocomplete that side-steps many of the issues that static JavaScript analysis runs into.
- Function navigation. It should be straight-forward to navigate to a function's definition, as well to all of its invokations.
- Code hot-swapping. This is something that V8 supports natively, but should be possible with an instrumentation library as well, as instrumented functions can hold references to their uninstrumented code and re-instrument new code at runtime.
- Remote execution of code. During instrumentation it's possible to save references to eval inside instrumented functions. These eval references could be used to remotely invoke code in the proper scope, letting you talk to and edit live functions without setting up breakpoints. I think this would be a nice addition to the REPLs and breakpoints that coders are already familiar with.
Additionally, custom object visualization should be straightforward to implement. Currently the object visualization widget is a fixed angular html template. But it should be straightforward to support user-injected angular templates that vary by object type.
MIT