Il menu Web Developer di Firefox contiene strumenti per ispezionare pagine, eseguire codice JavaScript arbitrario e visualizzare richieste HTTP e altri messaggi. Firefox 10 ha aggiunto un nuovissimo strumento Inspector e Scratchpad aggiornato.
Le nuove funzionalità per sviluppatori web di Firefox, in combinazione con fantastici componenti aggiuntivi per sviluppatori web come Firebug e Web Developer Toolbar, rendono Firefox un browser ideale per gli sviluppatori web. Tutti gli strumenti sono disponibili in Web Developer nel menu di Firefox.
Impostazioni pagina
Ispezionare un elemento specifico facendo clic con il pulsante destro del mouse e selezionando Ispezionare (o premendo Q ). Puoi anche avviare il file Ispettore dal menu Web Developer.
Vedrai una barra degli strumenti nella parte inferiore dello schermo, che puoi utilizzare per controllare l'ispettore. L'elemento selezionato verrà evidenziato e gli altri elementi della pagina verranno disattivati.
Se desideri scegliere un nuovo elemento, fai 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 cursore.
È possibile navigare tra gli elementi padre e figlio facendo clic sui breadcrumb sulla barra degli strumenti.
HTML Inspector
Clicca il HTML per visualizzare il codice HTML dell'elemento attualmente selezionato.
L'ispettore HTML ti consente di espandere e comprimere i tag HTML, facilitando la visualizzazione a colpo d'occhio. Se desideri visualizzare l'HTML della pagina in un file flat, puoi selezionare Visualizza sorgente pagina dal menu Web Developer.
CSS Inspector
Clicca il Stile 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 riquadro Regole. Deseleziona una delle caselle di controllo per disattivare una regola, fai clic sul testo per modificare una regola o aggiungi le tue regole all'elemento nella parte superiore del riquadro. Qui ho aggiunto il spessore del carattere: grassetto; Regola CSS, che rende il testo dell'elemento in grassetto.
Scratchpad JavaScript
Anche Scratchpad ha visto un aggiornamento con Firefox 10 e ora contiene l'evidenziazione della sintassi. È possibile digitare il codice JavaScript da eseguire sulla pagina corrente.
Una volta fatto, fai clic su Eseguire menu e selezionare Correre. Il codice viene eseguito nella scheda corrente.
Web Console
La Web Console sostituisce la vecchia Error Console, che è stata deprecata e verrà rimossa in una futura versione di Firefox.
La console mostra quattro diversi tipi di messaggi, di cui puoi attivare o disattivare la visibilità: richieste di rete, messaggi di errore CSS, messaggi di errore JavaScript e messaggi dello sviluppatore web.
Che cos'è un messaggio di uno sviluppatore web? È un messaggio stampato sull'oggetto window.console. Ad esempio, potremmo eseguire il file window.console.log ("Hello World"); Codice JavaScript in Scratchpad per stampare un messaggio dello sviluppatore sulla console. Gli sviluppatori Web possono integrare questi messaggi nel loro codice JavaScript per aiutare con il debug.
Aggiorna la pagina e vedrai le richieste di rete generate e altri messaggi.
Usa la casella di ricerca per filtrare i messaggi; fare clic su una richiesta se si desidera visualizzare 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. Quindi, ad esempio, se vuoi nascondere l'oggetto attualmente selezionato, puoi correre $ 0.style.display = "none" nella console.
Se sei interessato a saperne di più sull'utilizzo della console e delle sue funzioni integrate, dai un'occhiata al Web Console page sul sito web di Mozilla Developer Network.
Ottieni più strumenti
Il Ottieni più strumenti ti porta alla raccolta di componenti aggiuntivi di Toolbox per sviluppatori Web sul sito Web di componenti aggiuntivi di Mozilla. Contiene alcuni dei file migliori componenti aggiuntivi per sviluppatori web , inclusi Firebug e la Web Developer Toolbar.
Se utilizzi Firefox da alcuni anni, potresti ricordare DOM Inspector. Da allora, gli strumenti di sviluppo integrati di Firefox hanno fatto molta strada.
