Patch to Debug Blocks and Containers in Magento 2

Debug Blocks and Containers in Magento 2

Hello, In this tutorial we will see how to add comments in the page HTML which shows block and template container names.

Magento provides template hints but its design is too confusing and frustrating. It hurts when you have limited hours to complete your task and are stuck in finding which PHTML file is rendering and which block is responsible for the logic.

Today, I will share a patch I created to show comments in the page source. It will not affect the front end and not be visible to customers.

Please do not use this in the production environment, use it only in your local setup.

You can check comments inside the developer tool of the between and starting of the HTML element.

Let’s check how.

Download my patch from the below URL and put it inside the m2-hotfixes/ or Root Directory.

Apply the patch using ECE-Tools or Simple Git apply Command

./vendor/bin/ece-patches apply

or

git apply DEBUG-COMMENT-BY-JIGAR.patch

If you don’t know how to apply the patch follow the below tutorial :

Magento 2: How to Apply Patch?

Patch Github Link :

https://gist.github.com/jigarkkarangiya/7a99ffd0049b90e7622e2a5e83c9219c

It will show the comment on the page below :

That’s it. Now you can easily debug which .phtml file and which block is responsible for rendering the content.

I hope this article helped you to find what you were looking for.

Bookmark it for your future reference. Do comment below if you have any other questions on that.

Do share this trick with your team.

Thank you. Happy Desiging !!

You may also like this :

Magento 2: How to Apply Patch?

Magento 2: How to Get Base URL?

Leave a Reply

Your email address will not be published. Required fields are marked *