Update: Check my new blog post for the updated version 2.0.

Sobald man mit Magento arbeitet, kommt man als Entwickler früher oder später nicht um die Template Hints herum. Die Template Hints lassen sich über

System > Configuration > Developer > Debug > Template Path Hints

aktivieren (vorher in einen Store wechseln, denn für in der Default Config sind diese Einstellungen nicht verfügbar). Alternativ kann man die Templates Hints auch angenehm mit der Developer Toolbar aus dem Frontend heraus aktivieren.

Die Template Hints sehen dann so aus:

Allerdings wird das schnell unübersichtlich und überdeckt Teile der Ausgabe und teilweise auch andere Template Hints. Dazu kommt, dass hier nur Blöcke vom Typ "Mage_Core_Block_Template" (und nicht alle möglichen Typen, die von "Mage_Core_Block_Abstract" erben) angezeigt werden. Zuletzt fehlen einige wertvolle Informationen in den Template Hints.

Daher habe ich eine eigene Extension entwickelt, die die Template Hints etwas anders darstellt und mit deutlich mehr Informationen anreichert:

Aoe_TemplateHints (Download bei GitHub)

Die Template Hints können durch das Anhängen des Parameters "?ath=1" (bzw. "&ath=1, falls noch weitere Parameter in der Url vorhanden sind) angezeigt werden. Oder alternativ durch einen Cookie mit dem Wert 1 im Key "ath". Weitere Bedingung ist, dass die aufrufende IP-Adresse auf die eingestellte IP-Maske passt (System > Configuration > Developer > Developer Client Restrictions > Allowed IPs (comma separated)).

Hinweis: Das Aktivieren der Frontend-Hints löscht natürlich nicht den Cache. Daher ist es durchaus möglich, dass Teile der Ausgabe (nämlich die, die aus dem Cache kommen), keine Template Hints enthalten. Also am besten den Block Cache zu debuggen deaktivieren.

Genauso wie auch bei den normalen Template Hints verrutschen möglicherweise ein paar Boxen im Layout und absolut positionierte Elemente verschwinden evtl. hinter den Rahmen, aber dafür erhält man nun folgende Informationen:

  • Module: Der Name des Moduls, aus dem dieser Block stammt
    Bsp.: _MODULE: MageCore, _Mage_Cms _oder _MagePage
  • Path: Der Pfad aller Blöcke wie sie ineinander geschachtelt sind (Wie ein Stack Trace bzw ein Breadcrumb). Jeweils mit Namen und ggf. abweichendem Alias.
    Bsp.: PATH: _Mage_Core_Block_Text (alias/name: topLinks) <- Mage_Page_Block_Html_Header (alias/name: header) <- Mage_Page_BlockHtml (name: root)
    Das bedeutet, dass der Block mit dem Namen und Alias "topLinks" vom Typ "Mage_Core_Block_Text" im Block "header" vom Typ "Mage_Page_Block_Html_Header" enthalten ist, der wiederum in "root" vom Typ "Mage_Page_Block_Html" enthalten ist.
  • Template: Erbt ein Block von der Klasse Mage_Core_BlockTemplate wird zusätzlich das verwendete Template angegeben.
    Bsp.:
    TEMPLATE: frontend/base/default/template/page/switch/languages.phtml_
  • Cms-Block: Erbt ein Block von der Klasse "Mage_Cms_Block_Block" (also ein normaler statischer Cms Block) dann wird wird zusätzlich die Block Id angegeben.
    Bsp.: _CMS-BLOCK-ID: footerlinks
  • Cms-Seite: Erbt ein Block von der Klasse "Mage_Cms_Block_Page" (also eine Cms Seite) dann wird die Seiten Id angegeben.
    Bsp.: CMS-PAGE-ID: home
  • Cache: Und schließlich geben die neuen Template Hints über das Cacheverhalten des Blocks:
    Bsp.: _CACHE: Lifetime: forever, Key:c7e582f7a3b1b41fd5cd10c492c2ee13c60bae44, Tags: store,cms_block,blockhtml
    Hier werden die Lifetime, der Cache Key und die gesetzten Tags ausgegeben.

Alle diese Informationen werden in das Title-Tag des div-Containers geschrieben und sind bei Mouse-Over sichtbar. Dazu kommt, dass diese Template Hints nun für alle Blocktypen funktionieren. Jetzt kann man endlich auch Cms-Blöcke und andere Spezialblöcke leicht erkennen und zu ihrem Ursprung zurückverfolgen. Die Ausgabe der Template Hints funktioniert mit reinem HTML. Es wird kein weiteres Javascript geladen oder ausgeführt. (Evtl. könnte man mit Hilfe von Javascript die Ausgabe etwas aufhübschen und übersichtlicher gestalten, oder den aktuellen Block und ggf. die Elternblöcke besonders hervorheben...)

Der Block wird außerdem mit einer gepunkteten Line umrandet. Hier werden drei verschiedene Linienfarben verwendet, um die Blöcke schnell voneinenander unterscheiden zu können:

  • Rot: Der Block wird nicht gecacht (die Cache-Lifetime ist auf "null" gesetzt)
  • Grün: Der Block wird gecacht (Details zu den Caching-Paramters können im Title-Tag abgelesen werden.
  • Gelb: Der Block wird nicht gecacht, ist aber in einem gecachten Block enthalten und wird dadurch implizit mit gecacht.

Ungecachter Block (roter Rand)  

Gecachter Block (grüner Rand)  

Implizit gecachter Block (gelber Rand)

[Update] Version 0.0.2

Changes:

  • André Herrn added a new feature: Border color for cached, non-cached and implicitely cached block can be configured now. You'll find the settings in System -> Configuration -> Developer -> Debug.

Comments

This website uses disqus for the commenting functionality. In order to protect your privacy comments are disabled by default.

Enable Comments