service-salesservice-seoservice-wordpressschalkfolderemailclockquotesearchcheckmarkarrow-rightarrow-leftfacebooktwittergithublinkedinshare

5 Bookmarklets for debugging CSS


Bookmarklets are an essential  part of my toolkit when it comes to quickly performing common web page tasks in my daily web development process.

A bookmarklet is a “small software application stored as a bookmark in a web browser, which typically allows a user to interact with the currently loaded web page in some way”.

To add a bookmarklet from this list to your browser, simply create a new bookmark (On Chrome this would be Add Page) on your browser and paste the resulting JS into the URL part of the bookmark. You can then run a bookmark by opening the link/bookmarklet from your browser bookmarks.

Here are 5 bookmarklets that I use to debug either CSS I’ve written, or to investigate how someone else might have implemented something.

Toggle CSS

This bookmarklet allows you to toggle the CSS of a page on and off. Helpful to see what your page looks like with any styles applied.

Edit Website

This bookmarklet sets contenteditable attribute to true for the whole website, allowing you to edit any text content on the page. Helpful to check edge cases of long text in your website for example.

Find Unintended Body Overflow

Accidental horizontal scrollbar on your website? This bookmarklet allows you to see which offending elements are causing any overflow on your website, not just visually, but also noting the elements in your browsers console.

SVG Crowbar

This bookmarklet extracts SVG nodes and accompanying styles from an HTML document and downloads them as an SVG. Very handy for downloading any SVG icons that might be present on a page.

debugCSS

debugCSS is an HTML debugging tool built with CSS. It is meant to be loaded on an existing page to highlight potentially broken, malformed or legacy (X)HTML.

About Schalk Burger

Schalk Burger is a Cape Town web designer and WordPress developer.

Read more →

Post a comment


*