When, in the course of human events, it becomes necessary to understand why your wordpress site’s freaking menus display fine when you’re logged in as administrator but are completely broken when you’re logged out, it may be useful to be able to easily compile all the CSS for the affected page elements for both the working and nonworking versions, and compare them to see what might be different.

Let me back up. I had a problem the other day where my WordPress site’s caching plugin, which performs various optimizations on my site’s code for non-logged-in users, was adding some sort of broken CSS. When I was logged in, everything worked fine, but when not logged in, something changed somewhere in the CSS that caused some of my menus not to display. I had a rough idea of where the changed code must be, but no more than that, and there were a lot of different HTML elements that the specific problem might have been occurring with. I needed to compare huge chunks of the CSS rules between the working and nonworking versions of the page to find the difference.

The browser console doesn’t make this easy, as you can only see the CSS for a single element at a time, and if you know there’s a problem somewhere in a whole tree of elements but you don’t know which one, trying to find the difference can be extremely tedious.

So, through scientific endeavor, I have managed to cook up a few functions that you can run in the browser console that will help.

The first is something I got mostly from a StackOverflow answer, which simply returns all the CSS in the page in a great big block of text. For smaller pages this may be practical.

For large pages, I have included two more functions, both of which return all the CSS for a selected parent HTML element and all its descendants: one returns all browser and inherited styles for those elements, the other returns only style rules explicitly defined for those elements in the CSS code or inline in the HTML.

For either, you first go into the developer tools Inspector and select the outermost parent element that you know contains the problem somewhere in it—for instance, this site’s menu items are built as <LI> tags, and sub-menus are enclosed within <UL> tags within those, so if one submenu isn’t displaying properly but I can see there’s at least *something* there like a border or a bit of the submenu background displaying, it’s a good bet that that submenu’s <UL> tag contains the problem, and that’s what you’d select in the browser’s Inspector in the developer tools. Then you’d go to the developer tools Console tab and paste the function version you want to use—to collect either just the explicitly defined CSS rules or all the CSS including inherited rules. Hit return, wait a few minutes while these functions trudge through your page code, and then enjoy an organized output of all relevant CSS rules which you can copy from the console and paste into a text editor to compare or process however you want.

The below are file includes from the original repo at https://github.com/kupietools/ff-js-console-CSS-tools. Geeky types can just go straight there if they want.

These functions are open source. Use them together. Use them in peace. (Except Europa. Attempt no landing.)