title: Record and replay Javascript
body: <p>I know it is possible to record mouse movements, scrolling and keystrokes. But what about changes to the document? How can I record changes to the document?</p>
  
  <p>Here is my try out. There must be a better more simple way to store all events?</p>
  
  <p>I am thankful for all tips I can get!</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
  &lt;title&gt;Record And replay javascript&lt;/title&gt;
  &lt;/head&gt;
  &lt;body id="if_no_other_id_exist"&gt;
  
  &lt;div style="height:100px;background:#0F0" id="test1"&gt;click me&lt;/div&gt;
  &lt;div style="height:100px;background:#9F9" class="test2"&gt;click me&lt;/div&gt;
  &lt;div style="height:100px;background:#3F9" id="test3"&gt;click me&lt;/div&gt;
  &lt;div style="height:100px;background:#F96" id="test4"&gt;click me&lt;/div&gt;
  
  
  
  &lt;script src="http://code.jquery.com/jquery-latest.min.js"&gt;&lt;/script&gt;
  &lt;script&gt;
  
  $(document).ready(function() {
  var the_time_document_is_redy = new Date().getTime();
  var the_replay = '';
  
  
  $('div').live("click", function (){
  var the_length_of_visit = new Date().getTime() - the_time_document_is_redy;
  
  
  // check if the element that is clicked has an id
  if (this.id)
  {
  
  the_replay =
  the_replay
  +
  "setTimeout(\"$('#"
  +
  this.id
  +
  "').trigger('click')\","
  +
  the_length_of_visit
  +
  ");"
  ;
  
  
  alert (
  "The following javascript will be included in the file in the replay version:\n\n"
  + 
  the_replay
  ) // end alert
  
  } // end if
  
  
  
  // if it does not have an id, check if the element that is clicked has an class
  else if (this.className)
  {
  
  // find the closest id to better target the element (needed in my application)
  var closest_div_with_id = $(this).closest('[id]').attr('id');
  
  the_replay =
  the_replay
  +
  "setTimeout(\"$('#"
  +
  closest_div_with_id
  +
  " ."
  +
  this.className
  +
  "').trigger('click')\","
  +
  the_length_of_visit
  +
  ");"
  ;
  
  
  alert (
  "The following javascript will be included in the file in the replay version:\n\n"
  + 
  the_replay
  ) // end alert
  
  } // end if
  
  });
  
  
  
  
  
  
  // fall back if there are no other id's
  $('body').attr('id','if_no_other_id_exist');
  
  
  // example of how it will work in the replay version
  setTimeout("$('#test1').trigger('click')",10000);
  
  });
  &lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>