Hoverify 3.0.29

Tag name of Highlighted Element

Since you don't see inspector window in Edit mode, Search mode and Hide/Remove mode, It is harder know what element is selected. Therefore I added small tag name badge to the element highlighter.

marker_gif.gif

Automatically open active website in Responsive

No more get annoyed by typing URL in Responsive mode when you open it from a website.

responsive_gif.gif

Inject CSS to IFrames (BETA)

Hoverify injects itself to all the frames in the website. Although you will see multiple toolbars (one for each Frame). This will be fixed in future updates and you will only have one toolbar to control all the frames.

inspector_gif.gif

@import Rule Support

Now Hoverify supports CSS files imported through @import.

Hoverify 3.0.28

Re-wrote Inspector

Inspector mode got big update in this release. Re-writing was mainly focused on providing better support for Visual Editor which will be added later this month. This update also brought better support for pseudo classes, pseudo element, animations and media queries. And did I mentioned that you can also edit them!

edit_gif.gif

Export to Codepen

When you export to Codepen, Now html of children as well of there styling is also exported.

codepen_gif.gif

Device Name

As Hoverify is getting many users lately it can be difficult to manage your activations across all you licenses. So now you can provide a Device name which can used later for identification in the license manager. You can provide device manager either from the settings or the license manager. Hoverify will also ask for Device name at the time activation.

Hoverify 3.0.24

Re-wrote Responsive

Responsive mode had lot of issues. The biggest one being include of external file. So I re-wrote the whole mode and fixed a ton of issues. Now you don't need to include any external files to your project. it will now automatically sync scrolling and click events.

responsive.gif

Save all assets

Easily download all the assets from the page with only one click.

Capture.PNG

Hide Features from Menu

Since Hoverify is getting so many features added. The menu is getting bloated and It can get hard to find features that you use. So now you can go to settings and hide features that you don't want in the menu. You can easily enable them back.

settings.gif

Bug smashing

Bunch of bugs in inspector were fixed.

Hoverify 3.0.20

New Feature - Responsive

This update brings your new feature "Responsive" (BETA). Responsive helps you to open site in multiple device sizes. Gone days when you would drag browser window to test responsiveness of your site.

The advantage of Responsive over your browser responsive mode is that it can open multiple devices at once rather than one at a time.

Capture.PNG

Because of CORS you need to include a javascript file in your project to make it work properly.

Add this script tag in your <head>-

<script src="https://cdn.jsdelivr.net/gh/zicsus/hoverify-responsive/dist/hoverify.js" type="text/javascript"></script>

This file only takes effect when your page is opened in iframe and does not effect performance of your page. Although it is recommended to avoid this include in production if you dont want to use "Responsive" on deployed site.

If you have any question or want to report a bug, please email at tryhoverify@gmail.com or shoot me DM at @hov3rify.

Hoveirfy 3.0.1

Hoverify 3 is here 😍

You have to re-activate for this update

Re-wrote the whole extension

After the initial release of Hoverify I released that it had some serious issues in its core working. So I buckled up and re-wrote the whole extension making it more stable and flexible to changes.

New UI

UI got some major changes to make it more easy to navigate.

Inspector

Export to Codepen

Press Codepen icon in the docked inspector window to open html and css in Codepen.

DOM Traversing

Use arrow keys to traverse through DOM.

  • Arrow Up - Move to parent element.
  • Arrow Down - Move to child element.
  • Arrow Left - Move to previous sibiling element.
  • Arrow Right - Move to next sibiling element.

Hot reload

Hoverify now support hot reload and automatically starts itself when page is reloaded or redirected. This is by default on and can be easily switched off in settings.

New color eyedropper window

Color eyedropper got a whole new popup window where you can you see recent and saved colors.

Built with

Ever wondered what technologies a particular site uses, with "Built with" you know that by just going into menu and open "Built with".

Assets

Easily fetch images, svg and videos for the page by going into assets tool. You can easily download assets and can even copy svg.

New shortcuts

Tools

  • CTRL/CMD+SHIFT+1 - Toggle inspector.
  • CTRL/CMD+SHIFT+2 - Toggle color eyedropper.
  • CTRL/CMD+SHIFT+3 - Take screenshot.
  • CTRL/CMD+SHIFT+4 - Take screenshot every tab.

Inspector

  • I - Toggle inspector playback.
  • V - Change style mode.
  • SPACE - Dock inspector window
  • G - Toggle guidelines.
  • F - Toggle grids.
  • E - Toggle edit tool.
  • T - Toggle trash tool.
  • S - Toggle search tool.

Hoverify 2.5.4

Activate license in two browsers

Now you can activate one license in two browsers. Because of this current users may have to reactivate there license. You can manage your license here

Fixed color picker zoom issue

Color picker now adapts to browsers zoom and take screenshots on proper events.

Hoverify 2.5.2

Search elements by class, id or tag name

New search feature let's you search elements by class names, id or tag name. Search option can be easily accessed through toolbar.

New shortcuts

  • p - Toggle inspector playback.
  • d - Dock window in inspector or color eyedropper.
  • SPACE or c - Copy styles in inspector mode and copy hex color in color eyedropper.

Improved color palette calculation

Color palette is now more accurate and does not show duplicate colors. Now pressing on colors in palette copy hex color or rgba value if alpha is present.

Reload page

When page is reloaded, Hoverify is now properly toggled.

Hoverify 2.5

More options in context menu

I have made it simple to access color eyedropper and screenshot option by adding them to context menu. So now you can toggle color eyedropper and take screenshots right from context menu

Control changes in Inspector

Now you have to press 'Mouse 1' to dock inspector window and 'space' to copy styles instead of 'space' to dock and 'c' to copy. If want to get default site behavior on left click than you press alt with it.

Hide or Remove elements from page

This feature let's you hide and remove elements from page easily by just clicking on them. You can also revert all the changes and get removed/hidden elements back.

Download images from docked inspector window

If the docked window element is an img or video tag than you will be able to download respective resource from inspector window.

Commands

Some new commands have been added to make Hoverify more accessible-

  • ALT + SHIFT + H - Toggle inspector.
  • ALT + SHIFT + J - Toggle color eyedropper.
  • ALT + SHIFT + K - Take screenshot of current tab.
  • ALT + SHIFT + L - Take screenshot of every tab.

Hoverify 2.3

1) Press esc to exit Inspector and Color eyedropper.

2) Add hoverify to context menu.

Hoverify 2.2

1) Copy styles right from the docked inspect window.

2) Tones of bugs squashed!