Patch to Debug Blocks and Containers in Magento 2

Hello Devs,
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 URL below and put it inside the m2-hotfixes/ or Root Directory.

Patch download 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 !!