Il menu Web Developer di Firefox contiene strumenti per ispezionare pagine, eseguire codice Javascript arbitrario, vedere richieste HTTP e altri messaggi. Firefox 10 ha aggiunto uno strumento Inspector e uno Scratchpad aggiornato. Vediamo come utilizzarlo come strumento di sviluppo web.
Le nuove caratteristiche per lo sviluppo web di Firefox, in combinazione con fantastici plugin per sviluppatori web come Firebug e la Web Developer Toolbar, fanno di Firefox un browser ideale per gli sviluppatori web. Tutti gli strumenti sono disponibili sotto la voce Sviluppo web nel menu di Firefox.
Usare Firefox come strumento di sviluppo web: Ispezionatore di pagine
Ispezionate un elemento specifico facendo doppio click su di esso e selezionando Ispeziona (o premendo Q). Potete anche lanciare l’Ispezionatore dal menu di Sviluppo Web.
Vedrete una barra in fondo allo schermo, che potete usare per controllare l’ispezionatore. Il vostro elemento selezionato sarà evidenziato e gli altri elementi della pagina verranno oscurati.
Se volete scegliere un nuovo elemento, cliccate sul pulsante Ispeziona sulla barra, passate col mouse sulla pagina e cliccate sul vostro elemento. Firefox evidenzia gli elementi sotto il cursore.
Potete navigare tra elementi padre e figlio cliccando sugli elementi della barra.
Usare Firefox come strumento di sviluppo web: Ispezionatore HTML
Cliccate sul pulsante HTML per vedere il codice HTML dell’elemento correntemente selezionato.
L’ispezionatore HTML vi permette di espandere e collassare i tag HTML, rendendo semplice la visualizzazione in un solo colpo d’occhio. Se volete vedere l’HTML della pagina in un file semplice, potete selezionare Visualizza sorgente HTML della pagina dal menu Sviluppo Web.
Usare Firefox come strumento di sviluppo web: Ispezionatore CSS
Cliccate sul pulsante Stile per vedere le regole CSS applicate all’elemento selezionato.
C’è anche un pannello di proprietà CSS – passate dall’uno all’altro cliccando sui pulsanti Regole e Proprietà. Per aiutarvi a trovare specifiche proprietà, il pannello di proprietà include un box di ricerca.
Potete modificare il CSS dell’elemento al volo dal pannello Regole. Deselezionate una qualsiasi delle caselle per disattivare una regola, cliccate sul testo per cambiarla, o aggiungete la vostra regola all’elemento in alto nel pannello. Qui, ho aggiunto la regola “font-weight: bold;”, rendendo il testo dell’elemento in grassetto.
Usare Firefox come strumento di sviluppo web: Scratchpad JavaScript
Lo Scratchpad è stato aggiornato con Firefox 10, e ora contiene l’evidenziazione della sintassi. Potete inserire codice JavaScript da eseguire sulla pagina corrente.
Una volta che l’avete inserito, cliccate sul pulsante Esegui e selezionate Lancia. Il codice viene eseguito nella tab corrente.
Usare Firefox come strumento di sviluppo web: Console Web
La Web Console rimpiazza la vecchia console degli errori, che è stata deprecata e sarà rimossa nelle future versioni di Firefox.
La console mostra quattro tipi diversi di messaggi, di cui potete abilitare o disabilitare la visibilità – richieste di rete, messaggi di errore CSS e JavaScript e messaggi di sviluppo web.
Cos’è un messaggio di sviluppo web? È un messaggio stampato nell’oggetto window.console. Per esempio, potremmo eseguire il codice JavaScript window.console.log(“Hello World”); nello Scratchpad per scrivere un messaggio di sviluppo web nella console. Gli sviluppatori web possono integrare questi messaggi nei loro codici JavaScript per l’aiuto nel debugging.
Aggiornate la pagina e vedrete le richieste di rete generate e altri messaggi.
Utilizzate il box di ricerca per filtrare i messaggi; cliccate su una richiesta se volete vedere altri dettagli.
In Firefox 10, la Console Web può funzionare insieme con l’ispezionatore di pagine. La variabile $0 rappresenta l’elemento correntemente selezionato nell’ispezionatore. Quindi, per esempio, se volete nascondere l’elemento corrente, potreste eseguire $0.style.display=”none” nella console.
Se siete interessati e volete imparare di più sull’utilizzo della console e le sue funzioni integrate, date uno sguardo alla pagina della Web Console nel sito web della Rete di Sviluppo Mozilla.
Usare Firefox come strumento di sviluppo web: Ottenere altri strumenti
L’opzione Ottieni altri strumenti vi porta sulla collezione di plugin del Web Developer’s Toolbox sul sito delle estensioni Mozilla. Questo contiene alcune delle migliori estensioni per sviluppatori web, incluso Firebug e la Toolbar di sviluppo web, Web Developer Toolbar.
Vediamone Alcune
Usare Firefox come strumento di sviluppo web: Firebug
Firebug è la più potente estensione per fare il debug di javascript, vedere i css e l’HTML. Potete fare cambi dinamici al codice e ai CSS e utilizzarlo anche per fare il debug di codice Ajax. E’ di sicuro l’estensione migliore presente in circolazione.
Usare Firefox come strumento di sviluppo web: Web Developer Extension
Una delle migliori estensioni degli ultimi anni. E una estensione che ogni sviluppatore dovrebbe avere.
Usare Firefox come strumento di sviluppo web: Aardvark Extension
Questa estensione è molto leggere vi mostrerà facilmente gli elementi sulla pagine e le rispettive classi/id assegnate. E’ molto più facile da utilizzare rispetto all’ estensione web developer per tutti quei casi in cui dovete semplicemente ottenere delle informazioni di un elemento. E’ anche possibile rimuovere elementi dalla pagina.
Usare Firefox come strumento di sviluppo web: Colorzilla
Selezionare i colori in maniera facile. Niente più problemi di dover trovare il colore nascosto in qualche foglio di stile.
Usare Firefox come strumento di sviluppo web: View Source With
Questa estensione permette di estendere la voce del menù del tasto destro “visualizza codice” permettendo di utilizzare diverse applicazioni a questo scopo.
Usare Firefox come strumento di sviluppo web: HTML Validator
Questa estensione ti permette di validare il vostro codice HTML attraverso il menù di “visualizzazione codice”
Usare Firefox come strumento di sviluppo web: Greasemonkey
Questa non è esattamente una estensione per sviluppatori, ma Greasemonkey è fantastica, anche solo per la possibilità di automatizzare alcune operazioni comuni, che è un grande risparmio di tempo per gli sviluppatori web.
Volete dirci la vostra? lasciateci un commento!