Firefox: 6 plugin indispensabili per web developer e non solo
Molto spesso ci troviamo nel bel mezzo dello sviluppo di un sito web o di un’applicazione web ad effettuare operazioni che ci distolgono dal flusso di lavoro, come ad esempio creare degli screenshots per illustrare al cliente (che magari si trova a 8oo km di distanza) delle funzionalità appena implementate senza perdere 2 ore al telefono. Capita spesso in orario di punta avere problemi di connessione mentre si lavora su un file css e perdere quasi 1 minuto ad ogni caricamento di pagina, oppure incontrare un cliente per il quale un pixel di troppo può causargli notti insonni. Insomma ci sono tanti piccoli problemi in cui si incorre che ci fanno perdere il ritmo mentale e del tempo prezioso. Quindi per tutti quelli che utilizzano Firefox per lo sviluppo web di seguito riporto 6 plugin che vi aiuteranno a risolvere problemi di routine senza separarsi dal nostro amatissimo browser:
1. Firebug – reperibile qui
Firebug rappresenta il plugin che rende firefox una scelta obbligata per lo sviluppo web, in esso sono racchiusi una serie di utility indispensabili per la risoluzione di problemi come:
- Errori JavaScript, file mancanti e molto altro, vi basterà dare un’occhiata alla console per sapere cosa non va nel nostro sito
- Analisi e modifica live di elementi del DOM, style CSS e di Layout
- Debugging avanzato del Javascript e possibilità di sviluppo del codice in modalità live attraverso la console
- Analisi del traffico HTTP e dell’utilizzo di cookie
2. Firebug Autocompleter
Quante volte vi è capitato di non ricordare il nome per intero di una funzione e dover consultare costantemente la documentazione online? Se utilizzerete la console di firebug per lo sviluppo live di codice java script, allora Firebug Autocompleter fa al caso vostro, infatti avrete a disposizione l’autocomplete delle funzioni di base di javascript e jQuery.
3. Web Developer – reperibile qui
Questo plugin aggiungerà a firefox una toolbar con delle utility molto interessanti, ve ne riporterò solo alcune, anche se in realtà sono veramente tantissime le funzioni implementate, come ad esempio:
- Ricaricare tutti i file css senza dover ricaricare l’intera pagina
- Visualizzare la grandezza e gli attributi di tutte le immagini
- Ridimensionare la finestra di firefox con le misure preferite (utile nei siti responsive)
- Misurare le distanze tra elementi e le effettive misure tramite la funzione Display Ruler
- Visualizzare elementi nascosti e modificare le impostazioni dei form
4. User Agent Switcher – reperibile qui
Oggi più che mai ci si trova spesso a verificare siti per il mobile, questo plugin ci permette di modificare l’user agent per visualizzare un sito con firefox simulando di essere su un dispositivo mobile (iPhone, Android ecc.). Questo ci permetterà di modificare il sito in versione mobile senza rinunciare ai nostri adoratissimi plugin (Firebug in primis).
5. Rainbow – reperibile qui
Questo plugin ci permetterà di catturare qualsiasi colore presente nella finestra di firefox evitando di fare screenshots o di utilizzare applicazioni esterne per conoscere il colore di un determinato elemento di cui si fatica a trovare lo style.
6. Awesome Screenshot Plus – Capture, Annotate ” More – reperibile qui
Grazie a questo plugin non dovrete più aprire photoshop per modificare uno screenshots, vi basterà scegliere quale parte della finestra selezionare (tutta la finestra o solo la parte visibile) e grazie al piccolo editor incorporato potrete inserire direttamente del testo o delle forme per creare delle guide per i vostri clienti. Inoltre dopo aver inserito ciò che vi interessa sull’immagine, potrete decidere se salvarla in png o condividerla per email, su twitter o salvarla temporaneamente sul sito del plugin.
