Swiss army knife for front-end developers

Latest Version

Version
2.3.3
Update
August 2, 2024
Size
816KiB
Developer
fenvox.com
Category
Users
10,000+
Rating
4.01149 ★
Manifest Version
3
Web Store Status
Languages Support
Bahasa Indonesia
Bahasa Melayu
Deutsch
English
English (UK)
English (United States)
Filipino
Français
Kiswahili
Nederlands
Norsk
Tiếng Việt
Türkçe
Català
Dansk
Eesti
Español
Español (Latinoamérica)
Hrvatski
Italiano
Latviešu
Lietuvių
Magyar
Polski
Português (Brasil)
Português (Portugal)
Română
Slovenský
Slovenščina
Suomi
Svenska
čeština
Ελληνικά
Српски
български
русский
українська
עברית
فارسی‎
मराठी
हिन्दी
বাংলা
ગુજરાતી
தமிழ்
తెలుగు
ಕನ್ನಡ
മലയാളം
ไทย
አማርኛ
‫العربية
中文 (简体)
中文 (繁體)
日本語
한국어
See more
Permissions
ActiveTab
ContextMenus
Storage
See more

Dimensions Inspect | Gridman Extension

Gridman is the must-have Chrome extension for every front-end developer. This toolkit is crafted to boost your productivity and enhance your coding experience.

DOM INSPECTION
Instantly inspect DOM elements. Just hover to reveal details of the target and its parent elements, simplifying your analysis and debugging process.

PERSISTENT
Gridman uniquely persists between host reloads. Click on an element, and maintain your insights even after a page refresh, saving you valuable time and effort.

TAILWIND
Tailwind developers, rejoice! Easily inspect class sets and see how Tailwind CSS is bringing your designs to life.

LAYOUTS
Whether you're working with CSS Grid or Flexbox, Gridman displays rows, columns, paddings, margins, and more. Understand and manipulate complex layouts with ease.

ANYWHERE
Simply click the extension icon to activate this toolkit on any webpage.

HOVER
Unveil the intricacies of the DOM structure with a mere mouse hover. Visualize and understand how elements are nested and related.

JOIN
With Gridman you're not just using a tool; you're upgrading your entire development process. Download now and experience a revolution in your front-end development journey!

REVIEW
Your experience with Gridman matters to me deeply. If you've found it helpful, I'd be incredibly grateful if you could take a moment to share your thoughts in a review. Your feedback not only helps to improve but also assists fellow developers in discovering the benefits of this extension. Thank you for your support and for being a vital part of Gridman supporters!

NOT WORKING
If something didn't work as expected, I kindly request that you consider reaching out with any questions or issues you might have. I understand that each review, whether positive or negative, offers me an opportunity to learn and improve. However, I also believe in the importance of understanding and resolving any issues through communication. Please feel free to ask me anything at: https://fenvox.com/gridman#ask-section. I'm always here to assist you!

LOCAL FILES
You are trying it towards local file like 'file:///...' - but nothing shows up?
> ANSWER: Gridman , like any chrome extension, will not work on local files. Chrome is not allowing it due to security reasons. And it is correct. You can imagine implications if any chrome extension would be able to access file system on your computer.
To use Gridman on local files i'd recommend a tiny http-server which you can get here https://www.npmjs.com/package/http-server
Read more

Source Manifest.json

{
"update_url": "https://clients2.google.com/service/update2/crx",
"name":"__MSG_name__",
"description":"__MSG_description__",
"version":"2.3.3",
"manifest_version":3,
"homepage_url":"https://fenvox.com/gridman",
"default_locale":"en",
"icons":{"16":"icon/icon-gridman-16.png",
"32":"icon/icon-gridman-32.png",
"48":"icon/icon-gridman-48.png",
"96":"icon/icon-gridman-96.png",
"128":"icon/icon-gridman-128.png"},
"action":{"default_title":"Start Gridman"},
"content_scripts":[{"matches":["http://*/*",
"https://*/*"],
"exclude_matches":["*://*.youtube.com/*",
"*://*.youtu.be/*"],
"js":["src/inject/main.js"]}],
"permissions":["activeTab",
"contextMenus",
"storage"],
"web_accessible_resources":[{"resources":["/fonts/*",
"/icon/*"],
"matches":["http://*/*",
"https://*/*"]}],
"background":{"service_worker":"src/service-workers/index.js",
"type":"module"}}
Read more

Similar Extensions

icon

CSS Grid Overlay Extension · Developer Tools 10,000+ 7 ★ 181KiB

icon

Outliner CSS Extension · Developer Tools 10,000+ 11 ★ 13.01KiB

icon

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

icon

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

icon

Foundation Overlay Extension · Developer Tools 10,000+ 12 ★ 9.14KiB

icon

Grid Builder Extension · Developer Tools 10,000+ 11 ★ 43.28KiB

icon

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

icon

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

icon

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

icon

Amino: Live CSS Editor Extension · Developer Tools 10,000+ 453 ★ 1.45MiB

icon

Grid System Extension · Developer Tools 10,000+ 7 ★ 938KiB

icon

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

icon

CSS Scan Extension · Developer Tools 10,000+ 84 ★ 1.41MiB

icon

Bootstrap Grid for any Website Extension · Developer Tools 10,000+ 7 ★ 42.21KiB

icon

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

icon

Live editor for CSS, Less & Sass - Magic CSS Extension · Developer Tools 10,000+ 266 ★ 2.15MiB

icon

Baseliner Extension · Developer Tools 10,000+ 45 ★ 205KiB

icon

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

icon

Emmet Re:view Extension · Developer Tools 10,000+ 162 ★ 74.65KiB

icon

CSS Shapes Editor Extension · Developer Tools 10,000+ 101 ★ 84.76KiB

icon

CSS Used Extension · Developer Tools 10,000+ 184 ★ 164KiB

icon

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

icon

PerfectPixel by WellDoneCode (pixel perfect) Extension · Developer Tools 10,000+ 605 ★ 732KiB

icon

PixelParallel by htmlBurger Extension · Developer Tools 10,000+ 65 ★ 223KiB

User reviews

icon

John Alexander Barreto Diaz (ID: 000000fc41cb5e01) Voted 2 ★ - Updated 04/27/2023 No muestra absolutamente nada no me sirve para los desarrollos pesimo servicio

icon

Louis Shine (ID: 000000fe9d7d8f0a) Voted 2 ★ - Updated 01/13/2023 sounds cool. not responding. no guidness. wasted my time.

icon

Mitchell McPhee (ID: 000000931ee47528) Voted 5 ★ - Updated 12/28/2020 Amazing extension, helps me out a bunch! I use it ever-day and it works as advertised!

icon

Chandrashekar B S (ID: 000000d70e7e5611) Voted 5 ★ - Updated 11/20/2020 Very helpful extension for designing my websites. Thank you

icon

Eduardo Mejia (ID: 0000001a40629fe3) Voted 1 ★ - Updated 11/03/2020 no me muestra nada, la ayuda no contiene nada, no existe algún video de apoyo, en general no me gusto, la voy a desinstalar.