Inspect Your Elements Easily Using Hoverify
Hoverify is a browser extension that makes inspecting elements as simple as hovering over them. Hoverify is the product of a slew of features crammed into one package to make web building a breeze. Hover over any element to see its styles and HTML properties, change CSS, HTML, or content in real time, pick colors, and capture images, among other things.
With Hoverify you can:
- Hovering over an element allows you to inspect CSS and HTML.
- Selector mode allows you to see styles based on selections.
- Simply press the spacebar or the letter ‘c’ to copy a style.
- In computed mode, live edit CSS.
- HTML attributes can be edited in real time.
- Examine the results of media queries and animations.
- Edit the elements’ content.
- Toggles element visibility or removes an element from the page.
- Search for elements quickly using tags, classes, and id.
- Colors can be chosen from any element on the screen, including images and iframes.
- With a single click, take a screenshot of the current tab or all tabs.
What are the Features Inside of It?
Hover over HTML and CSS components to inspect them. Hoverify makes inspecting elements Radically simple by hovering over them.
All element styles have been collected into a single view.
Styles are divided into groups based on their selections.
Media Queries & Animations
All styles from media queries and keyframe animations are extracted.
Pseudo Element & Classes
Examine the element and the pseudo element (hover, focus, etc). (:after, :before, etc).
Live Edit Styles
All styles, including media queries and animations, can be edited in real time.
To duplicate the element’s styles, press the spacebar.
Export to Codepen
Easily export the entire component, including its descendants, to Codepen.
Extracts the font used in an element and searches Google Fonts for it.
An element’s vertical and horizontal alignment should be checked.
To figure out the page structure, draw an outline around each piece.
For easier reading, all of the styles have syntax highlights.
Edit element content to see how different copy looks on your page.
By eliminating elements from the page structure, you may easily debug it. If you like, you can keep the changes!
Tag name, id, or classes can all be used to locate an element. Even if you’re using CSS selectors.
Custom CSS & JS
Visually inspect the color palette of the entire site.
Find out what typeface each tag uses.
When the page is reloaded, it conveniently restarts.
Colors can be chosen from anywhere on the website, including images and iframes.
With only one click, you may find out what technologies a website employs.
Any website can be seen on multiple screen sizes side by side.
Any click, scroll, or navigation you do on one device will be mirrored in real time across all devices.
As you please, create new custom device profiles and rearrange devices to suit your preferences.
Is Hot-Reloading possible on your development server? Then so do we! For each save, hot-reload all devices in real-time.
Get photos, SVGS, and videos from a page quickly.
Take a screenshot of every tab’s page at the same time.
How Much Does It Cost?
Hoverify is simply $7 for a one-time fee.
How to Use Hoverify?
To learn how to use Hoverify you can watch the video down below!
Inspector, Color Eyedropper, Built With, Responsive, Assets, and Screenshot are six fascinating features of Hoverify, a browser extension that makes it very easy to inspect by simply hovering over the element.
- Browser Extension