Gold Penguin Logo with Text

Hoverify Review: An Essential Browser Extension for Web Developers

Hoverify does an exceptional job at taking information from the “Inspect” tool and consolidating it into an all-in-one application that’s both user-friendly and extensive.
Updated October 7, 2023

A lot of experimenting comes with web development, like trying out different colors, fonts, and even elements.

It’s dissimilar to graphic design where you can simply drag and drop items, then easily remove them if they don’t fit. One erroneous line could rearrange an entire webpage.

That’s where Hoverify comes in.

Hoverify is several tools wrapped in one convenient package. It streamlines web development by allowing you to inspect elements, extract assets from a webpage, debug, view webpages on different screens, and play around with CSS attributes. 

Sounds amazing, right? No more digging around using Chrome’s Inspect Element tool.

Who is Hoverify made for?

Hoverify is an extension made by developers, for developers.

The extension’s primary audience is web developers looking for ways to simplify web development by allowing users to analyze and inconsequentially tweak webpages.

The Complete Package: Hoverify’s Key Features 

So you just purchased Hoverify. After installing it into your browser, you’ll notice seven items on its extension popup. These are the key features of Hoverify. Let’s discuss what each of them does.

Inspect

The Inspect option is similar to Chrome’s Inspect Element tool, but well-organized and sorted. It trims out the fat and gives you only the necessary information about an element. 

To use it, simply hover over an element and wait for a popup with the information you need, including its class information, tags, and CSS attributes. You can also lock this popup by clicking on the element. This allows you to copy elements or tweak them if you want to see what it looks like in different styles.

Color Eyedropper

This one’s pretty self-explanatory. Clicking the Eyedropper option replaces your cursor with a pointer. Now, hover anywhere on the page. Hoverify will give you the RGB and hex code of wherever your pointer is currently located.

Assets

Extracting images and videos from a webpage has never been easier thanks to Hoverify. Using Hoverify’s Assets feature, the extension provides a list of all images, videos, documents, SVGs, and even Lottie animations on a webpage.

From there, you can either download or copy them manually, or save all of them as a Zip file.

Responsive

User experience is crucial to web development and one of the most significant aspects of UX is creating responsive webpages. This means websites that can flawlessly adapt to any environment, especially smartphones. However, not all mobile phones have the same dimensions.

Hoverify provides a quick solution. Using their Responsive feature, you can view your website on different mobile phones and switch from portrait to landscape.

Debug

If you’ve ever tried to code, you know that errors are the bane of a programmer’s existence. It doesn’t matter if it’s simple or complex in hindsight, errors always take up time and can often reproduce other errors. That’s why Hoverify offers a Debug feature.

Fixing errors in web development could sometimes feel like Sisyphus and the boulder — repetitive and pointless — only to find out that there weren’t any errors in your code, it was cache and cookies. 

Fortunately, Hoverify allows you to clear all cache and cookies in one click. Not only that, you can also check if all links in your website are up and running, and do a basic spell check to ensure you don’t have any syntax errors.

Built With

If you ever wondered how a website is built, look no further than Hoverify’s Built With feature. This gives you its basic hosting information, tech stack, widgets, DNS information, and SSL certificates.

Capture

Lastly, you can also get a quick screenshot of a webpage with Hoverify’s Capture feature. You can choose to screenshot the entire page, select an area to screenshot, capture only the visible part, or get a screenshot of all your open tabs.

Pricing

Unfortunately, Hoverify doesn’t offer a free trial of the extension.

Hoverify currently costs $30 per year which includes use on three separate browsers. You can also get a refund within the 14 days if you're not happy with your purchase.

Hoverify Pros and Cons

PROS

CONS

  • Packed with useful features

  • Allows live editing of elements

  • Developer provides a clear roadmap for development

  • No free version

  • You're paying for convience, not functionality (you can do all of this with Chrome DevTools)

Hoverify vs. The Competition

As I mentioned before, Hoverify is several applications wrapped in one, which means that Hoverify doesn’t have a direct competitor just yet. There are no applications out there that offer the same features as Hoverify. However, there are popular extensions that offer some of Hoverify’s features.

CSS Viewer

CSS Viewer is an old but reliable CSS properties inspector developed way back in 2006 as a Firefox extension. It survives today because of its simplicity and ease of use. Need to see the CSS attributes of an element? You have it in seconds.

Besides lacking its other features, the biggest thing that separates Hoverify from CSS Viewer is live editing. In hindsight, you can look at Hoverify as the natural evolution of old applications such as CSS Viewer. Besides being free, there’s virtually no reason why you should get this app over Hoverify.

ColorZilla

The colors you choose for a website play a huge part in its overall aesthetics. It must look good without sacrificing any functionalities. A quick way of picking colors is to borrow from a website you want to emulate. 

ColorZilla is a complete color-related extension for web developers. It can complete more color-related tasks than Hoverify. Features in ColorZilla include a gradient generator, color picker, and palette viewer.

Final Verdict

Hoverify promises and delivers.

It's a rare product where there’s virtually no drawback except for the price and, even then, I’d argue that $30 a year is a fair price for something that provides this much value.

If there’s anything I’d change about the product, I wish it offered a free version so everyone could give it a try.

Product skepticism is healthy. As a programmer myself, there are only a handful of software I trust — but I'd recommend testing out Hoverify.

Want To Learn Even More?
If you enjoyed this article, subscribe to our free monthly newsletter
where we share tips & tricks on how to use tech & AI to grow and optimize your business, career, and life.
Written by John Angelo Yap
Hi, I'm Angelo. I'm currently an undergraduate student studying Software Engineering. Now, you might be wondering, what is a computer science student doing writing for Gold Penguin? I took up studying computer science because it was practical and because I was good at it. But, if I had the chance, I'd be writing for a career. Building worlds and adjectivizing nouns for no other reason other than they sound good. And that's why I'm here.
Subscribe
Notify of
guest

0 Comments
Inline Feedbacks
View all comments
Join Our Newsletter!
If you enjoyed this article, subscribe to our newsletter where we share tips & tricks on how to make use of some incredible AI tools that you can use to grow and optimize a business
magnifiercross