A Suite Of Tools To Enhance Your Web Development Experience And Boost Your Productivity!
Hoverify brings a bunch of tools useful for website developers in one package. This not only helps you remove all the clutter from the various extensions added to the browser but also helps you lower the expenses from various paid extensions.
Hoverify is an all-in-one web browser extension that provides tools you need to beat daily web development challenges as faster and more efficiently. Tools like inspector, color eyedropper, responsive, built-in assets and screenshots help web developers overcome daily challenges and become more productive.
Hoverify, A browser extension that makes it super easy to inspect by just hovering over the element. If you are anything like me then you would often find yourself scrolling through the inspect window. Which gets worse with page size. So 6 months and an infinite cup of coffee later, Hoverify is the result with a bunch of features jammed together to make your web design a smooth experience.
Hoverify is a suite of tools to enhance your web development experience and boost your productivity. Made to improve and ease your daily development experience.
What are the suite of tools that you can use in Hoverify?
Inspector – Inspect HTML and CSS by just hovering over the element.
Built With – Know what technologies a site uses with one click.
Assets – Extract images, SVGs, and videos from the page and download them.
Computed View – All element styles compiled to show in a compact view.
Selector View – Styles are separated according to their proper selectors.
Media Queries & Animations – Extracts all the styles from media queries and keyframe animations.
Screenshots – Take a screenshot of the page or capture a screenshot of all the tabs at once.
Pseudo Element & Classes – Inspect pseudo element (:hover, :focus, etc) & element (:after, :before, etc).
Live Edit Styles – Live edit all the styles, even media queries and animations.
Copy Styles – Press spacebar to copy styles of the element.
Color Eyedroppper – Pick colors from anywhere on the page, even from images and iframes.
Export to Codepen – Easily export whole component with children element to codepen.
Google Fonts – Extracts & search font used in a element on Google Fonts.
Responsive Mode – Preview all target screens or any site in a single window (multiple screens) side-by-side. Preview any site on multiple screen sizes side-by-side. It brings down your development time!
Guidelines – Check vertical and horizontal alignment of a element.
Grids – Draw outline around every element to know page structure.
Syntax Highlighting – All the styles are syntax highlighted for better reading.
Edit Element – Check how different copy looks on your page by editing element content.
Hide/Remove Elements – Easily debug page structure by removing element. Changes can be persisted if you want!
Search Elements – Find element through tag name, id or classes. Even with css selectors.
Custom CSS & JS – Add custom CSS and Javascript to page automatically injected when you visit page next time.
Color Pallete – Inspect color pallete of whole site in a visual way.
Font Viewer – Know what font each tag is using.
Hot Reload – Conveniently restarts whenever page is reloaded.
