Hover inspector like in Zeplin , Figma

How to install an extension Open in Chrome Web Store

CRX ID

jbhnejndccdjigppalbbiphlbaaehpln

Status

Extension status: Featured

Description from extension meta

Inspector is the tool which mimic display dimension between selected and hover element. It would be good for designers, QA

Image from store

Description from store

version 3.1.1
- fix bugs,
- - fix esc key press behavior
- - fix formation css rule
- - fix popup display position
- add hovered element

version 3.1.0
- update UI
- add new features
- prepare project to new features

version 3.0.2
- fix bug: prevent click(thanks Marcelo Alejandro)
- add background rule permission for save setting

version 3.0.1
- fix bug: extension dropped (thanks @invisioN7)

version 3.0.0
- refactor core(prepare for the new features)
- add sidebar (setting, more details of selected element)
- add freezing selected element after 2 click
- press 'space' for unfreeze selected element
- add link to discord
- add uninstall form
- fixed calculation position of popup

version 2.0.0
- used ReactJS (expected simplifying of maintain and support)
- add data: padding, margin, font, color, background, line-height, class, id
- fixed calculation position of popup

version 1.1.0
- add highline padding(green color) and margin(orange color).
- fix bugs

version 1.0.5.1
- minify file for more faster loading

version 1.0.5
- add top bar with styles(padding, margin, font-size, height, width) for hover and selected element
- fixed bugs (when user scroll label and lines position not display correctly)
- add change style for label which display height and width hovered element
- change active and regular icon:
- add 2 hotkeys:
-- command + enter / ctrl + enter - for hide/show topbar
-- esc for close extension

version 1.0.4
- add functionality when start scroll
- change color of labels
- add dimension calculating when selected located in hovered element

version 1.0.3
- add dimension calculating when hovered located outside selected element

Latest reviews

