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?
Inspector
Hover over HTML and CSS components to inspect them. Hoverify makes inspecting elements Radically simple by hovering over them.
Computed View
All element styles have been collected into a single view.
Selector 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.
Copy Styles
To duplicate the element’s styles, press the spacebar.
Export to Codepen
Easily export the entire component, including its descendants, to Codepen.
Google Fonts
Extracts the font used in an element and searches Google Fonts for it.
Guidelines
An element’s vertical and horizontal alignment should be checked.
Grids
To figure out the page structure, draw an outline around each piece.
Syntax Highlighting
For easier reading, all of the styles have syntax highlights.
Edit Element
Edit element content to see how different copy looks on your page.
Hide/Remove Elements
By eliminating elements from the page structure, you may easily debug it. If you like, you can keep the changes!
Search Elements
Tag name, id, or classes can all be used to locate an element. Even if you’re using CSS selectors.
Custom CSS & JS
When you visit the page again, the custom CSS and Javascript will be immediately injected.
Color Palette
Visually inspect the color palette of the entire site.
Font Viewer
Find out what typeface each tag uses.
Hot Reload
When the page is reloaded, it conveniently restarts.
Color Eyedropper
Colors can be chosen from anywhere on the website, including images and iframes.
Built With
With only one click, you may find out what technologies a website employs.
Responsive
Any website can be seen on multiple screen sizes side by side.
Mirrored Interactions
Any click, scroll, or navigation you do on one device will be mirrored in real time across all devices.
Manage Devices
As you please, create new custom device profiles and rearrange devices to suit your preferences.
Hot-Reloading Supported
Is Hot-Reloading possible on your development server? Then so do we! For each save, hot-reload all devices in real-time.
Assets
Get photos, SVGS, and videos from a page quickly.
Screenshots
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!
Conclusion
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.
References
Explore Docs
Related Post
