Debugging Performer

No matter how much you may want things to be perfect, sometimes they just won’t work. No problem – Performer has a debugging system built in. Just add the class performer-debug to any element in your page (I find it’s best on the body element) like this:

<body class="performer-debug">

You’ll then be given the Performer debug output looking like this:

Performer debug (open)

And you can minimise it, too:

Performer debug (closed)

The debug window gives you a list of all Performer elements found, and a description of every event as it happens to those elements. This page has Performer debug enabled – go on, try it!

You can also programatically load or unload the Performer debug output by giving a link the CSS class toggle-performer-debug, like this:

Toggle Performer debugging

<a href="#" class="toggle-performer-debug">Toggle Performer debugging</a>