Le nuove funzionalità di sviluppatore web di Firefox, in combinazione con fantastici componenti aggiuntivi per lo sviluppo Web come Firebug e la barra degli strumenti di sviluppo Web, rendono Firefox un browser ideale per gli sviluppatori web. Tutti gli strumenti sono disponibili sotto Web Developer nel menu di Firefox.
Page Inspector
Ispeziona un elemento specifico facendo clic con il tasto destro e selezionando Ispezionare (o premendo Q). Puoi anche avviare il Ispettore dal menu Web Developer.
Se si desidera scegliere un nuovo elemento, fare clic su Ispezionare pulsante sulla barra degli strumenti, passa il mouse sulla pagina e fai clic sul tuo elemento. Firefox evidenzia l'elemento sotto il tuo cursore.
Ispettore HTML
Clicca il HTML pulsante per visualizzare il codice HTML dell'elemento attualmente selezionato.
L'ispettore HTML ti consente di espandere e comprimere i tag HTML, semplificandone la visualizzazione a colpo d'occhio. Se vuoi vedere l'HTML della pagina in un file flat, puoi selezionare Visualizza origine pagina dal menu Web Developer.
Ispettore CSS
Clicca il Stile pulsante per vedere le regole CSS applicate all'elemento selezionato.
C'è anche un pannello delle proprietà CSS: passa da uno all'altro facendo clic su Regole e Proprietà pulsanti. Per aiutarti a trovare proprietà specifiche, il pannello delle proprietà include una casella di ricerca.
Puoi modificare il CSS dell'elemento al volo dal pannello Regole. Deselezionare le caselle di controllo per disattivare una regola, fare clic sul testo per modificare una regola o aggiungere le proprie regole all'elemento nella parte superiore del riquadro. Ecco, ho aggiunto il font-weight: bold; Regola CSS, rendendo il testo dell'elemento in grassetto.
Scratchpad di JavaScript
Anche lo Scratchpad ha visto un aggiornamento con Firefox 10 e ora contiene l'evidenziazione della sintassi. È possibile digitare il codice JavaScript per l'esecuzione nella pagina corrente.
Una volta che hai, fai clic su Eseguire menu e selezionare Correre. Il codice viene eseguito nella scheda corrente.
Console Web
La console Web sostituisce la vecchia console degli errori, che è stata deprecata e verrà rimossa in una versione futura di Firefox.
Che cos'è un messaggio sviluppatore web? È un messaggio stampato sull'oggetto window.console. Ad esempio, potremmo eseguire il window.console.log ("Hello World"); Codice JavaScript nello Scratchpad per stampare un messaggio sviluppatore sulla console. Gli sviluppatori Web possono integrare questi messaggi nel loro codice JavaScript per facilitare il debug.
A partire da Firefox 10, la console Web può funzionare in tandem con Page Inspector. La variabile $ 0 rappresenta l'oggetto attualmente selezionato nell'ispettore. Ad esempio, se si desidera nascondere l'oggetto attualmente selezionato, è possibile eseguire $ 0.style.display =”none” nella console.
Ottieni altri strumenti
Il Ottieni altri strumenti l'opzione ti porta alla raccolta di componenti aggiuntivi del Toolbox di Web Developer sul sito Web di Mozilla Add-Ons. Contiene alcuni dei migliori componenti aggiuntivi per gli sviluppatori web, tra cui Firebug e la barra degli strumenti di sviluppo web.
Se usi Firefox da alcuni anni, potresti ricordare DOM Inspector. Da allora, gli strumenti di sviluppo integrati di Firefox hanno fatto molta strada.
