Debugging CSS doesn’t have to be a headache. With this simple bookmarklet, you can instantly outline all the elements on a webpage, giving you a clear visual guide to the structure and layout. It’s a quick, easy, and effective way to identify and fix CSS issues.
How to create the bookmarklet
Creating the bookmarklet is surprisingly easy. All you need is a single line of JavaScript code. Here’s how to do it:
1. Open Your Browser’s Bookmark Manager
In most browsers, you can do this by right-clicking the bookmarks bar and selecting “Add page” or “New bookmark.”
2. Add a New Bookmark
Give it a name like “Outline Elements” or “CSS Debugger.”
3. Paste the JavaScript Code
In the URL or location field, paste the following code:
javascript:if%20(!(%22is_debugging%22%20in%20window))%20%7B%0A%20%20is_debugging%20%3D%20false%3B%0A%20%20var%20debug_el%20%3D%20document.createElement(%22style%22)%3B%0A%20%20debug_el.append(%0A%20%20%20%20document.createTextNode(%0A%20%20%20%20%20%20%60*%3Anot(path)%3Anot(g)%20%7B%20%0A%20%20%20%20%20%20%20%20%20%20color%3A%20rgb(255%20255%20255)%20!important%3B%0A%20%20%20%20%20%20%20%20%20%20background%3A%20rgb(49%2095%20130%20%2F%2020%25)%20!important%3B%0A%20%20%20%20%20%20%20%20%20%20outline%3A%20dashed%201px%20rgb(255%20255%20255%20%2F%2050%25)%20!important%3B%0A%20%20%20%20%20%20%20%20%20%20box-shadow%3A%20none%20!important%3B%20%7D%60%0A%20%20%20%20)%0A%20%20)%3B%0A%7D%0Afunction%20enable_debugger()%20%7B%0A%20%20if%20(!is_debugging)%20%7B%0A%20%20%20%20document.head.appendChild(debug_el)%3B%0A%20%20%20%20is_debugging%20%3D%20true%3B%0A%20%20%7D%0A%7D%0A%0Afunction%20disable_debugger()%20%7B%0A%20%20if%20(is_debugging)%20%7B%0A%20%20%20%20document.head.removeChild(debug_el)%3B%0A%20%20%20%20is_debugging%20%3D%20false%3B%0A%20%20%7D%0A%7D%0A!is_debugging%20%3F%20enable_debugger()%20%3A%20disable_debugger()%3B%0A
4. Save the Bookmarklet
Click “Save” or “Done,” and you’re all set!
How to use
Now that you’ve created the bookmarklet, simply click the bookmarklet in your bookmarks bar, and voilà! All the elements on the page will be outlined in colorful borders.
With the elements outlined, you can now easily see the structure of the page. Look for any misaligned elements, unexpected gaps, or overlapping sections. This visual guide will help you pinpoint the source of any CSS issues.
Source
Below is the unencoded and unminified code that makes the magic happen:
if (!("is_debugging" in window)) {
is_debugging = false;
var debug_el = document.createElement("style");
debug_el.append(
document.createTextNode(
`*:not(path):not(g) {
color: rgb(255 255 255) !important;
background: rgb(49 95 130 / 20%) !important;
outline: dashed 1px rgb(255 255 255 / 50%) !important;
box-shadow: none !important; }`,
),
);
}
function enable_debugger() {
if (!is_debugging) {
document.head.appendChild(debug_el);
is_debugging = true;
}
}
function disable_debugger() {
if (is_debugging) {
document.head.removeChild(debug_el);
is_debugging = false;
}
}
!is_debugging ? enable_debugger() : disable_debugger();
References
The original code is from zaydek, with some modifications made by me. You can read about the thought process behind this bookmarklet from this article.
Source available on GitHub: github.com/schalkburger/css-outline-bookmarklet