Home
Run code
Listen
NodeJS
Result

Heatfiler

This is a JS heatmap profiler slash code coverage tool. Open sourced on github. See blog post. For help on usage, read the docs. The console is your friend (errors...) ;)

By Peter van der Zee, © August 2012 - 2013, pvdz.ee

Run code

Start running your code here. There are a few ways of running your code.

You can either immediately show the output or put the stats in localStorage.

For the files, make sure you enter each file on its own line. You can prefix it with a + or - to indicate whether you want to profile (+) the file or not (-). This page fetches them with ajax.

If you decide to send the profiling stats to local storage, you will need to open this page in another tab (in the same browser) and follow steps in the "Listen" tab.

My input will be

And I want to run it

Translated output:

Listen

Start listening to stats sent to localStorage. There are basically two ways of doing this.

Both methods will output the results to localStorage (in the same way). Press the "listen" button to start showing the heatmap.

To integrate HeatFiler first include the profiler in your project. Make all script tags in that project have a type="profile" or type="no-profile". Only the profile tags will be profiled, obviously. But other tags need to get a special type as well as to preserve execution order. Once this is done, load the project page and start listening in this tab.

Translated output:

ε

I have been left empty. On purpose. Honestly!

NodeJS

You can require HeatFiler in any existing nodejs project. Just tell it which files to profile and it will show the results here.

By default files are not profiled. When you run the whole nodejs integration thing, you will get a list of files that have been seen below.

The outputted file (configurable) must of course be accessible through XHR from this page. Other than that it works similar to the localStorage method.

Enter the configured location of the output file, either absolute or relative to this page. If cross domain, make sure it's accessible through XHR (setup CORS). In most browsers you'll need to run this page through a webserver in this mode, regardless (can't XHR from file system).

Fetching <> ...
Warning:
Detected no files to profile. Either try again in a few seconds or use the file list below to select the files you want to profile. To start profiling scripts, in your current setup, the call could be something like: 
require('').bootstrap('', [
  
]);

All files encountered in project (so far):

Translated output (of profiled files):

Profiler heatmap

If this spinner is not spinning, the browser is very busy running your code.

Current file: 

Loading heatmap...