README

改进的 Magento 2 调试提示，用于布局和块

特性

不影响结构 或现有样式 👌
检测 Knockout 组件和模板 🤜
检测 jQuery 小部件注册和使用 💲
在模板/布局中查找 Magento mage-init 脚本 📌
使用开发者工具中的 元素选择器 选择元素 🔫
在控制台打印 可浏览的结构 和内部信息 👀
添加按钮以打开 CMS 块的编辑页面 🖊️
为布局生成 Graphviz 可视化

安装

此包不打算在生产环境中使用。

composer require --dev kingfisherdirect/magento2-better-debug-hints
bin/magento setup:upgrade

使用

打开您的 Magento 页面并附加额外的 GET 参数 ?ath=1。例如： https:///?ath=1。

元素选择器

按 `（反引号键，位于制表键上方）
将鼠标移到任何 HTML 元素上方
单击以在浏览器控制台获取调试信息
右键单击突出显示的元素以导航到其直接父元素
ESC 以禁用选择器

控制台助手

使用 layout() 函数调查任何 HTML 元素。要检查检查器中当前选定的元素，请使用 layout($0)

Graphviz 布局

在开发者工具控制台中运行 lh.debuggers.mageLayout.graph()。图将被复制到剪贴板。您可以在以下位置在线可视化它 - http://magjac.com/graphviz-visual-editor/ 或使用此命令 echo 'GRAPH_OUTPUT' | dot -Tsvg > output.svg

致谢

https://github.com/ho-nl/magento2-Ho_Templatehints

在开始此模块的工作后，我意识到已经存在一个似乎相当好的模块。从中汲取了一些想法。

kingfisherdirect / magento2-better-debug-hints

维护者

详细信息

README

安装

使用

致谢