Let's be honest, the default Magento 2 layout hints are very bare (to stay polite). They lack much of the information that is needed when we want to debug the layout.
This module made my like easier when it comes to altering the layout and templates of Magento 2 and I hope it will do the same for you.
The goal is to show all blocks, containers and uiComponents on the page without breaking the page too badly. When the mouse hovers any given element it will show more information for the current hovered element and its parents. The data that is provided includes the name, alias, parent, template and class.
I've also added some nice frontend features to easily hide or show the hints that way it's easy to navigate the site while the hints are ON. There are some additional features that bring some of the CLI actions to the frontend such as enabling and disabling the hints from the frontend as well as clearing the caches directly from the browser.
This module will never make itself visible or have any effect in production mode, it will only work in developer mode.
- Enable and disable from Frontend, CLI or Admin panel
- Shows blocks and containers
- Displays the name and alias of the block or container.
- Lots of information on hover such as the block class and template file.
- Clear all caches from the frontend
- Non-intrusive display
- Layout information at the bottom of the page.
composer require justinkase/module-layouthints
magento setup:upgrade
magento cache:flush
Make sure you're in developer mode
Visit your Magento 2 store in a browser and use the following keys combinations.
Shift + Ctrl + H=> Toggle hints visibilityShift + Ctrl + ==> Turn ON hints (you must also clear caches)Shift + Ctrl + -=> Turn OFF hints (you must also clear caches)Shift + Ctrl + C=> Clear caches
You might get a request to approve browser notifications.
Make sure you're focused on the page, click somewhere on the page with the mouse, but not a link!
justinkase:hints:on
justinkase:hints:off
magento cache:flush
Stores > Configuration > Advanced > Developer > JustinKase - Layout Hints
