# 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.
Esiste anche Web Developer per Chrome, attualmente alla versione 0.4.3, distribuita il 2 febbraio 2013.
Web Developer ha vinto l'edizione del 2006 della competizione "Extend Firefox" ed è una delle estensioni raccomandate agli sviluppatori da parte di Mozilla.
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.

## Strumenti principali

I seguenti strumenti sono i principali di Web Developer Toolbar:

### 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":

### 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:

### 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.