15 comandi della riga di comando grafica (GCLI) in Firefox per sviluppatori front-end

Non importa quanti pulsanti e menu fantasiosi abbiamo, ci sono sempre programmatori che apprezzano accesso alla riga di comando nel loro ambiente di lavoro, specialmente quando elimina una caccia al tasto o al menu giusto che mostra l'impostazione necessaria nella nostra linea di vista.

Firefox ha avuto un Interprete della riga di comando grafica, o in breve a GCLI per un po 'ora, e sta espandendo il suo comando impostato nel tempo. I comandi GCLI forniscono agli sviluppatori con a accesso rapido a strumenti di sviluppo e configurazione. Ha anche un funzione di completamento automatico; se premi Tab quando digiti un comando, verranno inseriti i comandi suggeriti da GCLI.

La barra degli strumenti

Firefox GCLI è anche conosciuto come Barra degli strumenti per sviluppatori. Ci sono tre modi per aprirlo:

1. Premi la scorciatoia da tastiera Maiusc + F2.
2. Clicca il “Apri Menu” (hamburger) sul lato più a destra della barra degli indirizzi (direttamente al pulsante Home), quindi fare clic su Sviluppatore> Barra degli strumenti dello sviluppatore sottomenu.
3. Nella barra dei menu in alto, selezionare Strumenti> Web Developer> Barra degli strumenti per sviluppatori opzione.

Una volta aperta la barra degli strumenti per sviluppatori, puoi vederla nella parte inferiore della finestra del browser. Se hai deciso di lavorare con GCLI, Consiglierei di lasciarlo sempre aperto mentre lavoro.

Ora vediamo alcune attività utili che puoi eseguire in Firefox usando il suo GCLI.

1. Rimuovere gli elementi della pagina

Comando: pagemod remove element

Quando hai bisogno di dare un'altra occhiata al layout di una pagina web con alcuni elementi rimossi, basta digitare il comando pagemod remove element nella riga di comando di Firefox per rimuovere quegli elementi dalla pagina.

Il valore di deve essere un selettore CSS valido nella pagina. Di ', in una pagina vuoi rimuovere tutti i link (in particolare) della classe .btn, il comando è scritto come: pagemod rimuove l'elemento a.btn.

Generalmente, il comando pagemod è usato per modifica di una pagina, rimuovendo o sostituendo elementi o attributi scelti.

2. Misura gli elementi

Comando: misurare

Se lo desidera conoscere la misura di qualsiasi modulo visivo su una pagina web, c'è uno strumento per questo. Il “misurare” strumento è accessibile tramite il set di strumenti di sviluppo web tipico e GCLI.

Digita e inserisci il misurare comando nella riga di comando, e il cursore lo farà trasformarsi in un mirino. Le misure saranno mostrato in pixel vicino al cursore del mirino e sono del larghezza, altezza e lunghezza diagonale dell'area selezionata. Per disabilitare lo strumento, rieseguire il misurare comando.

3. Modifica rapidamente i file

Comando: modificare

Inizio modificare le risorse della tua pagina con il modificare comando. Mentre scrivi il comando, vedrai il URI di tutte le risorse disponibili da quella pagina, che puoi sfogliare usando i tasti freccia su e giù. Dopo aver selezionato la risorsa che desideri modificare, premi Tab per completare automaticamente il suggerimento, quindi premi Invio e strumento di editor del browser si aprirà con il file scelto.

4. Cercare proprietà CSS non familiari

Comando: mdn css

Questo è un comando piuttosto interessante, è una specie di a dizionario popup per proprietà CSS. Se si incontra una proprietà CSS non familiare e si desidera verificare il significato del comando, eseguire il comando mdn css nel GCLI con sostituito dal nome effettivo di quella proprietà sconosciuta.

Apparirà un popup con il “definizione” per quella proprietà CSS proprio sopra la barra degli strumenti. La definizione è un estratto dalla pagina ufficiale della Mozilla Developer Network (MDN) della proprietà data. Il glossario MDN delle proprietà CSS, degli elementi HTML e delle web API è molto citato.

Se il testo mostrato nel popup non è abbastanza, e tu voglio sapere di più, puoi cliccare sul link Visita la pagina MDN all'interno del popup e verrà aperta la rispettiva pagina MDN per quella proprietà. Al momento, questo comando è disponibile solo per le proprietà CSS.

5. Ridimensiona pagina

Comando: ridimensiona a

Lo strumento di ridimensionamento ti consente di vedere come appare la tua pagina ridimensionato a dimensioni specifiche, che può essere utile quando desideri visualizzare in anteprima l'aspetto della tua pagina in dispositivi con dimensioni diverse da quella in cui stai lavorando.

