The Joy of FirePHP A Crash-Course

FirePHP è un plugin per Firefox e una combinazione di librerie server-side che ti permette di inviare ogni tipo di succosa informazione dalla tua applicazione web al tuo browser, proprio come la funzionalità console.log () con JavaScript. In questo tutorial PLUS e screencast companion, ti insegneremo come iniziare dall'inizio!

Questo tutorial include uno screencast disponibile per i membri Tuts + Premium.

Quindi pensi di essere un grande sviluppatore web, eh? Non leggere fino a quando non superi la prima sfida: rispondi (onestamente) "vero" o "falso" a te stesso alle seguenti affermazioni:

  1. Tu usi Firefox per lo sviluppo web
  2. Hai installato la famosa estensione Firebug
  3. Ti sviluppi in PHP

Se hai risposto a tutti e tre con un sonoro "vero", datti una pacca sulla spalla. Ti perdonerò per non aver ottenuto il numero tre, ma se non stai usando Firefox con Firebug ... dove sei stato!?

Avrai bisogno di questa combo vincente per completare questo tutorial. L'ultima cosa di cui avrai bisogno - diventare il grande maestro, l'uber-sviluppatore, il codice-ammazza i tuoi sogni - è la parte più importante: FirePHP.


Cos'è FirePHP?

FirePHP è un plugin per Firefox e una combinazione di librerie server-side che ti permette di inviare ogni tipo di succosa informazione dalla tua applicazione web al tuo browser, in un modo più carino del solito:

 echo $ variabile;

Questo codice è così comune. A volte sembra il modo più veloce per spaccare il valore di variabile $ quindi sai cosa è in un determinato punto di esecuzione del codice.

Ma cosa succede se variabile $ non è una stringa o un intero; cosa succede se si tratta di un tipo di dati complesso come un array o un oggetto? In PHP, il codice sopra non sarebbe così utile:


"Basta usare print_r ($ variabile);" Ti sento dire Va bene i pantaloni eleganti, ma non è molto elegante. Cercare di trovare il valore di un elemento dell'array in quel casino è un dolore. E ancora non risolve gli oggetti!

Quando vedrai cosa può fare FirePHP, cambierai idea! Trasforma il debug in un processo sorprendentemente piacevole e si traduce in un codice molto più portatile.

In questo tutorial ti mostrerò come impostare FirePHP nella tua app e alcuni ottimi modi per usarlo per accelerare lo sviluppo e il debug.


Passaggio 1: impostazione del lato server

Se non hai installato l'estensione FirePHP, installala ora.

L'estensione FirePHP (che chiamerò FirePHP da ora in poi) è completamente dipendente da Firebug, quindi ne avrai bisogno anche tu. Le classi sul lato server (che chiamerò FirePHPCore) sono disponibili come libreria indipendente. Ci sono anche una serie di plugin per i popolari framework e CMS di PHP.

Simon dice:

Anche se il nome suggerisce diversamente, FirePHP non è solo per gli sviluppatori PHP. Usa il proprio set di intestazioni HTTP per inviare informazioni dalla tua applicazione al browser, quindi può essere facilmente trasferito in altre lingue. Sono disponibili librerie sul lato server per ASP, Ruby, Python e altro. Se non ce n'è uno per la tua lingua, potresti sempre sfidare te stesso e scrivere il tuo.

Ciò lo rende ideale anche per il debug AJAX in quanto significa che le risposte asincrone sono contenuti puliti contenenti solo l'output che si desidera vedere, non il codice di debug.

Vai avanti e scarica la tua libreria lato server preferita. In questo tutorial, mi concentrerò sull'utilizzo della libreria principale autonoma. Le istruzioni per l'impostazione di altre librerie sono disponibili sul wiki di FirePHP.

Simon dice:

Se hai setup PEAR e preferisci usarlo, digita semplicemente le due righe seguenti sulla riga di comando:

 canale pera-scopri pear.firephp.org pera installa firephp / FirePHPCore

Una volta decompresso il pacchetto, vai su lib cartella e copia il FirePHPCore cartella per il tuo server web o cartella include app.


Compagno Screencast


Simon dice:

Una delle grandi cose del firewall indipendente FirePHPCore è il supporto per PHP4. Così puoi persino collegarlo ad alcuni di quei siti retrò che stai ancora utilizzando!


Passaggio 2: Ciao, FirePHP

Come con tutti i tutorial di programmazione, inizieremo con un esempio di base, "Hello, World" di FirePHP.

Crea un nuovo documento PHP vuoto. Chiamerò il mio test.php. Salvalo nella radice della tua app.

Perché FirePHPCore funzioni, è necessario abilitare il buffering dell'output. Leggi di più su questo se non l'hai mai usato prima, è una buona abitudine entrare comunque.

 

