Il Web Developer Toolbar per Firefox

Il Web Developer Toolbar per Firefox è spesso indicato come uno dei must-have strumenti per gli sviluppatori web. Dopo aver usato la barra degli strumenti all'interno del mio ambiente di progettazione, con tutto il cuore sono d'accordo. Taglia indietro nel tempo lo sviluppo di ore. Fa ciò che può essere operazioni ripetitive, quasi divertente. E mi lascia rapidamente un'occhiata a un sito web in una finestra di dimensioni diverse. Mi aiuta a eseguire il debug e validare il codice JavaScript e CSS.

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

Nota: Si tratta di 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 potete vedere, si tratta con molte opzioni. Anche se non ho usato tutte le opzioni che la barra degli strumenti offre, vorrei elencare alcuni dei miei preferiti.

Debugging tempo reale CSS. Durante la visualizzazione mia pagina web, posso aggiornare il file CSS che appare a sinistra (o inferiore) della pagina web (dalla barra degli strumenti, scegliere CSS / Edit CSS) e vedere risultati immediati nella finestra del browser. Questo è grande per la risoluzione dei problemi e per ottenere fino al nocciolo di come questi ulteriori 10 pixel di padding colpisce la mia pagina web. Anche se non posso risparmiare immediatamente i miei aggiornamenti CSS, posso copiare facilmente i cambiamenti che conosco già lavorano e incollarli nel foglio di stile CSS aperto nel mio editor web.

Validatori. In alto a destra della barra degli strumenti mostra i pulsanti rosso / verde per indicare la validità del codice CSS e il codice Javascript. Se il pulsante è rosso, ho semplicemente il mouse sopra il pulsante e subito mi dice l'errore che sta trovando. Posso fare clic sulla console degli errori per scoprire ulteriori dettagli, tornare al codice (CSS o Javascript), apportare la modifica, aggiornare la finestra del browser e vedere il pulsante (s), si spera, diventi verde. La facilità di debug del codice è incredibile - e di solito è rapidamente risolto.

Ridimensiona la finestra. Dato che desidera che le pagine web a guardare bene in diverse risoluzioni dello schermo, voglio verificare come le pagine sarà in finestre di dimensioni diverse. Con la Developer Toolbar, questo è un click del pulsante. Ho semplicemente selezionare una diversa dimensione della finestra con l'opzione Resize e immediatamente visualizzare il sito in una finestra di dimensioni diverse.

Small Screen Rendering. Posso anche vedere qual è la mia pagina web appare come su un dispositivo mobile con un semplice clic di un pulsante. Lo Small Screen Rendering opzione è disponibile nel menu Varie.

Si integra con Joomla. Questo preferito è in realtà lo stesso come il primo di cui sopra, ma all'interno di un ambiente specifico. Il Web Developer Toolbar è inestimabile all'interno dell'ambiente di Joomla. Senza la barra degli strumenti, sono costantemente andare in Joomla, la navigazione verso Extensions / Template Manager, scegliendo il modello appropriato, facendo quello che penso siano le necessarie modifiche, salvarlo, per poi tornare ad una finestra del browser e controllando i risultati. Wow! Con la Developer Toolbar, ho semplicemente selezionare 'modificare il CSS' dal menu CSS, apportare le modifiche necessarie, e visualizzare i risultati. Posso continuare modificando il CSS fino a che non è giusto. No andando avanti e indietro tra le finestre e applicazioni. Una volta che il CSS è corretto, ho semplicemente evidenziare le modifiche, copiare il codice e incollarlo nel template CSS all'interno di Joomla. E 'più veloce. E 'più facile. E 'molto semplice.

Questa è solo la punta di un iceberg in quella che può fare questa barra degli strumenti per gli sviluppatori web. È facile da installare e facile da usare. Ho consigliato che lo rende una parte del vostro ambiente di sviluppo. È disponibile sul a https://addons.mozilla.org/en-US/firefox/addon/60.