With web sites/apps becoming more and more dynamic on the front-end, it can be difficult to see exactly what modifications JavaScript is making to elements in the DOM.

To help, I've taken the rather lo-fi approach of recording Firebug (or Chrome's Dev Tools) with LICEcap, a free, cross-platform tool for animated screen captures. I then open the GIF in Fireworks (or Photoshop if you're that way inclined), step through the frames, and see which elements were modified at specific times.

In the past, I've used it succesfully to debug some awful, Drupal behaviours, a complex implementation of Headroom.js, and have just used it to debug a table populated with Ajax by Angular.

As you can see from the GIF below, I can see when elements were "touched", and when the table had the .is-scroll-loading class applied.

Screencast of DOM modifications


2,617 2 5