CSS Spider

Modern browsers, Google Chrome included, offer a relatively straightforward way of inspecting and analyzing web pages.

Right-click - Inspect Element - this is something that web developers are all too familiar with, however, there's an even easier and faster way.

Meet CSS Spider, a modern and super-useful Google Chrome extension that provides a more intuitive, less annoying way of copying, visualizing, editing, and exporting CSS.

The first advantage is the fact that it's easier to access than the Dev Tools dashboard. It also works everywhere, on every website, and it even works offline, if you happen to find yourself in that situation.

Here's how it works: you install the extension from the Chrome Web Store, open the website you want to inspect, and click the extension's icon.

You should be able to inspect every single CSS element of the website without having to open the "inspect element" menu. Just hover the element in question using the mouse and inspect it via the black-themed pop-up messages.

Once you're done, you can either pause the spider using the menu from the upper right side of the webpage or close it altogether. Please note that you can also edit the CSS inline. Just press the space bar, click on the CSS code inside the pop-up message window, and change it.

You should be able to see the changes in real-time being applied to the designated HTML element.

To conclude, CSS Spider offers easy and fast inspection of CSS elements on any website. It allows you to copy and export any element you want, with nothing more than a few mouse clicks, and without having to use the default option of using the "Inspect Element" menu.