Hasan Solak 2025-01-16: Perfect
Flávio Dev 2024-02-07: Hi! I loved this extension, thank you so much! I found a bug when you navigate across some tabs. Do you have a github, page so I can give you more info about it?
Daryl 2024-01-25: Extension is a great addition, only downside is I cannot turn it off once switched on. Icon is blue and on click turns yellow (on hover information is shown as expected) and on click (for which Id had hoped would turn it off, it turns yellow) but it remains switched on. Would be good to have a key combonation you can set on the extension to turn it off, or just the ability to turn it off rather than having to refresh the page.... Other than that, it does the job well - Thanks! Chrome Version: 120.0.6099.225 (Official Build) (64-bit) Inspector Version: 3.0.2 Thanks
Divya pratap singh Shekhawat 2023-03-15: it does what you expect it to do, simple and powerful
Divya pratap singh Shekhawat 2023-03-15: it does what you expect it to do, simple and powerful
Stefan Hermann 2023-01-18: This is a fantastic tool! Thank you so much for providing it! Is is super useful <3 I just could not find the manual, so I figured it out myself: 1. Install the Add-on 2. Activate: – go to any webpage, activate the plugin by clicking on the icon in the add-on-bar (Icon will turn yellow) – refresh the website you want to inspect 3. Use – hover over the elements to see the properties – click on the elements to get the measurements 4. Deactivate: – turn the addon off by clicking the icon in the add-on-bar again (Icon will turn grey) – refresh the webpage
Stefan Hermann 2023-01-18: This is a fantastic tool! Thank you so much for providing it! Is is super useful <3 I just could not find the manual, so I figured it out myself: 1. Install the Add-on 2. Activate: – go to any webpage, activate the plugin by clicking on the icon in the add-on-bar (Icon will turn yellow) – refresh the website you want to inspect 3. Use – hover over the elements to see the properties – click on the elements to get the measurements 4. Deactivate: – turn the addon off by clicking the icon in the add-on-bar again (Icon will turn grey) – refresh the webpage
Faycal BESSAH 2022-12-05: I haven't tried this plugin cause I dont know how to do so there is no explanation, no manual, no documentation and the website of the editor isn't working I remove from chrome (until get some info)
Faycal BESSAH 2022-12-05: I haven't tried this plugin cause I dont know how to do so there is no explanation, no manual, no documentation and the website of the editor isn't working I remove from chrome (until get some info)
Sandra R 2022-10-16: I don't understand how to use it????
Sandra R 2022-10-16: I don't understand how to use it????
Gilbert Temgoua 2022-07-02: I've been looking for "a tool" like this and I've finally found "the tool". It goes beyond my expectations Thank you so much
Gilbert Temgoua 2022-07-02: I've been looking for "a tool" like this and I've finally found "the tool". It goes beyond my expectations Thank you so much
Serhan Coşkun 2022-05-04: It's definitely an underrated tool. Thank you for this 👍
Serhan Coşkun 2022-05-04: It's definitely an underrated tool. Thank you for this 👍
Juan Alvarez 2021-12-11: Thank you soooo much! Seriously :)
Juan Alvarez 2021-12-11: Thank you soooo much! Seriously :)
Kristina Oreshkovska 2021-09-28: I tried couple of options on the market but only this tool offered what I was looking for. Great!
Kristina Oreshkovska 2021-09-28: I tried couple of options on the market but only this tool offered what I was looking for. Great!
mahek dave 2021-09-11: Amazing...😍
mahek dave 2021-09-11: Amazing...😍
m. matti 2021-06-09: Extremely useful for designers, especially after version 2.0 added padding, margin, font, color, etc. It feels like Chrome's Inspector / DevTools window is overkill ~80% of the time, when all I really want is a quick screenshot to highlight basic element styling. This extension hits that sweet spot. Would be nice to have a few more style definitions. Border width and color, for example, really ought to be included.
m. matti 2021-06-09: Extremely useful for designers, especially after version 2.0 added padding, margin, font, color, etc. It feels like Chrome's Inspector / DevTools window is overkill ~80% of the time, when all I really want is a quick screenshot to highlight basic element styling. This extension hits that sweet spot. Would be nice to have a few more style definitions. Border width and color, for example, really ought to be included.
仔仔 2020-12-08: 很棒，谢谢
Zhan Arno 2020-07-22: Спасибо большое. Хорошое приложение которое упрощает работу)).
Kim Slava 2020-03-17: Отличное приложение для начинающих тестировщиков(я-начинающий)
Lucas Ferreira 2020-01-25: Sensacional!!!
Iaroslav Proskurnia 2019-12-13: Great App. Very useful to test projects.
Iaroslav Proskurnia 2019-12-13: Great App. Very useful to test projects.
Oleksandr Kuksenko 2019-11-11: Great plugin. Thanks!
Oleksandr Kuksenko 2019-11-11: Great plugin. Thanks!
Anonymous 2019-02-20: this is so great! I am PM but sometimes I also check mark-up and it helps me a lot! thank you!
Anonymous 2019-02-20: this is so great! I am PM but sometimes I also check mark-up and it helps me a lot! thank you!
Богдан Писаренко 2019-02-20: Very helpful tool! Thanks!
Богдан Писаренко 2019-02-20: Very helpful tool! Thanks!
Ivan Berezhnov 2019-02-19: Great plugin for check sizes in web page. It save my time. Thanks
Ivan Berezhnov 2019-02-19: Great plugin for check sizes in web page. It save my time. Thanks
Anonymous 2019-02-19: Exactly what I was searching for. I'm using a lot at my Pull Requests review.
Nguyen Duc Tien Anh 2018-10-12: Exactly what I am looking for. It's super convenient for inspecting specs of every element. Thanks the author a lot.
Tien Anh 2018-10-12: Exactly what I am looking for. It's super convenient for inspecting specs of every element. Thanks the author a lot.

Extension Actions