Il debug frontend in Magento è sempre stato un problema per tutti.
Ad oggi (settembre 2016) di tool se ne trovano in giro ma molto spesso sono specifici per una singola operazione (hits per i template, profiling ecc…), quindi lo sviluppatore è costretto a installare singolarmente le estensioni per magento (con conseguente aggiornamento separato), inoltre molto spesso il tool è invasivo e non mantiene la visibilità corretta del template.

In aiuto a questo problema (comune sia per Magento 1 che per Magento 2) il team di MageSpecialist ha creato una soluzione ad hoc creando una “suite di debug” che comprende:

La combinazione dei plugin chrome + estensione magento (modalità tipo “MegaZord dei Power Rangers”) aggiunge delle funzionalità al processo di sviluppo non indifferenti con un risparmio di tempo ma soprattutto “fatica”.

Da sottolineare che il tutto è distrubito in modo gratuito e open.
Chiunque può contribuire aiutando il progetto su GitHub tramite Pull Request.

Funzionalità della suite

Aprendo google chrome e attivando gli strumenti per sviluppatori (CTRL+Maiusc+I) si avrà una nuova sezione chiamata “Magento”.

In questa sezione trovere delle tab con le seguenti informazioni:

TAB ‘General’

Informazioni su:

  • versione magento
  • parametri di “request”
  • azioni controller
  • info su moduli
  • url path
  • lingua

m1-general-tab

TAB ‘Design’

Informazioni su:

  • layout handlers
  • package tema
  • codice tema

m1-design-tab

TAB ‘Observers’

Informazioni su:

  • lista degli “eventi” presenti

m1-observers-tab

TAB ‘Blocks’

Informazioni su:

  • dettaglio completo sui singoli “blocchi” magento
  • (phpstorm) link al phtml se abilitata la modalità “remote debug”

m1-blocks-tab

TAB ‘UI’ (solo per Magento 2)

Informazioni su:

  • dettaglio completo su componenti UI di Magento 2

mm2-ui-components

TAB ‘Profiler’

Informazioni su:

  • timing e profiling delle singole operazioni svolte

m1-profiler-tab

Modalità Inspector

Possibilità di visualizzare il debug anche con l’inspector di Google Chrome. Questa opzione ci dà la possibilità di analizzare la singola parte che ci interessa, con un dettaglio informazioni davvero completo.

m1-inspector-tab m1-general-tab

Altre info

E’ stata aggiunta anche la possibilità di integrare l’estensione di Google Chrome con PhpStorm tramite il Remote Call Plugin.

Qui una guida su come configurare il plugin con Xdebug, ma valido anche per il MSP_DevTools.

--

Post ufficiale della pubblicazione del tools: http://www.magespecialist.it/blog/2016/08/11/magento-devtools-available-helping-magento-developers-all-around-the-world/