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 modifica

I seguenti strumenti sono i principali di Web Developer Toolbar^[6]:

Impostazioni pagina modifica

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 modifica

Visualizza i messaggi registrati da una pagina web e interagisce con la pagina utilizzando JavaScript.

Debugger JavaScript modifica

Interrompe, scorre, esamina e modifica il JavaScript in esecuzione su una pagina.

Network Monitor modifica

Visualizza le richieste di rete effettuate quando viene caricata una pagina.

Strumenti per le prestazioni modifica

Analizza la reattività generale, JavaScript e le prestazioni del layout del sito.

Modalità di progettazione reattiva modifica

Guarda come apparirà e si comporterà il sito web o la app su diversi dispositivi e tipi di rete.

Ispettore dell'accessibilità modifica

Fornisce un mezzo per accedere all'albero dell'accessibilità della pagina, consentendo di verificare cosa manca o richiede comunque attenzione.

Pannello delle applicazioni modifica

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 modifica

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 modifica

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 modifica

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.