La Web Developer Toolbar per Firefox

La Web Developer Toolbar per Firefox è spesso indicato come uno dei must-have di strumenti per gli sviluppatori web. Aver usato la barra degli strumenti nel mio ambiente di progettazione, con tutto il cuore d'accordo. Taglia indietro il tempo di sviluppo di ore. Fa ciò che può essere compiti noiosi, quasi divertente. Questo mi permette di rapida occhiata a un sito Web in una finestra di dimensioni differenti. Mi aiuta a eseguire il debug e la validazione del codice JavaScript e CSS.

Chris Pederick sviluppato questa toolbar per Firefox. Ecco ciò che la barra degli strumenti appare come segue:

Nota: E 'una barra nella parte superiore della finestra del browser. , Viene mostrato come due immagini di cui sopra in modo da poter vedere l'intera barra.

Come si può vedere, si tratta con molte opzioni. Anche se non ho usato tutte le opzioni che la barra degli strumenti fornisce, vorrei una lista di alcuni dei miei preferiti.

Debug in tempo reale i CSS. Durante la visualizzazione mia pagina web, posso aggiornare il file CSS che compare a sinistra (o in basso) della pagina web (dalla barra degli strumenti, scegliete CSS / Modifica CSS) e vedere risultati immediati nella finestra del browser. Ciò è grande per la risoluzione dei problemi e per ottenere fino al nocciolo di come questi extra di 10 pixel di padding colpisce la mia pagina web. Anche se non posso salvare immediatamente i miei aggiornamenti CSS, io posso facilmente copiare le modifiche che io conosco già il lavoro e incolla nel foglio di stile CSS aperto nel mio editor web.

Validatori. Alto a destra della barra degli strumenti mostra rosso / bottoni verdi per indicare la validità del codice CSS e il codice Javascript. Se il pulsante è di colore rosso, ho semplicemente il mouse sopra il pulsante e si dice subito me l'errore è trovare. Posso fare clic su Console di errore per scoprire ulteriori dettagli, torna al codice (CSS o JavaScript), apportare la modifica, aggiornare la finestra del browser e vedere il pulsante di (s), si spera, diventi verde. La facilità di debug del codice è sorprendente - e di solito è rapidamente risolto.

Per ridimensionare una finestra. Dato che desidera che le pagine web di guardare bene in diverse risoluzioni dello schermo, voglio verificare come le pagine apparirà nelle finestre di diverse dimensioni. Con la barra degli strumenti per gli sviluppatori, si tratta di un clic del pulsante. Ho semplicemente selezionare una dimensione diversa dalla finestra l'opzione Ridimensiona ed immediatamente visualizza il sito in una dimensione diversa finestra.

Small Screen Rendering. Posso anche vedere ciò che la mia pagina web appare come su un dispositivo mobile con un solo clic di un pulsante. The Small Screen Rendering opzione è disponibile nel menu Varie.

Si integra con Joomla. Preferito Questo è in realtà la stessa come il primo di cui sopra, ma all'interno di un ambiente specifico. La Web Developer Toolbar è inestimabile all'interno dell'ambiente di Joomla. Senza la barra degli strumenti, sono costantemente in corso in Joomla, la navigazione verso Extensions / Template Manager, scegliendo il modello appropriato, facendo quello che penso siano le modifiche necessarie, il risparmio, poi tornare a una finestra del browser e verifica dei risultati. Wow! Con la barra degli strumenti per gli sviluppatori, mi basta selezionare 'edit CSS' dal menu CSS, apportare le modifiche necessarie, e visualizzare i risultati. Posso continuare a modificare il CSS finché non è giusto. Andando avanti e indietro tra le applicazioni Windows e n.. Una volta che il CSS è corretto, ho semplicemente evidenziare i cambiamenti, copiare il codice e incollarlo nel CSS template all'interno Joomla. Che è più veloce. È più facile. E 'molto semplice.

Questa è solo la punta dell'iceberg di quello che può fare questa barra degli strumenti per gli sviluppatori web. È facile da installare e facile da usare. I altamente consigliato fare una parte del vostro ambiente di sviluppo. E 'disponibile on a https: / / addons.mozilla.org/en-US/firefox/addon/60.