10 utili strumenti per gli sviluppatori di Firefox che dovresti sapere

Essendo Firefox "browser per sviluppatori" ha molti ottimi strumenti per facilitare il nostro lavoro. Puoi trovare ulteriori informazioni sulla sua collezione di strumenti nella pagina degli Strumenti per sviluppatori di Firefox e puoi anche provare il loro Developer Edition Browser che ha più funzioni e strumenti che vengono testati.

Per questo post, ho elencato 10 strumenti a portata di mano ti potrebbe piacere dalla sua collezione di strumenti per sviluppatori. Ho anche dimostrato cosa possono fare questi strumenti con le GIF e in che modo accedervi per una rapida consultazione.

1. Visualizza righelli orizzontali e verticali

Firefox ha uno strumento di righello che visualizza i righelli orizzontali e verticali con unità pixel sulla pagina. Lo strumento è utile per organizzare i tuoi elementi attraverso la pagina.

Per accedere ai righelli attraverso il menu, vai a: ☰> Sviluppatore > Barra degli strumenti per sviluppatori (collegamento: MAIUSC + F2). Una volta visualizzata la barra degli strumenti nella parte inferiore della pagina, digitare governanti e premere accedere.

Per fare in modo che appaia nella finestra degli strumenti per sviluppatori, vai su "Opzioni strumenti". Sotto la sezione "Pulsanti degli strumenti disponibili", seleziona "Attiva / disattiva i righelli per la pagina"checkbox.

2. Cattura schermate usando selettori CSS

Sebbene la barra degli strumenti di Firefox ti consenta di catturare schermate dell'intera pagina o di porzioni visibili, a mio parere il metodo del selettore CSS è più utile per catturare screenshot di singoli elementi così come per elementi visibili al passaggio del mouse solo (come i menu).

Per fare screenshot attraverso il menu, vai su.> Sviluppatore > Barra degli strumenti per sviluppatori (shortcutShift + F2). Una volta visualizzata la barra degli strumenti nella parte inferiore della pagina, digitare screenshot --selector any_unique_css_selector e premere accedere.

Per fare in modo che appaia nella finestra degli strumenti per sviluppatori: fai clic su "Opzioni Toolbox" e nella sezione "Pulsanti disponibili Toolbox", seleziona "Fai uno screenshot a pagina intera " casella di controllo.

3. Scegli i colori dalle pagine web

Firefox ha uno strumento per la selezione dei colori incorporato con il nome di "Eyedropper". Per accedere allo strumento "Eyedropper" attraverso il menu vai a ☰> Sviluppatore > contagocce.

Per fare in modo che appaia nella finestra degli strumenti per sviluppatori: fai clic su "Opzioni Toolbox" e sotto "Pulsanti casella degli strumenti disponibili" controlla "Prendi un colore dalla pagina"checkbox.

4. Visualizza il layout della pagina in 3D

La visualizzazione di pagine Web in 3D aiuta con problemi di layout. Sarai in grado di vedere i diversi elementi stratificati molto più chiaramente nella vista 3D. Per visualizzare la pagina Web in 3D, fare clic sul pulsante dello strumento "Vista 3D".

Per visualizzarlo nella finestra degli strumenti per sviluppatori, fai clic su "Opzioni Toolbox" e sotto "Pulsanti disponibili Toolbox" seleziona "Vista 3D"checkbox.

5. Visualizza lo stile del browser

Gli stili del browser sono formati da due tipi: lo stile predefinito che un browser assegna per ogni elemento e gli stili specifici del browser (quelli con il prefisso del browser). Dando uno sguardo agli stili del browser che sarete in grado di diagnosticare eventuali problemi di sostituzione nel foglio di stile e anche conoscere gli stili specifici del browser esistenti .

Per accedere agli "stili del browser" attraverso il menu, vai a ☰> Sviluppatore > Ispettore. Quindi fai clic sulla scheda "Calcolata" nella sezione destra e seleziona la casella di controllo "Stili del browser".

Puoi anche aprire il "Ispettore"seleziona la scorciatoia Ctrl + Maiusc + C e poi accedi a" Browser style ".

6. Disabilita JavaScript per la sessione corrente

Per la best practice e la compatibilità con lo screen reader, si consiglia sempre di codificare qualsiasi sito Web in modo tale che la sua funzionalità non sia ostacolata in un ambiente javascript disabilitato. Per testare tali ambienti, puoi disabilita il JavaScript per la sessione in cui stai lavorando.

Per disabilitare JavaScript per la sessione corrente fai clic su "Opzioni Toolbox" e nella sezione "Impostazioni avanzate" controlla il "Disabilita JavaScript* "casella di controllo.

7. Nascondi lo stile CSS dalla pagina

Proprio come JavaScript, a causa di problemi di accessibilità, è meglio progettare siti Web in modo tale le pagine dovrebbero essere ancora leggibili anche senza stili. Per vedere come appare la pagina senza alcuno stile, puoi disabilitarli negli strumenti di sviluppo.

Per rimuovere qualsiasi stile CSS (in linea, interno o esterno) applicato su una pagina Web, solo fare clic sul simbolo dell'occhio dei fogli di stile elencati nella scheda "Editor di stile". Fare nuovamente clic per tornare alla visualizzazione originale.

Per accedere a "Style Editor" tramite il menu vai a ☰> Sviluppatore > Editor di stili (collegamento: MAIUSC + F7.

8. Visualizzare in anteprima la risposta del contenuto HTML a una richiesta

Gli strumenti di sviluppo di Firefox hanno un'opzione per visualizzare in anteprima le risposte del tipo di contenuto HTML. Ciò consente allo sviluppatore di visualizzare in anteprima qualsiasi reindirizzamento 302 e verificare se nella risposta sono state visualizzate o meno informazioni riservate.

Per accedere a "Anteprima" dal menu vai a ☰> Sviluppatore > Rete (scorciatoia: Ctrl + Shift + Q. Quindi apri la pagina web di tua scelta o ricarica la pagina corrente, clicca sul richiesta desiderata (con risposta HTML) dall'elenco delle richieste e fai clic su "Anteprima"scheda nella sezione destra.

9. Anteprima della pagina Web in diverse dimensioni dello schermo

Per testare una pagina Web per la sua reattività utilizzare la "Vista Progettazione Responsive", a cui si può accedere ☰> Sviluppatore > Responsive Design View o con la scorciatoia: Ctrl + Maiusc + M.

Per visualizzare il pulsante dello strumento "Modalità progettazione reattiva", fai clic su "Opzioni Toolbox" e sotto la casella "Pulsanti degli strumenti disponibili", seleziona la casella "Modalità progettazione reattiva".

10. Esegui JavaScript sulle pagine

Per le esecuzioni di JavaScript veloci su qualsiasi pagina web, basta usare lo strumento "Scratchpad" di Firefox. Per accedere a "Scratchpad" attraverso il menu vai a; .> Sviluppatore > Scratchpad oppure utilizzare la scorciatoia da tastiera Maiusc + F4.

Per fare in modo che il pulsante dello strumento "Scratchpad" appaia nella finestra degli strumenti di sviluppo per un utilizzo rapido: fai clic su "Opzioni degli strumenti"e sotto il"Pulsanti disponibili per gli strumenti"sezione controlla il" Scratchpad " casella di controllo.