Utilizzo di Firefox Developer Edition per lo sviluppo Web

Cosa starai creando

Firefox Developer Edition è stato rilasciato da Mozilla durante la celebrazione del decimo anniversario di Firefox lo scorso anno. Recentemente, sono state rese disponibili anche versioni a 64 bit di Firefox Developer Edition per Windows, Linux e Mac OS X. Firefox Developer Edition offre una facile accessibilità per un'ampia gamma di strumenti di sviluppo che aiutano a rendere il debug facile e aiutano in modo più rapido e professionale sviluppo. Puoi scaricare l'ultima versione di Firefox Developer Edition da qui. Diamo un'occhiata ad alcune delle fantastiche funzionalità di Firefox Developer Edition.

WebIDE

Con WebIDE è possibile creare, modificare, testare o eseguire il debug di app Web eseguendole sul simulatore di Firefox OS. Se si sta creando una nuova app Web, viene creata anche una piastra di app di base o una piastra di caldaia più completa insieme a una struttura di directory appropriata. WebIDE consente inoltre di collegare Firefox Devtools a molti altri browser Web come Safari (iOS), Firefox (Android) e Chrome (Android).

Responsive Design View

La visualizzazione reattiva del design in Firefox può essere richiamata premendo CTRL + MAIUSC + M. Puoi controllare la reattività della tua applicazione web con l'aiuto di questa utility. Offre una serie di opzioni come l'impostazione delle dimensioni del dispositivo che si desidera emulare, la rotazione dello schermo (passaggio dalla modalità verticale a quella orizzontale), la simulazione di eventi tattili e la cattura dello screenshot della pagina Web in modalità reattiva.

Strumento contagocce

Lo strumento Eyedropper è uno strumento davvero fantastico che ti aiuta a conoscere il valore esadecimale di qualsiasi colore in una pagina web (proprio come lo strumento contagocce in Photoshop). Questo aiuta a trovare il colore di qualsiasi elemento o immagine che deve sfogliare il suo codice tramite Element Inspector. Facendo clic sul colore, copia il valore negli Appunti!

Browser Inspector

Abbiamo lavorato tutti con l'ispettore degli elementi, ora che diavolo è Browser Inspector? Bene, Browser Inspector è usato per il debug del browser Firefox stesso. Se si desidera modificare il colore della barra degli URL o, ad esempio, modificare la curva delle schede con risultati non persistenti, è possibile farlo tramite il Controllo del browser. Anche se lo stesso risultato può essere ottenuto tramite Scratchpad, Browser Inspector è ottimo se non sei uno sviluppatore di Firefox o se vuoi solo testare le tue modifiche!

Vista 3D

Ora questo, ritengo sia la funzione più impressionante di Firefox Developer Tools. Puoi guardare il rendering 3D di qualsiasi sito Web, in cui ogni blocco di elevazione rappresenta un elemento, in ordine di annidamento nel codice del sito web. Questo ti aiuta a sapere quali elementi sono annidati in quale elemento. Puoi accedere alla Vista 3D premendo Ctrl + Maiusc + C e quindi selezionando l'icona a forma di scatola sul lato destro del pannello appena aperto.

Scratchpad

Puoi aprire lo Scratchpad premendo Maiusc + F4. Scratchpad può essere utilizzato per eseguire cluster di codice javascript e modificare, eseguire ed esaminare i risultati. Il modo in cui si differenzia dalla Console del browser è che la Console del browser, è progettata per interpretare una singola riga di codice alla volta, ma con Scratchpad puoi lavorare con blocchi di codice più grandi eseguendoli in vari modi a seconda di come vuoi utilizzare il produzione.

Conclusione

Firefox Developer Edition offre una vasta gamma di strumenti per la creazione, il debug, il monitoraggio delle prestazioni, il debug del browser e l'estensione del DevTools. Spiegare tutti gli strumenti va oltre lo scopo di questo articolo. Tuttavia, puoi dare un'occhiata all'elenco completo degli strumenti qui. Speriamo che l'introduzione agli strumenti sopra citati ti aiuti nelle tue faccende quotidiane di sviluppo web.