Uno sguardo agli strumenti di Firefox essenziali per gli sviluppatori Web

Firefox è stato a lungo il browser preferito per lo sviluppo web. Ci sono una serie di utili componenti aggiuntivi per fare il lavoro. In questo post, esamineremo alcuni componenti aggiuntivi che ritengo sia essenziale installare se si intende sviluppare Web. Inoltre scopriremo alcune delle funzionalità di questi componenti aggiuntivi che possono essere d'aiuto.

Prima di tutto, dobbiamo installare Firebug.

Firebug

Firebug è un componente aggiuntivo da installare per lo sviluppo web. Supponendo che tu non sappia dove trovare Firebug, puoi installarlo qui. Probabilmente, devi riavviare Firefox prima che venga attivato.

Dopodiché, puoi visualizzare Firebug in uno dei seguenti modi: segui questo menu Strumenti> Sviluppatori web> Firebug, fare clic con il tasto destro sulla pagina Web e scegliere “Ispeziona l'elemento con Firebug”.

In alternativa, puoi trovare un'icona di Firebug in Firefox e fare clic su di essa, questo mostrerà la finestra firebug;

Firebug è abbastanza identico a Chrome Developers Tools. ha un pannello per vedere la struttura HTML e gli stili, e anche un pannello della Console per vedere errori, avvisi e log. Ma, ho qualche altro suggerimento che, spero, tu possa trovare utile.

Regolazione del dimensionamento della scatola

L'elemento HTML è costituito da un modello di box CSS costituito da margini, spaziatura e dimensione oggetto (larghezza / altezza). Ci sono momenti in cui potremmo aver bisogno di modificare queste proprietà. In tal caso, è possibile selezionare uno degli elementi che si desidera modificare, quindi andare a disposizione pannello.

In questo pannello, troverai un'illustrazione di un modello di box CSS insieme alle sue informazioni, incluso il larghezza e altezza. Anche se queste due proprietà non sono specificate in CSS, questo strumento è abbastanza intelligente per determinare il valore. Se è necessario modificarli, è sufficiente fare clic sul valore e utilizzare il tasto freccia su o giù per aumentare o diminuire il valore.

Stili calcolati

In molte situazioni, probabilmente ti starai chiedendo perché alcuni stili non vengano applicati. Uno dei modi più facili e veloci, in particolare quando si hanno migliaia di linee di stili, è esaminandolo dal Stile calcolato pannello. Questo esempio mostra che il colore del testo del tag di ancoraggio viene sovrascritto da .pulsante classe, mentre lo sfondo del .pulsante la classe viene sovrascritta da .button.add.

Ispezione della famiglia di font (nel modo più semplice)

Probabilmente troverai spesso qualcosa di simile in famiglia di font proprietà in CSS con varie famiglie di caratteri. Sfortunatamente, questo non ci dirà specificatamente quale tipo di carattere assume il browser. Per semplificare l'identificazione, possiamo installare questa estensione Firebug FireFontFamily.

Al termine dell'installazione, carica la tua pagina Web e ora possiamo vedere chiaramente quale famiglia di caratteri è stata applicata. Nel nostro caso è in effetti Helvetica Neue (vedi colpo).

Analizzando le prestazioni

Questo potrebbe essere banalità, ma la velocità del sito è ora uno dei parametri di Google (algoritmo) nel decidere la qualità del sito web; il sito web che carica più velocemente è considerato ben sviluppato e classificato più in alto in termini di contenuto. Quindi la velocità non è qualcosa che dovrebbe essere trascurato.

Net Panel

Il primo posto che potrebbe essere necessario visitare per ispezionare le prestazioni del tuo sito web è il Netto pannello. Questo pannello registrerà la richiesta HTTP del tuo sito Web quando viene caricato. Questa schermata qui sotto mostra una pagina web che carica 42 richiesta e prende in giro 4,36 secondi caricare.

È quindi possibile ordinare la richiesta HTTP sul loro tipo come HTML, CSS e Immagini.

YSlow!

Inoltre, puoi anche installare YSlow, un'estensione per Firebug da Yahoo !. Dopo che è stato attivato, troverai un pannello aggiuntivo chiamato Yslow!.

