Il debug del codice tramite tool

Siamo qui oggi per analizzare il debug html e css in fase di sviluppo mediante due importantissimi e famosissimi componenti aggiuntivi per firefox:

Sui rispettivi siti web sono presenti, in maniera dettagliata, tutte le caratteristiche e funzionalità dei due componenti, l’elenco delle funzionalità lo lasciamo ai rispettivi siti ufficiali; ci preme di più darvi una panoramica su come utilizzarli al meglio e come integrare le piu importanti funzioni di entrambi durante la fase di svipuppo.

Web Developer

Sappiamo già dove intervenire?  Scrivere in tempo reale da zero interi fogli di regole css per controllare che effetto avranno sulla struttura di un sito e salvarli in locale al volo, è il fondamento di questo componente. Recatevi sul sito web che stiamo sviluppando o che dobbiamo modficiare e cliccate in alto sul menu CSS -> Modifica CSS. Si aprirà un pannello contenente l’elenco dei css attualmente collegati al sito web con l’elenco di tutte le regole. Possiamo decidere quindi di modificarne qualcuna o di aggiungerne qualcuna di nuova. Terminate le modifiche tramite il tasto salva, posto vicino all’elenco dei css, vi consentirà di salvare sul vostro computer locale le modifiche appena apportate sovrascrivendo il vecchio file. Non vi rimane altro da fare che caricarlo online e refreshare la pagina. Nota importante, di default, se durante la fase di scrittura, cambiate pagina o refresciate o chiudete il pannello tutte le modifche in corso andranno perse. Possiamo notare la semplicità nell’apportare qualsiasi tipo di modifica, ma per coloro che sono alle prime armi, forse risulterà un pò laborioso scrivere le regole in quanto non verrà dato alcun tipo di suggerimento in fase di scrittura, prevede quindi che vuoi sappiate in maniera impeccabile la sintassi di tutte le regole; di contro è un ottima scuola per imparare a scrivere senza l’ausilio di editor specifici.

Firebug

Dovete risolvere un bug specifico? Non avete idea se il problema sia relativo al css o al markup? E’ questo il momento di utilizzare firebug con il suo potente ispettore di tag. La stessa funzione si trova anche in webdeveloper ma a parità di utilizzo, firebug è molto piu performante nell’individuare e correggere i bug. Recatevi sulla pagina in cui “qualcosa non torna” e cliccate sull’icona dell’insetto posta in fondo a destra del browser. Con lo Strumento freccia posto a sinistra spostate il mouse verso il div o l’elemento del quale volete avere piu informazioni. Mentre il mouse si muove, sulla sinistra verrà mostrato tutto il markup della pagina mentre a destra verrà evidenziato il css relativo al markup che stai analizzando, potrete cosi tenere docchio contemporaneamente entrambe le cose. Una volta selezionato un elemento della pagina avete due strade di fronte a voi. La prima: cliccare sul pulsante modifica e automaticamente il codice html della pagina diventerà modificabile e le modifiche che apporterete per individuare il bug avranno effetto immediato; la seconda correggere e/o aggiungere nuove proprietà alle regole gia assegnate per quel determinato elemento, infatti vi verrà mostrato tutto il css collegato a quell’elemento, e nient’altro. Una volta capito l’errore, copiate le modifiche e incollatele nel progetto, salvate e caricate online. Inizialmente potrà sembrarvi meno intuitivo di webdeveloper, ma con il passare del tempo, capirete la potenza del pannello css nell’elencarvi le regole, di come vengono messe in evidenza regole che sono state sovrascritte da altre in precedenza (criterio di specificità) e di come sia facile e veloce riportare le modifiche nei vostri progetti in quanto vi verrà indicato nome del css e riga da correggere.

Quale usare?

Usarli entrambi? Usarne uno piuttosto che un altro? Sta a voi in base alle vostre esigenze del momento e in base a quanto appena detto, quando usare webdeveloper invece che firebug. Uno completa l’altro, usarli insieme con saggezza può aiutarvi in maniera significativa durante la fase di sviluppo dei vostri portali.

Search
Tags
Seleziona rubrica
Seleziona rubrica
Codice Github