README

A powerful developer toolkit for Magento 2 that provides enhanced debugging capabilities for templates, containers, and layout handles.

Features

• 🔍 Template Inspector - Identify which template files render specific page elements
• 📦 Container Inspector - Track container elements
• 🎨 Layout Handles Viewer - View all layout handles applied to the current page
• 🖱️ Interactive Click Inspection - Ctrl+Click any element to see its source
• 💻 Console Integration - Developer friendly console logging with color coding

Installation

1. Install the module with composer:

   composer require zegac/module-devtools

2. Enable the module:

   bin/magento module:enable Zegac_DevTools
   bin/magento setup:upgrade
   bin/magento cache:flush

3. Ensure your Magento is in developer mode:

   bin/magento deploy:mode:set developer

Quick start guide

Prerequisites:

• ✅ Magento in developer mode
• ✅ URL contains ?debugmode=on

Once activated, you have 4 ways to inspect elements:

1. Ctrl+Click on Elements

• Hold Ctrl (or Cmd on Mac) + Click any element
• Console shows information about template or container

2. Ctrl+Click Layout Handles Button

• Hold Ctrl (or Cmd on Mac)
• Click the "🎨 Show Layout Handles" button (bottom-left corner)
• Console shows all active layout handles

3. Console Methods

// View all layout handles
magentoLayoutHandles()

// Inspect any element
document.querySelector('.product-name').showInfo()

4. HTML Comments in Elements Tab

• Open DevTools → Elements tab
• Look for comments: <!-- TEMPLATE START: ... --> and <!-- CONTAINER START: ... -->
• Every template and container is wrapped with these comments

Performance Impact

⚠️ Important: Only use this when developing and never in production.

Requirements

• Magento 2.4.x
• PHP 8.1, 8.2, or 8.3
• Developer mode enabled

Compatibility

• ✅ Magento 2.4.8-p3 (tested)
• ✅ Luma theme
• ✅ Custom themes
• ✅ Chrome, Firefox, Safari, Edge

Author

Josip Oužecky

License

Copyright © Zegac. All rights reserved.

Support

For issues, questions, or contributions, please visit the github page.

Happy Debugging! 🚀