jQuery: tracking, inspecting and debugging animations

Keeping track of the changes made to CSS properties during animations and inspecting their state it's a useful feature, especially for debugging. For that reason, I've created a simple tracking plugin that uses an array of CSS properties to follow the state of animation step by step. This simple plugin also stores the selector and context properties of the current jQuery's object to help you to locate the animated element in the DOM. Let's see the details.

The plugin's code is as follows:

(function($) {

  $.fn.tracker = function(options) {
  
    var that = this;
    
    that.data('selector', that.selector);
    that.data('context', that.context);
    
    var settings = {
  
      styleProperties: []
    
    
    };
    
    options = $.extend(settings, options);
    
    var props = options.styleProperties;
    var styleProps = '', i, len = props.length;
    
    styleProps += '{ ';
    
    for(i = 0; i < len; i += 1) {
    
      var value = that.css(props[i]);
      
      styleProps += props[i] + ':' + ' ' + value + '; ';
    
    }
    
    styleProps += ' }';
    
    
    return that.each(function() {
    
      var log = '[' + that.data('selector') + '] ' + 
                  that.data('context') + ' ' + styleProps;
                  
      $('<p/>').text(log).appendTo('body');  
    
    
    
    });
    
  
  
  };

})(jQuery);

You simply pass an array of CSS properties you want to track and invoke this plugin when necessary. For example, you can use this plugin with the step() method, like so:

$(function(){

  
  $('#test', 'body').click(function() {
  
    $(this).animate({
      width: 150,
      height: 150,
      left: 50
    }, {
    
      duration: 'slow',
      
      step: function() {
      
        $('#test', 'body').tracker({styleProperties: ['width', 'height', 'left']});
      
      
      }
    
    });
    
  });

});

You can see the demo below.

Demo

Live demo