15 Kommandolinjer for grafisk kommandolinje (GCLI) i Firefox for utviklere av front-end
Uansett hvor mange fancy knapper og menyer vi har, er det alltid programmerere som setter pris på kommandolinjens tilgang i sitt arbeidsmiljø, spesielt når det er eliminerer en jakt på høyre knapp eller meny som viser den nødvendige innstillingen i vår synsfelt.
Firefox har hatt en Grafisk kommandolinjetolk, eller kort sagt a GCLI for en stund nå, og har utvidet sitt kommandosett over tid. GCLI-kommandoene gir utviklere en rask tilgang til utviklings- og konfigurasjonsverktøy. Det har også en autofullfør funksjonen; Hvis du trykker på Tab mens du skriver en kommando, blir kommandoene som foreslås av GCLI, angitt.
Verktøylinjen
Firefox GCLI er også kjent som Utvikler Verktøylinje. Det er tre måter å åpne den:
- Trykk på snarveien Shift + F2.
- Klikk på “Åpne menyen” (hamburger) ikonet på høyre side av adresselinjen (rett til Hjem-knappen), og klikk deretter på Utvikler> Utvikler Verktøylinje undermeny.
- I toppmenylinjen, kryss av Verktøy> Webutvikler> Utvikler Verktøylinje alternativ.
Når utviklerverktøylinjen er åpen, kan du se den nederst i nettleservinduet. Hvis du har bestemt deg for å jobbe med GCLI, Jeg vil råde å bare la den stå åpen hele tiden mens du arbeider.
La oss nå se noen nyttige oppgaver du kan utføre i Firefox bruker sin GCLI.
1. Fjern sideelementene
Kommando: pagemod fjern elementet
Når du trenger å ta en titt på layouten på en nettside med enkelte elementer fjernet, skriv bare kommandoen pagemod fjern elementet inn i Firefox-kommandolinjen for å fjerne disse elementene fra siden.
Verdien av .btn, kommandoen er skrevet som: pagemod fjern element a.btn.
Vanligvis kommandoen pagemod brukes til endre en side, ved å fjerne eller erstatte valgte elementer eller attributter.
2. Mål elementer
Kommando: måle
Hvis du vil kjenn måling av en visuell modul på en nettside, er det et verktøy for det. De “måle” verktøyet er tilgjengelig via både den typiske webutviklerverktøyet og GCLI.
Skriv inn og skriv inn måle kommando inn i kommandolinjen, og markøren vil bli til en krysshår. Målingene vil bli vist i piksler ved siden av krysshår markøren, og er av bredde, høyde og diagonal lengde av det valgte området. For å deaktivere verktøyet, gjenopprette måle kommando.
3. Rediger filer raskt
Kommando: redigere
Start redigerer sidens ressurser med redigere kommando. Mens du skriver kommandoen, vil du se URIer av alle tilgjengelige ressurser fra den siden, som du kan bla gjennom ved hjelp av piltastene opp og ned. Når du har valgt ressursen du vil redigere, trykker du på Tab for å fullføre forslaget, og trykk Enter, og redigeringsverktøy av nettleseren vil åpne med den valgte filen.
4. Slå opp ukjente CSS egenskaper
Kommando: mdn css
Denne er en ganske kul kommando-det er litt av a popup ordbok for CSS egenskaper. Hvis du kommer over en ukjent CSS-eiendom, og vil kontrollere hva den står for, kjør kommandoen mdn css i GCLI med
En popup vises med “definisjon” for den CSS-eiendommen rett over verktøylinjen. Definisjonen er en utdrag fra den offisielle siden Mozilla Developer Network (MDN) av den gitte eiendommen. MDNs ordliste over CSS-egenskaper, HTML-elementer og web-APIer er høyt citerte.
Hvis teksten som vises i popup-vinduet, ikke er nok, og du vil vite mer, Du kan klikke på linken Besøk MDN-siden i popup-vinduet, og den respektive MDN-siden for den egenskapen vil bli åpnet. For øyeblikket er denne kommandoen bare tilgjengelig for CSS-egenskaper.
5. Endre størrelse på siden
Kommando: endre størrelsen på
Med størrelsesverktøyet kan du se hvordan siden din ser ut resized til bestemte dimensjoner, som kan være nyttig når du vil forhåndsvise sidens utseende i enheter med dimensjoner forskjellig fra den du jobber med.
Firefox har også en tastaturgenvei for å åpne dette verktøyet: Ctrl + Shift + M (Cmd + Alt + M for Mac). Men hvis du allerede Kjenn de nøyaktige dimensjonene For å bli brukt til resizing, er den raskeste måten å kjøre endre størrelse på kommandoen med dimensjonene du trenger.
Dimensjonene er tolket i piksler. Når kommandoen er kjørt, vil du se den endrede siden.
6. Start nettleseren på nytt
Kommando: omstart
Denne kommandoen er selvsagt. For å starte Firefox på nytt, skriv bare inn omstart inn i kommandolinjen, og trykk Enter - kan være nyttig når du installerer tillegg eller plugin som krever en omstart.
7. Åpne Firefox-profilmappen din
Kommando: mappen openprofile
Hver Firefox-bruker får sine egen lokal profilmappe at lagrer brukerspesifikke filer, for eksempel bokmerker og / krom mappe. Når du personliggjør Firefox, må du kanskje se og endre innholdet i denne mappen.
Den alternative måten å åpne denne mappen på er å klikke Vis mappe-knappen på om: support side. Ved å kjøre kommandoen mappen openprofile i Firefox Command Line, vil du se profilmappen din åpne på en gang.
8. Kopier fargeværdier
Kommando: pipette
Annet enn det faktum at det bare støtter hex-formatet, er eyedropper et glimrende verktøy for kopierer fargeværdien av en hvilken som helst synlig nyanse på en nettside. Skriv inn kommandoen pipette inn i GCLI for å bytte verktøyets operasjonelle egenskaper.
9. Test eksterne biblioteker
Kommando: injisere
Hvis du vil teste noen eksterne biblioteker På websiden din, i stedet for å dykke inn i kildekoden for å gjøre de midlertidige tilleggene, bruk bare injisere kommandoen til sett inn bibliotekene. For eksempel, for å inkludere jQuery bare skriv inn injiser jQuery.
Ved å utføre kommandoen vil ressursen være importert til siden ved å sette inn en >
10. Ta skjermbilder
Kommando: skjermbilde
De innebygd skjermbilde tar verktøy i Firefox er ganske kraftig. For eksempel kan du målrette mot enkelte elementer ved hjelp av CSS-selektorer, bruk en timer, bruk a DPR. Du kan til og med ta et skjermbilde av bare krom-delen av nettleseren (område som omgir brukerinnholdet) ved å bruke skjermbilde - krom kommando.
Skjermbildene lagres i Last ned mappe av nettleseren i PNG-format.
11. Åpne linjaler
Kommando: herskere
Enda et annet kult verktøy fra Firefox som er lett tilgjengelig via GCLI. De herskere kommando viser horisontale og vertikale linjer rundt siden. Målingene av herskerne er i piksler. Kjør samme kommando for å deaktivere linjalen.
12. Åpne konsollen og debugger
Kommando: konsollen åpen og dbg åpen
Hvis tastaturet shortucts for åpner webkonsollen eller feilsøkingsverktøyet har gled deg, ingen bekymringer, bare skriv inn den enkle kommandoen konsollen åpen eller dbg åpen inn i Firefox kommandolinjen for å åpne det respektive verktøyet.
13. Count sideelementer
Kommando: QSA
Denne nifty kommandoen fra GCLI tar en rask telling av elementer i en nettside som matche hvilken som helst gitt CSS-väljare. For eksempel, for å få telle av alle elementer på en side, bruk qsa a kommando.
14. Aktiver eller deaktiver tilleggene
Kommando: tilleggsliste
Hvis du trenger å undersøke og administrere Firefox-tilleggene dine, anbefaler jeg deg bruk GCLI-kommandoene i stedet for tilleggsmenyen fordi GCLI-versjonen viser alle tillegg og plugins, inkludert de forhåndsinstallerte, Det kan ikke være oppført i Add-ons-menyen.
Du kan bytte til tilleggsstatus i GCLI med kommandoen tillegg etterfulgt av den relevante underkommandoen, enten Aktiver eller deaktivere.
På demoen nedenfor kan du se hvordan du raskt deaktiverer lomme i Firefox.
15. Administrer innstillinger
Kommando: pref show
Det er tonnevis av tilpasningsinnstillinger Brukerne kan få tilgang via Firefox about: config side. De samme innstillingene kan sees og endres ved hjelp av GCLI også.
Bruk av GCLI for å få tilgang til tilpassingsinnstillingene er jo raskere alternativet hvis du allerede vet hvilken konfigurasjon du vil vise eller endre. Til sett inn en verdi for en innstilling, bruke pref sett kommando og til tilbakestill en innstilling, type pref reset .
På demoen under kan du se hvordan sjekk URI de injiser jQuery kommandoen har injisert inn på siden (se avsnitt # 9 i denne artikkelen):