Firefox ha anche un scorciatoia da tastiera per aprire questo strumento: CTRL + MAIUSC + M (Cmd + Alt + M per Mac). Ma se già conoscere le dimensioni esatte da utilizzare per il ridimensionamento, il modo più rapido è quello di eseguire il ridimensionare comando con le dimensioni che ti servono.

Le dimensioni sono interpretato in pixel. Una volta eseguito il comando, vedrai la pagina ridimensionata.

6. Riavvia il browser

Comando: ricomincia

Questo comando è evidente. Per riavviare Firefox, basta digitare ricomincia nella riga di comando e premere Invio: può tornare utile quando si installano componenti aggiuntivi o plug-in che richiedono un riavvio.

7. Apri la cartella del tuo profilo di Firefox

Comando: cartella openprofile

Ogni utente di Firefox ottiene il suo proprio cartella del profilo locale quello memorizza i file specifici dell'utente, come i segnalibri e il /cromo cartella. Quando personalizzi Firefox potresti dover visualizzare e modificare i contenuti di questa cartella.

Il modo alternativo per aprire questa cartella è fare clic sul pulsante Mostra cartella sul A proposito di: supporto pagina. Eseguendo il comando cartella openprofile nella riga di comando di Firefox, vedrai la tua cartella del profilo apri subito.

8. Copia i valori del colore

Comando: contagocce

Oltre al fatto che supporta solo il formato esadecimale, eyedropper è uno strumento geniale per copia del valore del colore di qualsiasi tonalità visibile su una pagina web. Inserisci il comando contagocce nel GCLI per attivare l'operatività dello strumento.

9. Test delle librerie esterne

Comando: iniettare

Se lo desidera prova alcune librerie esterne sulla tua pagina web, invece di immergerti nel codice sorgente per fare le aggiunte temporanee, usa semplicemente il iniettare comando a inserisci le librerie. Ad esempio, per includere jQuery basta digitare iniettare jQuery.

All'esecuzione del comando, la risorsa sarà importato nella pagina inserendo a > taggare nel sezione del documento HTML.

10. Fai screenshot

Comando: immagine dello schermo

Il strumento di acquisizione screenshot incorporato in Firefox è abbastanza potente. Ad esempio, puoi scegliere come target singoli elementi usando selettori CSS, utilizzare un timer, applicare a dpr. Puoi persino fare uno screenshot di solo la parte cromata del browser (area che circonda il contenuto dell'utente) usando il screenshot --chrome comando.

Gli screenshot sono salvati in Scarica la cartella del browser in formato PNG.

11. Righelli aperti

Comando: governanti

Un altro fantastico strumento di Firefox facilmente accessibile tramite GCLI. Il governanti comando visualizza righelli orizzontali e verticali intorno alla pagina. Le misure dei righelli sono in pixel. Esegui lo stesso comando per disattivare il righello.

12. Apri la console e il debugger

Comando: console aperta e dbg aperto

Se la tastiera si riduce per aprire la console Web o lo strumento debugger ti è sfuggito di mente, non preoccuparti, basta digitare il semplice comando console aperta o dbg aperto nella riga di comando di Firefox per aprire il rispettivo strumento.

13. Conta gli elementi della pagina

Comando: QSA

Questo comando elegante da GCLI prende un rapido censimento di elementi in una pagina web che abbinare qualsiasi dato selettore CSS. Ad esempio, per ottenere il conto di tutti elementi in una pagina, usa il qsa a comando.

14. Abilitare o disabilitare i componenti aggiuntivi

Comando: lista degli addon

Se hai bisogno di controllare e gestire i componenti aggiuntivi di Firefox, ti consiglio di farlo utilizzare i comandi GCLI anziché il menu Componenti aggiuntivi perché la versione GCLI elenca tutti i componenti aggiuntivi e plug-in, compresi quelli preinstallati, potrebbe non essere elencato nel menu Componenti aggiuntivi.

Puoi commutare lo stato del componente aggiuntivo in GCLI con il comando Aggiungi su seguito dal relativo sottocomando, entrambi abilitare o disattivare.

Nella demo qui sotto puoi vedere come disabilitare rapidamente Pocket in Firefox.

15. Gestisci le impostazioni

Comando: pref show

Ci sono tonnellate di impostazioni di personalizzazione gli utenti possono accedere tramite Firefox about: config pagina. Le stesse impostazioni possono essere visualizzate e modificate anche tramite GCLI.

L'utilizzo di GCLI per accedere alle impostazioni di personalizzazione è l'opzione più veloce se già conosci la configurazione che desideri visualizzare o modificare. A imposta un valore per un'impostazione, utilizzare il pref set comando, e a ripristinare un'impostazione, genere pref reset .

Nella demo qui sotto puoi vedere come controlla l'URI il iniettare jQuery comando è stato iniettato nella pagina (vedere la sezione # 9 in questo articolo):