Bookmarklet “Markup Pollution Checker”

All men have secrets and here is mine so let it be known
For we have been through hell and high tide

The Smiths, “What Difference Does It Make?”

Did you ever find unwanted stuff in your programtically genrerated markup that you considered pollution and wanted to locate and erase? Here is a little helper for you.

TL;DR

You can find the Bookmarklet here.

Why a bookmarklet and what for?

The idea behind this bookmarklet came up to me, while I was working with React and other JavaScript frameworks that work as templating engines to generate markup. I regularly discovered polluted markup in my developer tools. Stuff, that didn’t belong there and was created falsly by the app.

For example, if you want to handle a component’s CSS class property by its parent component and it passes “null” or other JavaScript Primitives by mistake to the component which then somehow can render that as a string.

JSX Input

  <div cssClass={myCssClass}></div>

…that accidentially became

HTML Output

  <div class="null"></div>

It was very annoying for me to find that stuff in the markup and I came up with the idea to write a little bookmarklet to make findings of “polluted markup” easier.

Not that this “pollution” is too harmful. But at the end, it bloats the markup with unnecessary code. And what is really bad, is that you might have errors in your JavaScript source code that you can find with my bookmarklet in a much easier way.

What does it crawl for?

Currently the bookmarklet finds the following Javascript Primitives:

1. undefined
2. null
3. NaN

And it genreates a list of all the findings. But you can easily extend the Regex for the findings. Feel free!

Bookmarklet

To “install” the Bookmarklet, drag that link to the bookmark bar of your browser:

Markup Pollution Checker