Sia santificato Firebug!

- Letture: 2.560

Quanto amo quel piccolo bagarozzo, devo ammettere che Firebug ormai è diventato uno strumento essenziale durante il mio sviluppo web.

Firebug è un estensione per browser che permette il debug, la modifica e l’analisi di tutti gli aspetti legati allo sviluppo web, dai fogli di stile CSS, al codice HTML, alla struttura DOM al codice Javascript.

Firebug è più di un’analizzatore, infatti oltre a verificare errori nella pagina, abbiamo la possibilità di modificare il contenuto, aggiungere parti di codice HTML o CSS.

Questo ci permette di ottimizzare i tempi di debug di una pagina web, infatti tutte le modifiche le potremo vedere in tempo reale senza modificare il codice nativo.

Quanti di voi lo usano? Io vi consiglio vivamente questa estensione per i più noti browser, con lo scopo di velocizzare i tempi di debug.

Firebug è disponibile per Firefox, Chrome, Internet Explorer, Opera, Safari.

Stratega, Docente, Speaker con più di 12 anni di esperienza in strategie creative multicanale. Oggi sono Partner & Chief Innovation Officer di ThinkingHat, Innovation Studio specializzato in tecnologie emergenti per aziende e brand audaci.

28 Commenti

  1. io lo uso costantemente e senza questo addons per alcune cose non saprei dove poter sbattere a testa (vedi risposte chiamata AJAX).

    ciao

  2. Concordo, si tratta di un plugin assolutamente essenziale per risparmiare ore e ore di lavoro!
    Oltre all’analisi di html e css con modifica “on the fly” la funzione che uso di più è il debugging del codice javascript…

  3. Lo uso per analizzare i siti non fatti da me…
    Per i miei siti a cosa dovrebbe servire? Uso Aptana per sviluppare e quando scrivo il codice “so’ cosa sto scrivendo” (notare le virgolette :D)

  4. volendo notare il difetto: alcune delle funzionalità più utili son integrate nativamente dentro Opera.

  5. Ma tu pensa!
    …e io che pensavo esistesse solo per Firefox!!
    Vado subito a scaricarlo su Chrome!

    @ricmanx: Anch’io uso Aptana per sviluppare, in parallelo con Firebug però. La preview di Aptana a volte si permette “licenze artistiche” non proprio coerenti con il risultato reale.

  6. Lo uso sempre. Anche per i siti fatti da me, mi capita di utilizzarlo per visionare velocemente errori. Però non ho capito una cosa: in che senso permette modifiche sul codice?

  7. Certo! E’ proprio quella la forza… se usi un CSS su una pagina e magari non sai fino a che punto spingerti con un margine li ti viene in aiuto Firebig… provi, vedi e poi modifichi.

    Hai preparato due o tre backgroud e non sai quale usare, vai sul CSS e (se possibilmente in fase di testing hai messo un progressivo) cambi l’1 col 2 o col 3 e vedi quale va meglio.

    Si si, titolo azzeccato!

  8. Ciao Julius! Hai ragione, Firebug è formidabile.
    Grazie della dritta: non sapevo ci fosse anche per Chrome, l’ho subito installato anche qui :)

  9. Matteo ha scritto:

    @ricmanx: Anch’io uso Aptana per sviluppare, in parallelo con Firebug però. La preview di Aptana a volte si permette “licenze artistiche” non proprio coerenti con il risultato reale.

    :D vero… infatti non la uso…
    Faccio così: ho due monitor… a sx Aptana a dx FF… Salvo su Apatana e “refresho” su FF … rapidissimo…

  10. Firebug ottimo strumento per tutti i web designer, non ne posso fare a meno per i miei lavori, mi permette di fare prove e test prima di modificare i CSS o HTML. Non sapevo che esistesse anche per IE

  11. ho provato ad installarlo per IE8 ma non è successo nulla….quale potrebbe essere il problema?

  12. gianluca

    scusate, ammetto la mia ignoranza, sono alle prime armi, io lo uso tanto per capire come verrebbe la pagina e poi vado a modificare il codice in base alle prove fatte (uso wordpress). Ma per le modifiche al css, nel riquadro a destra c’è riportato, in blu sottolineato, il file css nel quale si trovano le informazioni da modificare. Ma per le modifiche all’html, non c’è una analoga funzione che ti permette di sapere quale è il file html o php da modificare? grazie mille a quanti sapranno o vorranno rispondermi.
    Gianluca

  13. @ gianluca:
    Sono un grafico quindi spero di aver capito :)
    -il riquadro a destra con il CSS si riferisce allo stile della porzione di codice che sottolinei (infatti ti dice anche la riga).
    a destra c’è il CSS a sinistra l’HTML.
    Se usi WP, l’HTML che leggi è generato dal PHP e quindi anche se lo modifichi poi non sai che fartene…
    se devi solo spostare o nascondere degli elementi usa il CSS

  14. @ ricmanx:
    Come funziona Firebug con Aptana? cioè anch’io uso due monitor e di solito faccio così: firefox aperto in uno e nell’altro firebug fullscreen, modifico in firebug, copio tutto e poi lo incollo in un editor di testo, sovrascrivo il file sull’FTP e poi faccio refresh in firefox…

    thanks

  15. ciao, esiste una versione di firebug o simile, che ti fa modificare il css direttamente da browser senza editare manualmente il css? grazie

Commenti