Crea il miglior profilo di sviluppo Web di Firefox

Se configurato correttamente, Firefox può diventare lo strumento di sviluppo Web definitivo, dandoti l'accesso diretto alla pagina su cui stai lavorando in modo da poter personalizzare la pagina in tempo reale, eseguire il debug di javascript o persino modificare l'html.

Crea un profilo separato per lo sviluppo Web

L'installazione di tutti questi strumenti di sviluppo renderà Firefox un browser molto pesante, quindi dovremmo prima creare un nuovo profilo per Firefox.

È possibile avviare un profilo separato contemporaneamente al profilo normale creando una nuova scorciatoia con questi argomenti, sostituendo WebDev con il nome del proprio profilo. C'è anche una spiegazione più dettagliata su come fare questo.

firefox.exe -P WebDev -no-remote

Ora che hai configurato Firefox con un profilo separato solo per lo sviluppo web, diamo un'occhiata alle estensioni che possiamo utilizzare per trasformare Firefox in uno strumento di sviluppo Web definitivo.

Estensioni di Web Dev must have

Queste sono tutte estensioni che uso regolarmente per lo sviluppo web.

Firebug

Firebug è l'estensione più potente per il debug di javascript, visualizzando CSS e html. Puoi apportare modifiche dinamiche al codice e ai CSS e utilizzarlo per eseguire il debug del tuo codice Ajax. È davvero la migliore estensione là fuori.

Estensione per sviluppatori Web

Una delle migliori estensioni per x anni di corsa. Questo è un must per qualsiasi sviluppatore, ma ne hai già sentito parlare.

Aardvark Extension

Questa estensione è un'estensione molto leggera che ti mostrerà facilmente gli elementi sulla pagina e la loro classe / id assegnata. È più semplice da usare rispetto all'estensione dello sviluppatore web per quei momenti in cui hai solo bisogno delle informazioni rapide per un elemento. Puoi anche usarlo per rimuovere elementi dalla pagina.

ColorZilla

Seleziona i colori facilmente. Non c'è più dolore nel trovare colori incorporati da qualche parte in un foglio di stile.

Visualizza sorgente con

È possibile impostare più profili di origine di visualizzazione per aprire l'origine in diverse applicazioni.

Validatore HTML

Questa estensione ti consente di convalidare facilmente la tua pagina HTML e di installarla nel pannello Visualizza sorgente.

Greasemonkey

Non è esattamente un'estensione per sviluppatori web, ma Greasemonkey è fantastico, non ultimo per la capacità di automatizzare le azioni comunemente eseguite, che è un ottimo risparmio di tempo per gli sviluppatori web.

Misuralo

Misurare facilmente una distanza sullo schermo con questa estensione. Dopo aver misurato un'area, puoi trascinare il rettangolo sullo schermo per utilizzarlo come confronto.

Vista IE / IE Tab / OperaView / FirefoxView / Vista Safari / IE View Lite

Queste estensioni (fai la tua scelta) ti permettono di visualizzare facilmente la pagina corrente in diversi browser. IE Tab ti consente persino di eseguire IE all'interno di una scheda, se tu fossi così inclinato.

Pulsante Cancella cache

Cancella la cache. Particolarmente utile per controllare le nuove modifiche CSS.

Riavvia Firefox

L'estensione Restart per Firefox è molto utile per chiudere e riavviare Firefox con tutte le schede e le sessioni intatte.

Tab Mix Plus

L'estensione Tab Mix Plus è un'estensione eccezionale in generale, ma ha alcune funzioni essenzialmente utili per gli sviluppatori Web: Duplicate Tab e Copy Tab URL.

YSlow

L'estensione YSlow è una nuova estensione di Yahoo che analizzerà la tua pagina e ti dirà dove stai commettendo errori. Ti darà anche un voto sulle prestazioni del tuo sito. Noterai il piccolo indicatore nell'angolo in basso a destra ... ti dirà la dimensione totale della pagina e il tempo di caricamento. Estensione molto utile, ma richiede l'estensione Firebug.

Dummy Lorem Ipsum

L'estensione del generatore Dummy Lipsum genererà per te contenuti fittizi basati sul famoso testo di Lorem Ipsum che è molto utile per creare contenuti falsi nel tuo sito.

Screengrab!

L'estensione Screengrab ti permetterà di prendere screenshot delle pagine, ma può fare qualcosa che un normale strumento di screenshot non può - può prendere un'immagine dell'intera pagina, non solo la parte visibile.

 

Ci sono tantissime altre estensioni che puoi usare, ma queste sono le migliori tra tutte quelle che ho visto. Se hai un'altra estensione che usi regolarmente, lascia una menzione nei commenti.

A questo punto, hai trasformato Firefox in uno strumento di sviluppo web all'avanguardia. Prenditi del tempo per imparare a usare Firebug in particolare.