Debugovanie PHP v browser konzole

Dump štruktúrovaných info o PHP objekte vďaka Chrome Logger extenzii

2017-03-19
PHP

Keď sa potrebujeme dostať k informáciám o obsahu PHP variable v určitom úseku kódu , siahneme po rýchlom var_dumpe alebo jeho známych print_r či var_export. Vieme si tak pozrieť key hodnoty array, na ktorom indexe sa nachádza value hodnota ku ktorej sa pokúšame 20m dostať či zistiť prečo arrayko ktoré by malo radostne prekypovať dátami o klientoch vracia smutnú null hodnotu. Tieto funkcie však zobrazujú svoj výstup na front-ende a navyše v časti stránky kde boli zavolané. Na rýchly check v developmente je to síce postačujúce, treba však myslieť na to aby sa nedostali do produkcie.

Po hľadaní schodnejšieho riešenia som sa stretol s odporúčaniami printovať obsah skúmaného variable do browser konzoly. V princípe jednoduché echo '<script>console.log("'.$PHP_VAR.'")</script>' s trochou apostrophe apocalypse a pár úskaliami:
⋅⋅⋅ ak printujeme inline script z prípadnej inicializačnej funkcie pred doctypom a html tagom, nič dobré z toho nikdy nebude
⋅⋅⋅ var dump returnuje výsledok ako echo na front-end
⋅⋅⋅ radi by sme mali backtrace info debug volania

Enter Chrome Logger

Áno, Chrome specific riešenie. Chrome dev tools sú go to nástroje front-end developmentu, zmetieme teda na začiatok Firebug zo stolu. Keď máme čistý obrus, nainštalujeme extenziu z chrome web store a includneme autorovu knižnicu pre PHP. Repozitár však nebol updatovaný nejaký ten rok, dva, viac, môžeme teda skúsiť aktívnjší fork s podporou Composer dependency managera. Library podporuje klasické console metódy ako log(), info() či warn().

Extenzia vyriešila problém s debugovaním v konzole predtým než sa začne generovať stránka, posiela však dáta pre extenziu cez header call, vrátili sme sa teda na začiatok. Ak chceme debugovať variable definované pri generovaní contentu, zhodí nám klobúk varovanie že prichádzame na párty neskoro, headers už boli odoslané a všetci išli domov. Skúsil som vytvoriť vlastný fork s conditianol checkom o odoslaní headerov a printom inline scriptu pre tento prípad. Ide teda o spojenie riešení, s dátami z Chrome Loggera passnutými do natívnej konzoly, namiesto spracovania extenziou.

Bonus na záver

Kto sa dopracoval až sem, zaslúži si bonusový kód - po includovaní vendor ChromePhp classy ju extendujeme vlastnou debug classou, aby sme mohli písať debug::log namiesto ChromePhp::log a v bud[cnosti ľahšie zmeniť logger.

1
class debug extends ChromePhp {};

Komentáre: