CSS debug bookmarklet

To aid in CSS debugging in your browser. Outlines elements whose styles have selectors which include debug.

The script executed is largely identical to a script created by Patrick Brosset. Except as a bookmarklet.

Bookmarklet installation

Drag this link css.debug to your browser bookmark bar.

Debugging CSS

  1. Click the bookmarklet with the offending page open in your browser.

  2. Use dev tools to append debug to the selector of an existing style applied to the element of concern, e.g.

.troublesome-element { /* existing CSS */}

becomes:

.troublesome-element, debug { /* existing CSS */}

  1. Click somewhere in the page.

    Debug styles are generated and your troublesome element is visibly outlined in the page.

Note: the order of steps 1. and 2. is unimportant.

There are nifty options for customising the color and weight of the applied outline. Check out Patrick’s page for details: debug.css - The simple CSS debugging utility.