A profiler for your Javascript object's methods. Makes graphs!
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
Grapher.js
ProfilerLightningPresentation.pdf
README.md
flatGrapher.js
jsProfiler.js
profiler.css
stackedGrapher.js

README.md

#Caffeine: A Visualized Profiler for Web Applications

####About Allows you to capture the run time of specific Javascript objects' methods so you can see how the code YOU wrote is doing

####Unbundled Dependencies jQuery

####Warning It is recognized that, based on the architecture of this program, profiling your methods using this program slows down your program marginally. We have not yet profiled this program's methods.

###Quick How-To 0. Put the Caffeine folder on your program's path.

  1. If you don't already have jQuery as a script in the head of your HTML, put the following line in your HTML head: <script src='../Caffeine/jquery-1.8.2.min.js'></script>

  2. In the head of you HTML file, put following after all of your other requisite JS files

     <script src="http://code.jquery.com/ui/1.9.1/jquery-ui.js"></script>
     <script src='Caffeine/jsProfiler.js' type='text/javascript'></script>
     <script src='http://d3js.org/d3.v2.js'></script>
     <script src='Caffeine/flatGrapher.js' type='text/javascript'></script>
     <script src='Caffeine/stackedGrapher.js' type='text/javascript'></script>
     <link rel="stylesheet" type="text/css" href="Caffeine/profiler.css" />
     <link rel="stylesheet" href="http://code.jquery.com/ui/1.9.1/themes/base/jquery-ui.css" />
    
  3. In your Javascript, just pass the instance of your object that will be used throughout your program to a new instance of the Profiler, along with a boolean of if you want the Profiler to make a graph. Then start the Profiler by calling start() on it. Make sure you call start() before your object instance does anything, or all of the object's behaviors won't be profiled. For example:

     lolcat = new LOLCat();
     new Profiler(lolcat, true).start();
    

##API ###Application-wide Variables

####grapher The application-wide graph alias. Starts off as instance of FlatGrapher

####originators A list of StackObjects representing the top-level functions

####functions An object holding all the MethodObjects


###MethodObject() An object representing one of the profiled object's methods

####MethodObject.runs An array of the clocked runtime for each time the represented method was run


###StackObject() Dummy representations of objects that keep track of a method's call stack (which methods it calls, tree-like)

####StackObject.name The name of the method that this object represents

####StackObject.children An array of StackObjects representing the methods that the represented method calls


###Profiler

####Profiler(toProfile, graphing) Creates a new profiler for the passed in object. If graphing == true, the average runtimes will be in a moveable and scalable graph div appended to the bottom of the page upon starting the Profiler

####Profiler.start() Begins the runtime analysis.

####Profiler.traverser() Helper method that recursively traverses an object's attributes looking for methods, keeping track of each method it finds, and delegating to Profiler.clocker() for timing the methods.

####Profiler.clocker() Helper method that wraps a method in clocking code and figures out the call structure of each method. Aids in the creation of the originators object.

Returns the wrapped method.


Grapher

Super class of FlatGrapher and StackedGrapher

####Grapher.init() Creates the initial graph. Overridden in subclasses

####Grapher.redraw() Redraws the graph. Overridden in subclasses. Refreshes every second.

####Grapher.scale() Scales the graph. Calls redraw(). Overridden in subclasses

####Grapher.stop() Stops the redrawing of the graph


FlatGrapher

Inherits from Grapher

####FlatGrapher.init() Creates the initial graph visualization such that each method has it's own bar

####FlatGrapher.redraw() Redraws the graph. See Grapher.redraw() for more information.

####FlatGrapher.scale() Scales the graph.

####FlatGrapher.stop() Stops the redrawing of the graph


StackedGrapher

Inherits from Grapher

####StackedGrapher.init() Creates the initial graph visualization such that each bar represents a top-level method in originators. Nested inside each bar, recursively, are the methods called by the depicted method.

###StackedGrapher.nest() Helper method for StackedGrapher.init() that recursively draws the nested bars

####StackedGrapher.redraw() Redraws the graph. See Grapher.redraw() for more information.

####StackedGrapher.recursiveRedraw() Helper method for StackedGrapher.redraw() that recursively redraws the nested bars

####StackedGrapher.scale() Scales the graph.

####StackedGrapher.stop() Stops the redrawing of the graph