Simile a Netto pannello, Yslow! registrerà le prestazioni della pagina web quando viene caricato, ma poi ti dirà anche perché la pagina web è lenta e cosa possiamo fare per risolverla. In questo esempio, eseguiamo un test su una pagina Web e viene valutato 86 per le prestazioni complessive, che è considerato OK.

Velocità della pagina

In alternativa, puoi anche impostare la velocità della pagina da Google. Simile a YSlow!, prova le prestazioni di velocità del sito Web, anche se il risultato del test potrebbe essere leggermente diverso. Questo esempio mostra che la stessa pagina web ha segnato 82 secondo la velocità della pagina.

Strumenti per sviluppatori Web

Web Developers Tools è ovviamente per gli sviluppatori web e ha un sacco di funzioni confezionate in questa barra degli strumenti. Ma questo sotto è uno dei miei preferiti.

Ispezione dell'immagine

Ci sono momenti in cui potremmo aver bisogno di ottenere informazioni sull'immagine dalla pagina web. Solitamente vedo le persone fare questo inciampando attraverso il browser o facendo clic destro sull'immagine e selezionare Visualizza informazioni sull'immagine, così:

Ma in questo modo non è abbastanza efficiente quando abbiamo bisogno di ottenere le informazioni da molte immagini. In tal caso, possiamo utilizzare il immagini funzionalità dal componente aggiuntivo. Questa funzione è facilmente accessibile dal menu Immagine dalla barra degli strumenti.

E, questo esempio mostra come mostriamo la dimensione dell'immagine e la dimensione del file immagine contemporaneamente:

Strumenti integrati di Firefox

Nelle versioni recenti, Firefox ha enormemente migliorato le sue funzionalità integrate per gli sviluppatori web, alcune delle quali sono:

Native Inspect Element

Questo nativo Ispeziona elemento da Firefox può sembrare simile a “Ispeziona l'elemento in Firebug”, ma in realtà agisce in modi diversi.

Questa volta, non approfondirò ulteriormente questa funzionalità, in quanto è essenzialmente identica al pannello Firebug HTML e CSS, sebbene con una differenza nel layout e nel design. Ma c'è una caratteristica distintiva che vale la pena provare, la Vista 3D.

utilizzando Vista 3D è possibile visualizzare la struttura della pagina web in profondità. Per attivare questa vista, è possibile trovare il pulsante in basso a destra del “Firefox Native Inspect Element”. Questo è come il Vista 3D sembra.

Non lo uso spesso come le altre funzionalità, ma è una funzionalità piuttosto innovativa di Mozilla che ammetto e sicuramente molto utile in determinate situazioni.

Vista Web Design

Dalla crescente popolarità di Responsive Web Design, Firefox ha avviato un segnalibro responsive al browser. Questo strumento ci consentirà di testare il nostro sito Web reattivo in diverse finestre senza ridimensionare la finestra del browser.

Questa vista è disponibile da questo menu: Strumenti> Web Developer> Web Design View. E questo è come appare la vista.

Editor di stili

Infine, se lavori spesso con CSS, probabilmente ti innamorerai di questa funzione. Dalla versione 11, Firefox ha aggiunto Editor di stili nei suoi strumenti di sviluppo nativi.

Questa funzione è interessante come la Vista Web Design, ti permette di modificare il CSS, vedere l'impatto istantaneamente sul browser e salvare le modifiche che riguardano direttamente il file sorgente CSS.

L'Editor di stili è disponibile dal seguente menu: Strumenti> Web Developer> Style Editor.

Pensiero finale

C'è un sacco di funzionalità racchiuse in questi componenti aggiuntivi di Firefox e quelle discusse qui sono solo alcune delle funzionalità che uso abbastanza frequentemente durante lo sviluppo web. Tuttavia, potresti avere alcuni suggerimenti che potrebbero essere utili per aumentare la produttività dello sviluppo web in Firefox.

Quali caratteristiche usi frequentemente? Puoi condividere i tuoi pensieri nella casella dei commenti qui sotto.