15 Kommandolinjer med grafisk kommandolinje (GCLI) i Firefox til front-end-udviklere
Uanset hvor mange fancy knapper og menuer vi har, er der altid programmører, der værdsætter kommandolinjeadgang i deres arbejdsmiljø, især når det eliminerer en jagt for den rigtige knap eller menu der viser den nødvendige indstilling i vores synsfelt.
Firefox har haft en Grafisk kommandolinjetolk, eller kort sagt a GCLI i et stykke tid nu og har udvidet sit kommandosæt over tid. GCLI-kommandoerne giver udviklere en hurtig adgang til udviklings- og konfigurationsværktøjer. Det har også en autofuldførelse funktion; Hvis du trykker på Tab, mens du skriver en kommando, indtastes de kommandoer, der foreslås af GCLI.
Værktøjslinjen
Firefox ' GCLI er også kendt som Udvikler Toolbar. Der er tre måder for at åbne det:
- Tryk på genvejstasten Shift + F2.
- Klik på knappen “Åbn menuen” (hamburger) ikonet på højre side af adresselinjen (højre til startknappen), og klik derefter på knappen Udvikler> Udvikler Toolbar undermenu.
- Markér i øverste menulinje Værktøjer> Webudvikler> Udvikler Toolbar mulighed.
Når Developer Toolbar er åben, kan du se det nederst i browservinduet. Hvis du har besluttet at arbejde med GCLI, Jeg vil råde dig til bare at lade den åbne hele tiden mens du arbejder.
Lad os nu se nogle nyttige opgaver, du kan udføre i Firefox ved hjælp af dets GCLI.
1. Fjern sideelementer
Kommando: pagemod fjern element
Når du skal tage et kig på layoutet på en webside med nogle elementer fjernet, skriv bare kommandoen pagemod fjern element ind i Firefox Command Line for at fjerne disse elementer fra siden.
Værdien af .btn, kommandoen er skrevet som: pagemod fjern element a.btn.
Generelt er kommandoen pagemod bruges til ændre en side, ved enten at fjerne eller erstatte udvalgte elementer eller attributter.
2. Mål elementer
Kommando: måle
Hvis du vil kend målingen af et visuelt modul på en webside, er der et værktøj til det. Det “måle” værktøjet er tilgængeligt via både den typiske web-udvikler værktøjssæt og GCLI.
Skriv og indtast måle kommando ind i kommandolinjen, og markøren vil omdannes til en krydshår. Målingerne vil være vist i pixels ved siden af krydshår markøren, og er af bredde, højde og diagonal længde af det valgte område. At deaktivere værktøjet, genskabe måle kommando.
3. Rediger filer hurtigt
Kommando: redigere
Start redigering af din sides ressourcer med redigere kommando. Mens du skriver kommandoen, vil du se URI'er af alle tilgængelige ressourcer fra den side, som du kan gennemse ved hjælp af piletasterne op og ned. Når du har valgt den ressource, du vil redigere, skal du trykke på Tab for at udfylde forslaget automatisk, og trykke på Enter og redigeringsværktøj til browseren åbnes med den valgte fil.
4. Slå op ukendt CSS egenskaber
Kommando: mdn css
Denne ene er en smuk cool kommando-det er en slags a popup ordbog for CSS egenskaber. Hvis du kommer over en ukendt CSS-ejendom, og vil kontrollere, hvad den står for, skal du køre kommandoen mdn css i GCLI med
En pop op vises med “definition” for den CSS ejendom lige over værktøjslinjen. Definitionen er en Uddrag fra den officielle Mozilla Developer Network (MDN) side af den givne ejendom. MDNs ordliste over CSS-egenskaber, HTML-elementer og web-API'er er meget citeret.
Hvis teksten vist i popup-vinduet ikke er nok, og du vil gerne vide mere, Du kan klikke på linket Besøg MDN Page inde i popup-vinduet, og den respektive MDN-side for den pågældende ejendom åbnes. Lige nu er denne kommando kun tilgængelig for CSS-egenskaber.
5. Ændre størrelse på siden
Kommando: ændre størrelsen på
Redigeringsværktøjet giver dig mulighed for at se, hvordan din side ser ud ændres til specifikke dimensioner, som kan være nyttigt, når du vil forhåndsvise din sides udseende i enheder med andre dimensioner end den, du arbejder i.
Firefox har også a tastaturgenvej for at åbne dette værktøj: Ctrl + Skift + M (Cmd + Alt + M til Mac). Men hvis du allerede kend de nøjagtige dimensioner der skal bruges til resizing, er den hurtigste måde at køre resize kommando med de dimensioner, du har brug for.
Dimensionerne er fortolket i pixels. Når kommandoen er kørt, vil du se den ændrede side.
6. Genstart browseren
Kommando: genstart
Denne kommando er selvfølgelig. For at genstarte Firefox skal du blot skrive genstart i kommandolinjen, og tryk på Enter - kan komme til brug, når du installerer tilføjelser eller plugins, der kræver en genstart.
7. Åbn din Firefox-profilmappe
Kommando: mappe openprofile
Hver Firefox-bruger får deres egen lokal profil mappe at gemmer brugerspecifikke filer, f.eks. bogmærker og / krom folder. Når du personliggør Firefox, skal du måske se og ændre indholdet af denne mappe.
Den alternative måde at åbne denne mappe på er at klikke på knappen Vis mappe på om: støtte side. Ved at køre kommandoen mappe openprofile i Firefox Command Line, vil du se din profil mappe Åbn straks.
8. Kopier farveværdier
Kommando: eyedropper
Udover det faktum, at det kun understøtter hex-formatet, er eyedropper et glimrende værktøj til kopiering af farveværdien af enhver synlig nuance på en webside. Indtast kommandoen eyedropper ind i GCLI for at skifte værktøjets funktionalitet.
9. Test eksterne biblioteker
Kommando: indsprøjte
Hvis du vil teste nogle eksterne biblioteker På din webside, i stedet for at dykke i kildekoden for at lave de midlertidige tilføjelser, skal du bare bruge indsprøjte kommandoen til indsæt bibliotekerne. For eksempel, at medtage jQuery bare skrive indsprøjt jQuery.
Ved udførelse af kommandoen vil ressourcen være importeret til siden ved at indsætte en >
10. Tag screenshots
Kommando: skærmbillede
Det indbygget screenshot tager værktøj i Firefox er ganske kraftfuld. Du kan f.eks. Målrette individuelle elementer ved hjælp af CSS-selektorer, bruge en timer, anvende en DPR. Du kan endda tage et screenshot af bare kromdelen af browseren (område omkring brugerindhold) ved at bruge screenshot - chrome kommando.
Skærmbillederne gemmes i Download mappe af browseren i PNG-format.
11. Åbn linjer
Kommando: linealer
Endnu et andet cool værktøj fra Firefox, der er let tilgængeligt via GCLI. Det linealer kommando viser vandrette og lodrette linjer omkring siden. Mælingerne af herskerne er i pixels. Kør den samme kommando for at deaktivere linjalen.
12. Åbn konsollen og debugger
Kommando: konsol åben og dbg åben
Hvis tastaturet kortere til åbner webkonsollen eller debuggerværktøjet har gledet dig, ingen bekymringer, skriv bare den enkle kommando konsol åben eller dbg åben ind i Firefox Command Line for at åbne det respektive værktøj.
13. Tæl sideelementer
Kommando: QSA
Denne nifty kommando fra GCLI tager en hurtig folketælling af elementer på en webside som match enhver given CSS-vælger. For eksempel at få tæller af alle elementer på en side, brug qsa a kommando.
14. Aktiver eller deaktiver tilføjelser
Kommando: addon liste
Hvis du nogensinde har brug for at undersøge og administrere dine Firefox-tilføjelsesprogrammer, anbefaler jeg dig til brug GCLI-kommandoerne i stedet for menuen Add-ons fordi GCLI-versionen indeholder alle tilføjelser og plugins, herunder de forudinstallerede, Det er muligvis ikke opført i menuen Tilføjelser.
Du kan skifte tilføjelsesstatus i GCLI med kommandoen tilføjelse efterfulgt af den relevante underkommando enten gøre det muligt for eller deaktivere.
På demoen nedenfor kan du se hvordan man hurtigt kan deaktivere lomme i Firefox.
15. Administrer indstillinger
Kommando: pref show
Der er tonsvis af tilpasningsindstillinger Brugere kan få adgang via Firefox about: config side. De samme indstillinger kan ses og ændres ved hjælp af GCLI.
Brug af GCLI til at få adgang til tilpasningsindstillingerne er den hurtigere mulighed hvis du allerede ved hvilken konfiguration du vil se eller ændre. Til Indstil en værdi for en indstilling, brug præf sæt kommando og til nulstil en indstilling, type pref reset .
På demoen nedenfor kan du se, hvordan tjek URI det indsprøjt jQuery kommandoen har injiceret på siden (se afsnit # 9 i denne artikel):
