Web Developer Toolbar

Web Developer è un'estensione per Mozilla Firefox e i browser basati su Gecko (Flock, Seamonkey e Iceweasel) che aggiunge al browser una barra degli strumenti con molti strumenti utili agli sviluppatori web.

L'estensione è sviluppata da Chris Pederick, autore anche dell'estensione User Agent Switcher.

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.