Come utilizzare gli strumenti per sviluppatori Web di Firefox

Il menu per gli sviluppatori Web 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. Ispettore pagina

Ispezionare un elemento specifico facendo clic con il pulsante destro del mouse e selezionando Ispeziona ( o premendo Q ).È inoltre possibile avviare Inspector 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 sul pulsante Ispeziona sulla barra degli strumenti, passare il mouse sulla pagina e fare clic sul proprio 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

Fare clic sul pulsante HTML 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 si desidera visualizzare l'HTML della pagina in un file flat, è possibile selezionare View Page Source dal menu Web Developer.

CSS Inspector

Fare clic sul pulsante Style per vedere le regole CSS applicate all'elemento selezionato.

C'è anche un pannello delle proprietà CSS - passare da uno all'altro facendo clic sui pulsanti Regole e Proprietà .Per aiutarti a trovare proprietà specifiche, il pannello delle proprietà include una casella di ricerca.

È possibile modificare rapidamente il CSS dell'elemento 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. Qui, ho aggiunto il peso del font : grassetto; Regola CSS, rendendo il testo dell'elemento in grassetto.

JavaScript Scratchpad

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 fatto, fare clic sul menu Esegui e selezionare Esecuzione . Il codice viene eseguito nella scheda corrente.

Web Console

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 window.console.log( "Hello World");Codice JavaScript nello Scratchpad per stampare un messaggio dello 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

Ottieni altri strumenti L'opzione ti porta alla raccolta di componenti aggiuntivi di Strumenti 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.