Everyone or almost everyone knows the tools of the different browsers that allow us to inspect elements of any website. In the case of Google Chrome, for example, just right-click and click Inspect in the menu. It’s an easy and simple way to see what’s behind it.
However, these utilities are for many somewhat archaic. They haven’t evolved at the same time as other browser options have evolved for the majority of users, and not so much for those closest to development. Therefore, the margin for improvement that they have is evident.
And the example of this are alternatives, in this case when it comes to visualizing the styles of a web page, such as CSS Scan.
“Don’t ever open DevTools again to check the styles”.
Perhaps the first thing that needs to be said is that CSS Scan is fee-based. It usually costs $24.99, although occasionally it can be found at a promotional price of $14.99. But, given your options and ease of use, your purchase is justified if it solves our life in terms of style inspection.
Its creators, in fact, rely so much on its tool that they are clear on its website: “Don’t ever open DevTools again to check the styles.
One of the goals of CSS Scan is to make you waste less time inspecting styles.
CSS Scan uses the same technology used by Google and Github with, according to those responsible, “improvements to quickly clean up any CSS garbage”. It is designed to go to the important and avoid wasting time trying to understand why a style sheet is not delivering the expected result. You use the cursor, take it to the problematic element, and you’ll get the answer to the code that’s defining it.
CSS Scan also makes it clear that besides inspecting, it allows you to copy the CSS code. All you have to do is pass the cursor and click. So it is copied to the clipboard and can be copied anywhere else for the purpose you want. The tool is available in Google Chrome extension and Firefox add-on. The payment of $24.99 offers lifetime utility.