-
Book Overview & Buying
-
Table Of Contents
-
Feedback & Rating
Instant Magento Performance Optimization How-to
By :
In this recipe we will learn how to display template-related information for debugging purposes.
Go to System | Configuration | Advanced | Developer | Debug.

Turn on both the Template Path Hints and Add Block Names to Hints fields, and then save your configuration in the top-right corner.
If these options are not available at your backend, open and modify the system.xml file under the YOUR_STORE.COM/app/code/core/Mage/Core/etc/ directory at line 512 so that it looks like the following:
<template_hints translate="label"> <label>Template Path Hints</label> <frontend_type>select</frontend_type> <source_model>adminhtml/system_config_source_yesno </source_model> <sort_order>20</sort_order> <show_in_default>1</show_in_default> <show_in_website>1</show_in_website> <show_in_store>1</show_in_store> </template_hints> <template_hints_blocks translate="label"> <label>Add Block Names to Hints</label> <frontend_type>select</frontend_type> <source_model>adminhtml/system_config_source_yesno </source_model> <sort_order>21</sort_order> <show_in_default>1</show_in_default> <show_in_website>1</show_in_website> <show_in_store>1</show_in_store> </template_hints_blocks>
The lines to be modified are the ones that are highlighted. Then you can come back to your administration site and activate these options.

As you can see in the previous image, each part of our Magento now contains the name and the path of the responsible HTML or PHTML file. With this information, it will be easier to identify where the problems are.
The Magento Core adds an HTML <div> tag before each file in order to build the final page with a specific case. This new HTML <div> tag contains the filename and the file path in order to locate it easily. Then, when you browse to it, the previous <div> tag is displayed.
Change the font size
Change margin width
Change background colour