Come utilizzare gli strumenti per sviluppatori Web di Firefox
Il menu Web Developer di Firefox contiene strumenti per l'ispezione di pagine, l'esecuzione di codice JavaScript arbitrario e la visualizzazione di richieste HTTP e altri messaggi. Firefox 10 ha aggiunto un nuovissimo strumento Inspector e un Scratchpad aggiornato.
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
Ispezionare un elemento specifico facendo clic con il tasto destro e selezionando Ispezionare (o premendo Q). Puoi anche avviare il Ispettore dal menu Web Developer.
Verrà visualizzata una barra degli strumenti nella parte inferiore dello schermo, che è possibile utilizzare per controllare l'ispettore. L'elemento selezionato verrà evidenziato e gli altri elementi della pagina saranno disattivati.
Se si desidera scegliere un nuovo elemento, fare clic su Ispezionare pulsante sulla barra degli strumenti, passa con il mouse sulla pagina e fai clic sul tuo elemento. Firefox evidenzia l'elemento sotto il tuo cursore.
È possibile spostarsi tra elementi padre e figlio facendo clic sui breadcrumb nella barra degli strumenti.
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 tra i due facendo clic sul pannello 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 sul 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.
La console visualizza quattro diversi tipi di messaggi, che è possibile attivare o disattivare la visibilità di: richieste di rete, messaggi di errore CSS, messaggi di errore JavaScript e messaggi dello sviluppatore Web.
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.
Aggiorna la pagina e vedrai le richieste di rete generate e altri messaggi.
Usa la casella di ricerca per filtrare i messaggi; clicca su una richiesta se vuoi vedere maggiori dettagli.
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.
Se sei interessato a saperne di più sull'utilizzo della console e delle sue funzioni integrate, consulta la pagina della console Web sul sito Web della rete di sviluppatori di Mozilla.
Ottieni altri strumenti
Il Ottieni altri strumenti opzione ti porta alla raccolta di componenti aggiuntivi del Toolbox per sviluppatori Web 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, puoi ricordare DOM Inspector. Da allora, gli strumenti di sviluppo integrati di Firefox hanno fatto molta strada.
