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 | modifica wikitesto]
I seguenti strumenti sono i principali di Web Developer Toolbar[6]:
Impostazioni pagina[modifica | modifica wikitesto]
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 | modifica wikitesto]
Visualizza i messaggi registrati da una pagina web e interagisce con la pagina utilizzando JavaScript.
Debugger JavaScript[modifica | modifica wikitesto]
Interrompe, scorre, esamina e modifica il JavaScript in esecuzione su una pagina.
Network Monitor[modifica | modifica wikitesto]
Visualizza le richieste di rete effettuate quando viene caricata una pagina.
Strumenti per le prestazioni[modifica | modifica wikitesto]
Analizza la reattività generale, JavaScript e le prestazioni del layout del sito.
Modalità di progettazione reattiva[modifica | modifica wikitesto]
Guarda come apparirà e si comporterà il sito web o la app su diversi dispositivi e tipi di rete.
Ispettore dell'accessibilità[modifica | modifica wikitesto]
Fornisce un mezzo per accedere all'albero dell'accessibilità della pagina, consentendo di verificare cosa manca o richiede comunque attenzione.
Pannello delle applicazioni[modifica | modifica wikitesto]
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 | modifica wikitesto]
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 | modifica wikitesto]
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 | modifica wikitesto]
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.
Note[modifica | modifica wikitesto]
- ^ Web Developer for Firefox History
- ^ Chrome Web Store
- ^ (EN) "Extend Firefox" competition results
- ^ (EN) Firefox Add-ons: Recommended Add-ons Archiviato il 24 ottobre 2008 in Internet Archive.
- ^ Conoscere la dimensione effettiva di una pagina web, su ainu.it, 20 Novembre 2008. URL consultato il 5 maggio 2019 (archiviato dall'url originale l'11 settembre 2013).
- ^ a b c Firefox Developer Tools | MDN, su developer.mozilla.org. URL consultato il 1º marzo 2021.
Collegamenti esterni[modifica | modifica wikitesto]
- Sito ufficiale, su chrispederick.com.
- (EN) Mozilla Add-ons, su addons.mozilla.org.
