WWW… Wednesday! Hoverify

When it comes to front-end web development, and especially for research, there are many different elements to explore. There are many great browser extensions that can aid in your process but they’re usually task-specific, leaving you with a large collection and a crowded browser. Because these tools are often-times free, you might find one you like, only for it to lose support in future updates because the developer had no incentive to keep it current.

Hoverify is the Swiss Army knife of browser extensions. It offers all of the things you need or could possibly ever want to know as a web developer. It’s productivity-focused, with a great deal of its speed owed to its ingenious UI. By simplifying hovering over elements on a page, you gain access to the underlying HTML & CSS, making analysis lightning-fast.

If you’re looking for a color palette, you can select colors directly from any element or image on the page right down to the pixel using the eyedropper. If you decide it’s the image itself you’re after, you can download a page’s assets in full—Hoverify collects all of the images, SVGs, and videos it can find.

To visualize the structure and organization of the site, you can overlay guidelines and tap into its underlying grid. If you’re collecting images for reference, open up the site’s various pages in different tabs and take screenshots of each all at once. Hoverify allows you to perform screengrabs of singular windows or every tab simultaneously. You can also quickly test a site’s responsiveness by doing side-by-side comparisons across several different screen sizes at once.

For a bigger picture view, a quick drop-down menu offers insights into what technologies a site is built on. To put your findings into practice, Hoverify collects all styles into a neat, compact package with syntax highlighting, making them easier to digest and analyze. You can easily view structures and how each style relates to its respective selectors.

Additionally, you can inspect all types of elements including media queries, animations, pseudo-elements, and classes. Styles can be edited live, copied, and exported to Codepen for further experimentation in projects of your own. The ability to hide and remove select elements makes debugging your page a much simpler process, and elements can be searched by tag, id, or class to find exactly what you’re looking for and solve problems fast.

Hoverify costs $30 which gets you a license for 3 separate browsers and all future updates. If you would like to learn more or try it out for yourself, you can find it here.