La versione stabile di Web Developer è la versione 1.2.5, distribuita il 29 aprile 2013.[1]
Esiste anche Web Developer per Chrome, attualmente alla versione 0.4.3, distribuita il 2 febbraio 2013 [2].
Web Developer ha vinto l'edizione del 2006 della competizione "Extend Firefox"[3] ed è una delle estensioni raccomandate agli sviluppatori da parte di Mozilla.[4]
Fra le varie funzionalità, Web Developer consente di visualizzare le dimensioni dei singoli componenti di una pagina web (testo, immagini, script eseguiti localmente), con l'esclusione di video o musica inviati in modalità streaming[5].
Strumenti principali
I seguenti strumenti sono i principali di Web Developer Toolbar[6]:
Impostazioni pagina
Visualizza e modifica il contenuto e il layout della pagina. Visualizza molti aspetti della pagina, inclusi il box model, le animazioni e i layout della griglia.
Console web
Visualizza i messaggi registrati da una pagina web e interagisce con la pagina utilizzando JavaScript.
Debugger JavaScript
Interrompe, scorre, esamina e modifica il JavaScript in esecuzione su una pagina.
Network Monitor
Visualizza le richieste di rete effettuate quando viene caricata una pagina.
Strumenti per le prestazioni
Analizza la reattività generale, JavaScript e le prestazioni del layout del sito.
Modalità di progettazione reattiva
Guarda come apparirà e si comporterà il sito web o la app su diversi dispositivi e tipi di rete.
Ispettore dell'accessibilità
Fornisce un mezzo per accedere all'albero dell'accessibilità della pagina, consentendo di verificare cosa manca o richiede comunque attenzione.
Pannello delle applicazioni
Fornisce strumenti per l'ispezione e il debug di app Web moderne (note anche come app Web progressive). Ciò include l'ispezione dei lavoratori dell'assistenza e dei manifesti delle app Web .
Altri strumenti
Anche questi strumenti per sviluppatori sono integrati in Firefox. A differenza degli "Strumenti principali"[6]:
Memoria
Mostra quali oggetti mantengono la memoria in uso.
Ispettore di archiviazione
Ispeziona i cookie, l'archiviazione locale, il database indicizzato e l'archiviazione della sessione presenti in una pagina.
Visualizzatore proprietà DOM
Ispeziona le proprietà, le funzioni e così via del DOM della pagina
Contagocce
Seleziona un colore dalla pagina.
Editor di stile
Visualizza e modifica gli stili CSS per la pagina corrente.
Screenshot
Cattura uno screenshot dell'intera pagina o di un singolo elemento.
Misura una parte della pagina
Misura un'area specifica di una pagina web.
Righelli
Sovrappone i righelli orizzontali e verticali su una pagina web
Collegamento degli strumenti per sviluppatori
Se si aprono gli strumenti per sviluppatori utilizzando le scorciatoie da tastiera o le voci di menu equivalenti, verranno indirizzati al documento ospitato dalla scheda attualmente attiva. Ma si possono anche collegare gli strumenti a una varietà di altri obiettivi, sia all'interno del browser corrente che in browser o dispositivi diversi[6]:
about: debugging
Debug di componenti aggiuntivi, schede dei contenuti e worker in esecuzione nel browser.
Connessione a Firefox per Android
Collega gli strumenti per sviluppatori a un'istanza di Firefox in esecuzione su un dispositivo Android.
Connessione a iframe
Collega gli strumenti per sviluppatori a un iframe specifico nella pagina corrente.
Connessione ad altri browser
Collega gli strumenti per sviluppatori a Chrome su Android e Safari su iOS.
Debug del browser
Per impostazione predefinita, gli strumenti per sviluppatori sono allegati a una pagina Web o a un'app Web. Ma puoi anche collegarli al browser nel suo insieme. Ciò è utile per lo sviluppo di browser e componenti aggiuntivi.
Console del browser
Visualizza i messaggi registrati dal browser stesso e dai componenti aggiuntivi ed esegui il codice JavaScript nell'ambito del browser.
Casella degli strumenti del browser
Collega gli strumenti per sviluppatori al browser stesso.
