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 regolare 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 all'avanguardia.
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 Firefox è molto utile per chiudere e riavviare Firefox con tutte le schede e le sessioni intatte.
Tab Mix Plus
L'estensione Tab Mix Plus è una grande estensione 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 di 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.
A questo punto, hai trasformato Firefox in uno strumento di sviluppo Web all'avanguardia. Prenditi del tempo per imparare a usare Firebug in particolare.
