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

How to download and manually install Dimensions Inspect | Gridman extension for Chrome

Looking for a way to install Dimensions Inspect | Gridman extensions for Chrome, you can search for them in the Chrome Web Store, clicking the "Add to Chrome" button, and following the straightforward process.

However, you may need to install Dimensions Inspect | Gridman extensions manually, this article outlines two simple methods to effortlessly install Dimensions Inspect | Gridman extensions, whether they come as unpacked folders in compressed formats like .zip or as .crx files.

Method 1: Download Dimensions Inspect | Gridman extension and manually install through Drag &Drop

If you ever need to manually install a Dimensions Inspect | Gridman extension for Chrome, don't worry, it's a simple process. Just follow these easy steps, and you will have your extension ready to use in no time.

Step 1: Download the Dimensions Inspect | Gridman Extension by clicking the "Download CRX" button on the website.

Look for the Dimensions Inspect | Gridman extension you wish to install. Go to the website and download the Dimensions Inspect | Gridman extension package, which is usually a .CRX file and comes in a zipped file. Here ".crx" file is the format for Dimensions Inspect | Gridman extension that contains all the data.

Step 2: Extract &Arrange Files

Once the file is downloaded, extract that file into its own folder. Similarly, give that extension files a permanent home. In other words, keep it in a folder that you don't accidentally delete it because these files will be needed to make that extension work.

Step 3: Go to the Chrome Extensions Page

Open Google Chrome and in the address bar, type chrome://extensions; it will open the Google Chrome extensions page. Make sure that "My extensions" is selected in the sidebar.

Step 4: Drag and Drop the Extension

Now, go to the folder where you extracted the Dimensions Inspect | Gridman extension and drag &drop the extension file from there anywhere onto the extension page within Google Chrome.

Step 5: Complete the Installation

Once you drag and drop the extension file, follow the steps that Google Chrome takes you through. Similarly, if the extension file is of .crx file format, you will be required to review the permissions and then add the extension.

Now, you can manage that added extension as you would like to with any other Chrome extension that you added through Chrome Webstore. Its icon will also appear in the Google Chrome Menu on the right side of the address bar once you activate it.

Method 2: Download Dimensions Inspect | Gridman extension for Chrome and install in Developer Mode

This is another method to install Dimensions Inspect | Gridman extension manually, but the twist is that here, you install by enabling the developer mode option provided in Google Chrome. This mode is commonly used for testing extensions or running unpublished tools.

Step 1: Download the Dimensions Inspect | Gridman extension file

Select and download the Dimensions Inspect | Gridman extension by clicking the 'Download CRX' button on the website.

Step 2: Extract the downloaded contents

Convert the file to a ZIP file if it is in CRX format then extract the Dimensions Inspect | Gridman extension zip file or folder that you downloaded. Make sure you extract it using the same folder name and keep it safely in another folder, so you don't delete it by mistake. The extracted folder will be needed to keep your Dimensions Inspect | Gridman extension running.

Step 3: Open Chrome Extension Setting Page

In the address bar of Google Chrome, type chrome://extensions and open the Chrome Extension Page.

Step 4: Enable Developer Mode

After opening the Chrome Extension page, look at the top right side, and you will find the toggle option of "Developer mode."Simply enable that developer mode option.

Step 5: Load the Unpacked Extension

Once you enable the developer mode option, you will see the menu of Load Unpacked, Pack Extensions and Update. From that, select the option "Load unpacked."

Step 6: Select the Extension Folder

Once the pop-up opens upon clicking Load unpacked, select the Dimensions Inspect | Gridman extension directory and click on the "Select Folder "button.

Step 7: Confirm and Install

After you select an extension folder of a Google Chrome extension you're installing manually, confirm its installation for the final time and let the installation complete.

Conclusion

Here we've made a step-by-step guide on How to manually install Dimensions Inspect | Gridman extension in 2 ways. We hope this guide proves helpful.

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.