Firefox Developer Edition: il browser per lo sviluppo web

10 febbraio 2016

In occasione del decimo anniversario del noto browser web Firefox, gli sviluppatori di Mozilla hanno deciso di rilasciare una versione di questo browser dedicata alla sviluppatori web, vale a dire Firefox Developer Edition (oggi giunto alla versione 46). Lo scorso anno è stata resa disponibile anche la versione a 64 bit, per Windows, Linux e Mac OS X. Questa versione del browser di Mozilla si propone come strumento destinato allo sviluppo, offrendo funzionalità estremamente utili a chi si occupa di interfacce web a livello professionale, con strumenti molto sofisticati per realizzare animazioni, layout responsivi, script e quant’altro.

In questo articolo vedremo alcune delle caratteristiche principali di questo browser, e le funzionalità che offre per semplificare la vita di sviluppatori e web designer. Chiunque fosse interessato può scaricare questo browser dal sito ufficiale.

WebIDE

La prima funzionalità interessante che Firefoox Developer Edition ci offre è la WebIDE. Si tratta di uno strumento pensato per verificare il corretto funzionamento di una web app, ovvero una applicazione web pensata per essere interamente contenuta e visualizzata su un’app mobile. Con WebIDE è possibile aprire un simulatore di Firefox OS, entro cui possiamo installare sia la nostra app, sia i browser mobile Firefox (per Android), Safari (iOS) e Chrome (Android), risultando quindi in uno strumento di testing multipiattaforma.

Figura 1. L’interfaccia di WebIDE su Firefox Developer Edition (click per ingrandire)

L'interfaccia di WebIDE su Firefox Developer Edition

Per accedere a WebIDE, è sufficiente cliccare sull’icona presente a destra della barra degli indirizzi di Firefox Developer Edition.

Responsive Design View

Un altro strumento molto utile e potente offerto da Firefox Developer Edition è la modalità Responsive Design View, tramite cui possiamo modificare in modo semplice le dimensioni della pagina, verificando quindi il corretto funzionamento dei nostri layout responsivi. Per passare a questa modalità è sufficiente utilizzare la combinazione di tasti CTRL + SHIFT + M, e la finestra si modificherà come mostrato nell’immagine seguente:

Figura 2. La Responsive Design View di Firefox Developer Edition (click per ingrandire)

La Responsive Design View di Firefox Developer Edition

In questa modalità abbiamo la possibilità di modificare in maniera rapida la dimensione della viewport, sia scegliendo una delle risoluzioni predefinite, sia specificando le dimensioni in modo personalizzato. Inoltre, possiamo simulare la rotazione del dispositivo (tasto Ruota) nonchè abilitare gli eventi touch (tasto ).

Prelievo colore

Altro strumento utile (soprattutto a chi si occupa di web design) è il “prelievo colore” (eyedropper nella versione inglese). Il funzionamento è assolutamente identico agli strumenti analoghi presenti su software di grafica come GIMP o Photoshop (e generalmente contraddistinti da un’icona a forma di contagocce): andando sull’icona Strumenti di Sviluppo, e quindi su Prelievo colore, saremo in grado di ottenere il codice esadecimale corrispondente al colore. Facendo click con il tasto sinistro del mouse su un punto qualsiasi della pagina, copieremo inoltre tale codice esadecimale negli appunti del nostro sistema operativo, pronto per essere incollato su un foglio CSS o su qualsiasi altra componente del nostro progetto web.

Figura 3. Lo strumento “prelievo colore” di Firefox Developer Edition (click per ingrandire)

Lo strumento "prelievo colore" di Firefox Developer Edition

Visualizzazione 3D

Su Firefox Developer Edition (ma da poco anche sulla versione principale di Firefox) è attiva la possibilità di visualizzare gli elementi della pagina in una interessante visualizzazione 3D, alternativa a quella classica. In questa visualizzazione gli elementi del DOM possono essere considerati come le proiezioni sul piano 2D dello schermo di elementi tridimensionali: modificando quindi il punto di vista (tramite opportune rotazioni) è possibile capire meglio, ad esempio, in che modo sono sovrapposti gli elementi della pagina (e ciò può spesso tornare utile).

Figura 4. La visualizzazione 3D di Firefox (click per ingrandire)

La visualizzazione 3D di Firefox

Per accedere a questa modalità di visualizzazione, è necessario aprire il pannello degli strumenti di sviluppo (CTRL + SHIFT + I), e quindi cliccare sull’icona Strumenti di Sviluppo. Purtroppo, a causa dello sviluppo delle nuove versioni di Firefox in modalità multiprocesso (che dovrebbe garantire maggiori performance sui sistemi moderni), o per via di un supporto incompleto di alcuni driver video, la visualizzazione 3D potrebbe non essere disponibile sulle nuove edizioni di questo browser. È comunque auspicabile e plausibile che essa torni ad essere inclusa tra gli strumenti di sviluppo con i prossimi rilasci.

Lavorare con animazioni e filtri CSS

In uno dei rilasci recenti di Firefox Developer Edition, sono state aggiunte molte funzionalità relative allo sviluppo di animazioni, e molte di esse sono accessibili tramite il pannello Animazioni degli strumenti di sviluppo.

Figura 5. Pannello delle animazioni (click per ingrandire)

Pannello delle animazioni

Tramite il pannello delle animazioni è possibile fermare le animazioni relative ad ognuno degli elementi della pagina, così come eseguirle nuovamente o modificarle. Tra le possibilità offerte c’è anche quella di scegliere (ed eventualmente personalizzare) la curva di Bezier che governa l’evoluzione di ognuna delle animazioni. Tutto ciò in tempo reale, selezionando l’icona Bezier che compare all’interno del pannello dedicato alla regole CSS, di fianco ad animation-timing-function.

Figura 6. Personalizzazione delle curve di animazione (click per ingrandire)

Personalizzazione delle curve di animazione

In maniera analoga, si possono modificare i filtri CSS, visualizzando le modifiche direttamente nella pagina. In questo caso è sufficiente cliccare sull’icona CSSFilter (mostrata al fianco della parola riservata filter, tra le regole CSS) per accedere a questa funzionalità.

Figura 7. Personalizzazione dei filtri CSS (click per ingrandire)

Personalizzazione dei filtri CSS

Con il rilascio della versione 44 di Firefox Developer Edition, gli sviluppatori hanno messo a disposizione degli utenti una pagina web che funge da vero e proprio tutorial per mostrare l’utilizzo degli strumenti di sviluppo, mettendo particolarmente l’accento sulle funzionalità relative alle animazioni.

Altre funzionalità

Quelle fin qui descritte sono, ovviamente, solo le principali caratteristiche di Firefox Developer Edition. Ad esse se ne aggiungono molte altre, alcune anche molto interessanti (come ad esempio la possibilità di effettuare il debug delle WebSocket, interessante componente introdotto con HTML5). Tra le funzionalità non citate, un’altra riguarda la gestione della memoria, che può essere controllata tramite l’apposito pannello disponibile tra gli strumenti di sviluppo.

Figura 8. Pannello di gestione della memoria (click per ingrandire)

Pannello di gestione della memoria

Se vuoi aggiornamenti su Firefox Developer Edition: il browser per lo sviluppo web inserisci la tua e-mail nel box qui sotto:
 
X
Se vuoi aggiornamenti su Firefox Developer Edition: il browser per lo sviluppo web

inserisci la tua e-mail nel box qui sotto:

Ho letto e acconsento l'informativa sulla privacy

Acconsento al trattamento di cui al punto 3 dell'informativa sulla privacy