Ovviamente, non dobbiamo dimenticare di includere la libreria FirePHPCore. Se stai usando PHP5, aggiungi questo nella parte superiore del file:

 include_once ('includes / FirePHPCore / fb.php');

Se stai usando PHP4, includi il fb.php4 file invece.

Simon dice:

Non è necessario includere il file di classe in quanto è incluso nel file fb.php.

Ora possiamo iniziare l'output sulla console di Firebug. Digitare quanto segue dopo ob_start () e prima ob_end_flush ():

 FB :: info ('Ciao, FirePHP');

Simon dice:

FirePHPCore ha un'API procedurale e orientata agli oggetti. Non c'è davvero alcuna differenza tra i due e puoi usare quello che preferisci.

Utilizza anche il modello singleton per risparmiare memoria e viene fornito con una classe helper completamente statica, che preferisco usare in quanto richiede meno codice.

Apri Firefox, avvia Firebug e vai a questa pagina. Dovresti ottenere qualcosa del genere:


Quant'è fico!? Beh, non è una demo molto eccitante, quindi proviamo qualcosa di un po 'più complicato.


Passaggio 3: invio di variabili complesse

Vediamo cosa succede quando passiamo in una variabile complessa. Costruiremo un array e vedremo cosa otterremo. Aggiungi il seguente codice subito dopo l'ultima chiamata FB :: info ():

 $ array ['key1'] = 'alcuni contenuti'; $ array ['anotherKey'] [] = 1234; $ array ['anotherKey'] [] = 5678; $ array ['anotherKey'] [] = 9012; $ array [] = null; FB :: info ($ array, 'My Array Test');

Ora salva, vai su Firefox e aggiorna.


Ok, sembra buono ... ma, aspetta, dove sono tutti gli output? Passa il cursore su quella nuova riga.


Wow. Il frame di Firebug ci mostra tutti i dati nel nostro array - non solo elementi di primo livello dell'array, ma anche quelli di livello inferiore - e in un modo ordinato e leggibile.

Diventa ancora più interessante con gli oggetti! FirePHPCore fa pieno uso della riflessione per ispezionare le proprietà di un oggetto, anche quelle private.

Simon dice:

FirePHPCore ha un numero di opzioni che possono essere impostate per limitare il livello di ispezione in matrici e oggetti. È anche possibile creare un filtro per le proprietà dell'oggetto che non si desidera passare all'agente utente.

Puoi trovare ulteriori informazioni sull'API FirePHPCore presso la sede di FirePHP.


Usi pratici

Dovrebbe essere ovvio già che questo può aiutare con il debug generale, ma ora guarderò alcuni modi inventivi per usare FirePHP.

1) Uno strumento di profilazione PHP

Se si utilizza un front controller singolo per instradare tutte le richieste e avviare la propria app, è possibile calcolare il tempo necessario per l'elaborazione di ciascuna richiesta per l'applicazione sul server.

Qualcosa del genere lo farebbe:

 

Ricorda che questa non è una rappresentazione del tempo di risposta, solo tempo di esecuzione del codice - quanto velocemente il tuo server esegue il codice prima di inviarlo allo user agent. L'output deve ancora viaggiare dal tuo server al client attraverso la rete.

Simon dice:

È possibile utilizzare l'estensione YSlow per Firebug per tenere traccia dei tempi di caricamento della pagina e della reattività dell'app.

2) Un semplice strumento di ispezione SQL Query

Se si utilizza una funzione di query centrale o si estende una classe di connettore del database (come mysqli), è possibile eseguire il wrap di un timer su tutte le query sincrone e controllare per quanto tempo ciascuna di esse richiede.

Puoi anche prendere nota delle query SQL stesse. In effetti, potresti mettere insieme questi due bit di dati. E non sarebbe bello mostrarlo in una tabella ben strutturata?

Well Firebug ha una struttura a tabella e FirePHPCore ha un wrapper anche per questo:

 

Simon dice:

Ho buttato un paio di extra qui. Nel file myDb.class.php, se il $ result la variabile ritorna falso, significa che questa query non è riuscita. Quindi sto usando FB :: errore () per contrassegnarlo come un errore in Firebug e mostrarmi la query FB :: trace () per mostrarmi lo stack di processo che porta alla query errata.

La cosa fondamentale qui è la FB :: tabella () metodo. Questo rende la creazione di informazioni di debug strutturate morto facile.

Ora, quando istanziate la vostra classe myDb ed eseguite una query, i dettagli di tale query vengono inseriti in una matrice. Successivamente, accediamo a quell'array in seguito per creare la nostra tabella FirePHP di tutte le query che hai eseguito per quella richiesta, per quanto tempo sono state prese e il tempo di esecuzione totale di tutte le query.


Quello che hai fatto qui, con solo poche righe di codice, sarebbe stato impossibile solo con eco. Non potresti sperare di ottenere qualcosa di così utile in così poco tempo. Ciò rende più rapido il debug.

