Recently I've spent some off-and-on time to improve Heatfiler, my heatmap profiler. I was using it to optimize ZeParser2 and ran into a few minor things that were bugging me. Besides that I've received some feedback that the UI was slightly confusing and hard to get up-n-running.
So what's changed?
First of all, the UI has received a major overhaul. I hope it's much easier to use now and see where to paste what to get what working. It might still be a bit intimidating but at least there are better instructions and a better separation now. Also there are examples and it's possible to boot people directly to a working example (
like this one) which might help in the "wow" department. :)
The heatmap itself received some paint too. The biggest thing is the minimap, which you can use to quickly navigate your source. It's like a wide scrollbar which represents your source code. I really like the addition.
Another change is that it will now count and tracks types. One thing I kept constantly doing was to check how often a certain sub-expression would return truthy in order to see which part of
a || b || c would be accessed most (because maybe the expression should really be
c || a || b to be more efficient). So now you don't have to do add and subtract the counts anymore, it will just tell you how many times an expression returned a falsy value.
It's not just boolean you get, though, you can also see which types are returned for a subset of expressions. This goes a bit into the JIT territory, but it was something I needed to investigate myself. You get the
typeof results, as well as warnings for
NaN and implicit returns.
Functions got a little overhaul too. You already had the ability to focus on them (make all stats in the function relative to just the function), but now you can also remove the function body from the stats. And there are icons now to clarify that something can be done there :)
The function will also tell you the return types (from all returns in that function combined) and tell you how often it has been declared versus how often it has been called, since these are two different things.
If you run the code locally in the current tab the heatmap has a spinner by which you can see whether the browser is currently frozen, executing your code, or not. This might help to prevent some confusion in that department.
With the higher granularity, I unfortunately had to take a step back in terms of clarity. More specifically, you'll see that expressions are oddly wrapped. Something like
(foo) allows you to highlight
( and
foo, but not the closing
). Neither will the entire expression light up when you highlight the
(. This is an unfortunate limitation in HTML and CSS that I haven't worked around yet. Ideally, the whole expression should light up when you hover over the
(. But since CSS doesn't allow you to "prevent" a hover on a parent element, there would be no difference between hovering over
(, and hovering
foo. And that's definitely something I want to see. I have some vague idea on how to get around that but not sure when I'll implement that. IMO the tool is usable as is.
I've added a popup to show you the most executed statements (much like most called funcs, which was already possible). There's also some JIT related popup which tells you about polymorphic functions and all that.
Oh and it remembers your last input through
localStorage. If you enter no input it will use a silly code example, or ZeParser2 for files, when you press start anyways.
I can tell you that I'm already enjoying the new version better than the old one when dealing with ZeParser2 :) I hope you enjoy it as well.
HeatFiler:
http://heatfiler.qfox.nl/Running example:
http://heatfiler.qfox.nl/#run,files,here,startGithub:
github.com/qfox/heatfilerBlog post for v1:
here