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

Latest Version

Version
3.0.2
Update
September 25, 2023
Size
122KiB
Developer
Category
Users
9,000+
Rating
4.75862 ★
Manifest Version
3
Web Store Status
Languages Support
English
See more
Permissions
ActiveTab
Background
Scripting
Storage
See more

Hover inspector like in Zeplin , Figma Extension

Extension behavior closed like in Zeplin, Figma.

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
Read more

Source Manifest.json

{ "name": "Hover inspector like in Zeplin , Figma", "short_name": "Inspector", "description": "Inspector is the tool which mimic display dimension between selected and hover element. It would be good for designers, QA", "version": "3.0.2", "manifest_version": 3, "update_url": "https://clients2.google.com/service/update2/crx", "author": "Liubomyr Kozak", "icons": { "16": "images/new_logo2/zTool-16.png", "32": "images/new_logo2/zTool-32.png", "48": "images/new_logo2/zTool-64-active.png", "128": "images/new_logo2/zTool-128-active.png" }, "background": { "service_worker": "./browser_action_script.bundle.js" }, "action": { "default_icon": { "16": "images/new_logo2/zTool-16.png", "32": "images/new_logo2/zTool-32.png" }, "default_title": "Inspector [3.0.2]" }, "host_permissions": [ "*://*/*" ], "permissions": [ "activeTab", "background", "scripting", "storage" ]}
Read more

Similar Extensions

icon

Measuremate Extension · Developer Tools 9,000+ 42 ★ 797KiB

icon

HTML to Figma - by Builder.io Extension · Productivity 9,000+ 46 ★ 343KiB

icon

Responsive Viewer Extension · Developer Tools 9,000+ 298 ★ 639KiB

icon

Heurio - One-Click Bug Report & UX Check Tool Extension · Developer Tools 9,000+ 76 ★ 5.86MiB

icon

Dimensions Extension · Developer Tools 9,000+ 454 ★ 17.28KiB

icon

Hoverify Extension · Developer Tools 9,000+ 145 ★ 14.54MiB

icon

Measure Everything Extension · Developer Tools 9,000+ 40 ★ 52.93KiB

icon

Better Ruler Extension · Developer Tools 9,000+ 52 ★ 93.66KiB

icon

Tape Extension · Developer Tools 9,000+ 155 ★ 12.68KiB

icon

SnapGuide Extension · Developer Tools 9,000+ 14 ★ 194KiB

icon

VisBug Extension · Developer Tools 9,000+ 252 ★ 5.38MiB

icon

CSS Inspector Extension · Developer Tools 9,000+ 64 ★ 2.57MiB

icon

CSS Peeper Extension · Developer Tools 9,000+ 363 ★ 279KiB

icon

Fonts Ninja Extension · Productivity 9,000+ 696 ★ 1.72MiB

icon

WCAG Color contrast checker Extension · Developer Tools 9,000+ 26 ★ 163KiB

icon

Grid Ruler Extension · Developer Tools 9,000+ 335 ★ 288KiB

icon

Site Palette Extension · Developer Tools 9,000+ 344 ★ 297KiB

icon

html.to.design Extension · Productivity 9,000+ 72 ★ 333KiB

icon

Jinno: code any React component with AI Extension · Developer Tools 9,000+ 38 ★ 18.37MiB

icon

SVG Gobbler Extension · Developer Tools 9,000+ 95 ★ 1.18MiB

icon

CSSViewer Extension · Developer Tools 9,000+ 371 ★ 301KiB

icon

Figma Extension · Productivity 9,000+ 27 ★ 1.36MiB

icon

Designer Tools Extension · Developer Tools 9,000+ 227 ★ 987KiB

icon

Dimensions Inspect | Gridman Extension · Developer Tools 9,000+ 87 ★ 816KiB

User reviews

icon

Divya pratap singh Shekhawat (ID: 00000077a9e9ac36) Voted 5 ★ - Updated 03/15/2023 it does what you expect it to do, simple and powerful

icon

Stefan Hermann (ID: 0000005ff08ae4cf) Voted 5 ★ - Updated 01/18/2023 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

icon

Faycal BESSAH (ID: 00000019ed695873) Voted 1 ★ - Updated 12/05/2022 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)

icon

Sandra R (ID: 000000c5734fdeaa) Voted 3 ★ - Updated 10/16/2022 I don't understand how to use it????

icon

Gilbert Temgoua (ID: 000000bd0e6aea38) Voted 5 ★ - Updated 07/02/2022 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