Front end Magento developers often face the task of overwriting a portion of the page so. template. There are many techniques for finding the right template and debugging a template. One of them is Template hints. After enabling this configuration option, the path to each rendered template is shown on the front of the store.
Template hints can be enabled through the administration panel (Stores > Configuration > ADVANCED > Developer > Debug), or through the CLI commands :
php bin/magento dev:template-hints:enable php bin/magento dev:template-hints:disable
A configuration option has been added to Magento 2.3, thanks to which hints will appear after adding a special flag in the URL of the store in the browser, e.g.
https://magento.yuush.dev/?templatehints=magento
You can try it by yourself on our test magento environement.
Thanks to this, we don’t have to turn on or turn off hints every time, we can only control it via the URL field in the browser.
How can this mode of switching template hints work? Just in the administrative panel in the same place where template hints are enabled, select the additional Enable Hints for Storefront with URL Parameter option.
Other template debugging techniques
Personally, I rarely use template hints. Perhaps this is due to the fact that I already have extensive experience with Magento frontend and more or less know where to look. Instead of template hints, I often just look for a characteristic place in the template. Usually it is a class name or ID and I search for it in the code. In any case, template hints can be useful especially if we have an extensive store, where templates can be overwritten by external modules.
In addition, it is worth mentioning that hints will not give us anything at all when we are looking for e.g. uiComponent template. In short, we can say that the template path hint technique described in this article only applies to phtml templates. For UI Components templates use the HTML class search or id technique. You can read more about this technique in the Magento documentation in Locate JavaScript components article.
Summary
In this short article, I showed you how to easily enable/disable template hints in Magento 2.3. You can find more about template debugging in the Magento documentation.
