包简介

Developer toolkit for Magento 2

README 文档

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

Install the module with composer:
```
composer require zegac/module-devtools
```

Enable the module:

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

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:  and 
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

Support

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

Happy Debugging! 🚀

zegac/module-devtools 适用场景与选型建议

zegac/module-devtools 是一款基于 JavaScript 开发的 Composer 扩展包，目前已累计 3 次下载、GitHub Stars 达 0，最近一次更新时间为 2025 年 11 月 16 日，在 PHP 生态内属于活跃度较高的组件。

它主要适用于以下技术方向：「debugging」「magento」「Devtools」「magento2」「developer-tools」「template-hints」等业务场景。在实际项目中，围绕这些方向常见需要落地的问题包括：接口对接、性能调优、并发安全、与既有框架（Laravel / ThinkPHP / Yii / Webman 等）的兼容适配，以及生产环境的日志埋点与稳定性保障。

我们在过去多个企业项目中使用过 zegac/module-devtools 或与其功能相近的方案，如果你在选型或落地过程中遇到问题，例如 版本兼容、二次改造、私有化封装、与内部系统对接、生产 BUG 排查，欢迎联系我们协助评估。

围绕 zegac/module-devtools 我们能提供哪些服务？

定制开发 / 二次开发

基于 zegac/module-devtools 在你已有业务上做功能扩展、字段裁剪、UI 适配、与内部账号 / 权限 / 日志系统的深度对接。

BUG 修复 & 性能优化

线上偶发问题、内存泄漏、慢查询、并发异常等排查修复；针对高流量场景做缓存、队列、索引层面的调优。

项目外包 & 长期维护

承接完整的项目从需求 → 设计 → 开发 → 上线 → 长期运维；也可按月提供技术保姆服务。

yvsm@zunyunkeji.com QQ：316430983 微信：yvsm316 西安尊云信息科技 · 专注 PHP / Go / 分布式系统研发

与 zegac/module-devtools 相关的其它包

同方向 / 同关键字的高下载量 PHP Composer 包推荐，方便对比选型：

dada-amater/cassandra-php-stubs 0

The Cassandra php driver library IDE stubs which enables autocompletion in modern IDEs.

phpmv/ubiquity-commands 1

Ubiquity commands helper

michaeljennings/snapshot 7

A PHP package that takes a snapshot of your application and allows you to retrieve it later to help with debugging.

web-chefs/db-lojack 3

Laravel Database Query Logger and debug helper.

phpmv/ubiquity-acl 1

Access Control Lists for Ubiquity framework

e-conomix/mageplaza-magento-2-social-login 0

Magento 2 Social Login extension is designed for quick login to your Magento 2 store without procesing complex register steps

zegac/module-devtools

包简介

关键字：