Magento 2 Block HTML Hints Inspector

December 9, 2025 · View on GitHub

A Chrome extension that displays Magento block information on hover without opening DevTools.

For use with Yireo_HtmlHints

This extension requires the Yireo_HtmlHints Magento 2 extension to be enabled on your store. It reads the HTML comments that extension adds to show block names, classes, and templates.

Video

A 28 second video at 30fps says more than 800 pictures:

https://github.com/user-attachments/assets/681b606b-7174-4d65-b277-639a98d4f148

Installation

Download or clone this repository
Go to chrome://extensions/
Enable "Developer mode" (top-right toggle)
Click "Load unpacked"
Select this extension's directory

How to Use

Action	Result
Shift+Z	Toggle inspector on/off
Hover	See block/container hierarchy at cursor
Shift+A	Pin tooltip in place (toggle)
Drag ⋮⋮	Move pinned tooltip
Escape	Close pinned tooltip

What You See

For each hovered element:

Block/Container type (red = block, purple = container)
Name, class, template name, and file path
Full hierarchy of nested blocks

Visual feedback:

Red outline on hovered block
Teal border on pinned tooltip
Instruction text near cursor

✅ Hover to inspect blocks and containers ✅ Pin tooltips for detailed reading ✅ Drag to reposition pinned tooltips ✅ Select text directly in tooltip ✅ Automatically hidden by default ✅ Non-intrusive - doesn't modify page

Keyboard Shortcuts

Shift+Z - Toggle inspector on/off
Shift+A - Pin/unpin tooltip
Escape - Close pinned tooltip

Troubleshooting

Tooltip not showing?

Ensure Yireo_HtmlHints is enabled in Magento 2
The extension only works on pages with block comments

Still can't see blocks?

Some dynamically loaded content may lack comments
Check that opening block comments are in the HTML source

Development

manifest.json - Extension configuration
content.js - Main logic (scanning, detection, pinning)
styles.css - Visual styling

Non-intrusive: only adds listeners, doesn't modify the page.