3) Un debugger AJAX

L'utilizzo di FirePHPCore per le richieste AJAX non è diverso dal suo utilizzo per le richieste sincrone. Usa semplicemente le funzioni come faresti normalmente. Quando l'app effettua richieste AJAX, vengono visualizzate le informazioni aggiuntive dell'intestazione FirePHP e l'estensione lato client viene elaborata nella console di Firebug. Proviamolo.

Crea un nuovo file chiamato ajax.php nella radice della tua app. Inserisci qui il seguente codice:

 

Ora nel tuo test.php file, aggiungi quanto segue dopo l'ultima chiamata a FB :: info ():

 ?>     

Refreshing test.php in Firefox dovrebbe mostrarti il ​​tuo 'Click Me!' pulsante. Quando si fa clic su di esso, il browser deve eseguire una richiesta AJAX e caricare la risposta (in questo caso testo normale) nel file

.


Ancora più importante, FirePHP aggiunge un nuovo nodo a Firebug che ci mostra tutti i messaggi FirePHP che abbiamo registrato nel file ajax.php.

4) Gestore errori predefinito

Attaccalo all'inizio della tua app e persino i vecchi errori di PHP vengono scaricati su Firebug!

 set_error_handler ( 'myErrorHandler'); // Potresti aggiungere parametri facoltativi $ errfile, $ errline e $ errcontext per maggiori dettagli function myErrorHandler ($ errno, $ errstr) FB :: errore ($ errstr, 'Errore numero'. $ Errno);  // Continua con l'esecuzione normale

Questo è un modo molto più pulito e sicuro per segnalare errori. Diventa ancora migliore se mostri le tue app ai client mentre sono in fase di sviluppo (e correndo il rischio di produrre errori non critici) - se non usano Firefox, con Firebug e FirePHP, non vedranno quegli orribili errori , ma lo farai ... in Firebug. Basta cambiare i livelli di segnalazione degli errori solo per mantenere le cose in ordine! Questo è uno sviluppo più veloce.


Sicurezza

Mentre FirePHP è un ottimo strumento per il debug durante lo sviluppo e il test, non dovrebbe essere lasciato attivo quando un'app entra in produzione. Può potenzialmente rivelare troppe informazioni sulla tua app rendendo la vita ancora più facile per gli hacker.

Naturalmente, se ti connetti a un sito tramite HTTPS, tutte le informazioni di intestazione sono crittografate come standard. Altrimenti viene inviato come testo normale.

Aggiunge anche un overhead alla tua app che potrebbe causare una seria riduzione delle prestazioni e un'ammaccatura della larghezza di banda.

Questo mi porta ad un altro aspetto importante di FirePHPCore: puoi lasciare il codice FirePHP in posizione, ma non invierà alcun dato se è disabilitato o se la stringa di agente utente richiedente non contiene lo specifico riferimento FirePHP.

Se devi assolutamente abilitare FirePHP sui siti di produzione, ad esempio per il debug remoto, assicurati che sia su un interruttore e non dimenticare di spegnerlo quando hai finito. Qualcosa di simile a:

 define ('DEBUG_MODE', true); FB :: setEnabled (false); if (DEBUG && $ _SESSION ['userIsAdmin']) FB :: setEnabled (true); 

Ciò garantisce che anche se il tuo DEBUG_MODE sia impostato su "true" (cioè "on"), solo una sessione di amministratore autenticata che utilizza un programma utente con FirePHP installato attiverà il codice di debug e riceverà le informazioni di intestazione extra.


Conclusione

FirePHP è uno strumento geniale. Si è inserito perfettamente nel mio flusso di lavoro. Perché è sempre lì, imbullonato agli strumenti che uso già quotidianamente, è diventato una seconda natura da usare.

Ancora più importante, mi ha salvato la pelle più di alcune volte. Sono stato in grado di eseguire il debug dei siti in produzione senza dover rimuovere i siti. Ha reso il debug AJAX una possibilità molto reale e poiché è open source e libero da usare, il costo di adozione è estremamente basso.

Aggiungete a questo il fatto che le mie app sono ora più portabili, ne ho una visione migliore, e ho imparato alcuni nuovi trucchi lungo la strada, cosa c'è che non va?

Sempre più sviluppatori web utilizzano il browser come principale strumento di sviluppo. E perchè no? È dove le nostre applicazioni sono destinate a funzionare. Quindi sembra in qualche modo più naturale mettere il profiling e il debugging direttamente nel browser; dove passiamo la maggior parte del nostro tempo a debuggare comunque!

Pensa che è ora di smettere di usare eco adesso? Congratulazioni, Super-Dev!


FirePHP è stato creato da Christoph Dorn. La versione 0.3.1 è la versione stabile corrente. La versione 1.0 è in sviluppo e promette alcune nuove interessanti funzionalità.