15 Graphical Command Line (GCLI) Commando's in Firefox voor front-end ontwikkelaars

Het maakt niet uit hoeveel mooie knoppen en menu's we hebben, er zijn altijd programmeurs die het op prijs stellen opdrachtregel toegang in hun werkomgeving, vooral wanneer het elimineert een jacht op de juiste knop of het juiste menu die de benodigde instelling in onze gezichtslijn weergeeft.

Firefox heeft een Grafische opdrachtregelinterpreter, of in het kort a GCLI al een tijdje en breidde zijn commando in de loop van de tijd uit. De GCLI-opdrachten voorzien ontwikkelaars van een snelle toegang tot ontwikkelings- en configuratietools. Het heeft ook een autocomplete-functie; Als u tijdens het typen van een opdracht op Tab drukt, worden de opdrachten van GCLI ingevoerd.

De werkbalk

Firefox GCLI is ook bekend als Werkbalk voor ontwikkelaars. Er zijn drie manieren om het te openen:

1. Druk op de sneltoets Shift + F2.
2. Klik op de “Open Menu” (hamburger) pictogram aan de rechterkant van de adresbalk (rechts van de knop Home) en klik vervolgens op Ontwikkelaar> Developer Toolbar submenu.
3. Tik in de menubalk bovenaan op Hulpmiddelen> Webontwikkelaar> Werkbalk voor ontwikkelaars keuze.

Zodra de werkbalk Ontwikkelaar geopend is, kunt u deze zien onderaan het browservenster. Als je hebt besloten om met de te werken GCLI, Ik zou adviseren om het tijdens het werk gewoon open te laten.

Laten we nu enkele handige taken bekijken die u in Firefox kunt uitvoeren gebruikmakend van zijn GCLI.

1. Verwijder pagina-elementen

Commando: pagemod element verwijderen

Wanneer u de lay-out van een webpagina opnieuw moet bekijken met enkele elementen verwijderd, typ gewoon de opdracht pagemod element verwijderen in de Firefox-opdrachtregel om die elementen van de pagina te verwijderen.

De waarde van moet een zijn geldige CSS-selector op de pagina. Stel dat je op een pagina alle links (specifiek) van de klas wilt verwijderen .BTN, de opdracht is geschreven als: pagemod element verwijderen a.btn.

Over het algemeen het commando pagemod is gebruikt voor het wijzigen van een pagina, door geselecteerde elementen of attributen te verwijderen of te vervangen.

2. Meet elementen

Commando: maatregel

Als je wilt ken de meting van elke visuele module op een webpagina, is daar een hulpmiddel voor. De “maatregel” tool is toegankelijk via zowel de typische toolset voor webontwikkelaars als de GCLI.

Typ en voer het maatregel commando in de commandolijn, en de cursor zal verander in een vizier. De metingen zullen zijn weergegeven in pixels naast de draadkruiscursor, en zijn van de breedte, hoogte en diagonale lengte van het geselecteerde gebied. Om de tool uit te schakelen, herhaal de maatregel commando.

3. Bewerk bestanden snel

Commando: Bewerk

Begin de bronnen van uw pagina bewerken met de Bewerk commando. Terwijl u de opdracht typt, ziet u de URI's van alle beschikbare bronnen vanaf die pagina, die u kunt bladeren met de pijltoetsen omhoog en omlaag. Nadat u de resource die u wilt bewerken hebt geselecteerd, drukt u op Tab om de suggestie automatisch in te vullen en drukt u op Enter en vervolgens op editor tool van de browser wordt geopend met het gekozen bestand.

4. Zoek onbekende CSS-eigenschappen op

Commando: mdn css

Deze is een best coole opdracht - het is een soort van een popup-woordenboek voor CSS-eigenschappen. Als u een onbekende CSS-eigenschap tegenkomt en wilt controleren waarvoor deze functie staat, voert u de opdracht uit mdn css in de GCLI met vervangen door de werkelijke naam van dat onbekende eigendom.

Er verschijnt een pop-up met de “definitie” voor die CSS-eigenschap recht boven de werkbalk. De definitie is een uitpakken van de officiële Mozilla Developer Network (MDN) -pagina van de gegeven eigenschap. MDN's woordenlijst van CSS-eigenschappen, HTML-elementen en web-API's worden sterk geciteerd.

Als de tekst in de pop-up niet genoeg is, en jij wil meer weten, je kunt op de link klikken Bezoek MDN-pagina in de pop-up en de betreffende MDN-pagina voor die eigenschap wordt geopend. Op dit moment is deze opdracht alleen beschikbaar voor CSS-eigenschappen.

5. Formaat van pagina wijzigen

Commando: formaat wijzigen in

Met de tool voor het wijzigen van de grootte kunt u zien hoe uw pagina eruitziet verkleind naar specifieke dimensies, Dit kan handig zijn als u een voorbeeld van het uiterlijk van uw pagina wilt bekijken op apparaten met andere dimensies dan de dimensie waarin u werkt.

Firefox heeft ook een sneltoets om dit hulpmiddel te openen: Ctrl + Shift + M (Cmd + Alt + M voor Mac). Maar als je al ken de exacte afmetingen om te gebruiken voor het wijzigen van de grootte, de snelste manier is om de verkleinen commando met de afmetingen die je nodig hebt.

De afmetingen zijn geïnterpreteerd in pixels. Nadat de opdracht is uitgevoerd, ziet u de gewijzigde pagina.

6. Start de browser opnieuw

Commando: herstarten

Deze opdracht is vanzelfsprekend. Om Firefox opnieuw te starten, typt u gewoon herstarten in de opdrachtregel en druk op Enter. Dit kan handig zijn wanneer u invoegtoepassingen of plug-ins installeert waarvoor opnieuw opstarten vereist is.

7. Open uw Firefox-profielmap

Commando: map openprofiel

Elke Firefox-gebruiker krijgt zijn eigen lokale profielmap dat slaat gebruikersspecifieke bestanden op, zoals bladwijzers en de / chrome map. Wanneer u Firefox personaliseert, moet u mogelijk de inhoud van deze map bekijken en wijzigen.

De alternatieve manier om deze map te openen, is door op de knop Map weergeven op de knop te klikken about: support pagina. Door het commando uit te voeren map openprofiel in de Firefox-opdrachtregel ziet u uw profielmap open tegelijk.

8. Kopieer kleurwaarden

Commando: pipet

Afgezien van het feit dat het alleen het hex-formaat ondersteunt, is pipet een geweldig hulpmiddel voor de kleurwaarde kopiëren van elke zichtbare tint op een webpagina. Voer de opdracht in pipet in de GCLI om de werking van het gereedschap te wijzigen.

9. Test externe bibliotheken

Commando: injecteren

Als je wilt test een aantal externe bibliotheken op uw webpagina, in plaats van in de broncode te duiken om de tijdelijke toevoegingen te maken, gebruikt u gewoon de injecteren commando om plaats de bibliotheken. Als u bijvoorbeeld jQuery wilt opnemen, typt u gewoon injecteer jQuery.

Bij het uitvoeren van de opdracht zal de resource zijn geïmporteerd naar de pagina door een > tag in de sectie van het HTML-document.

10. Maak screenshots

Commando: screenshot

De ingebouwde tool voor het nemen van screenshot in Firefox is vrij krachtig. U kunt bijvoorbeeld afzonderlijke elementen op CSS-selectors richten, een timer gebruiken, een toepassen dpr. U kunt zelfs een screenshot maken van alleen het chrome gedeelte van de browser (gebied rondom de gebruikersinhoud) met behulp van de screenshot --chrome commando.

De schermafbeeldingen worden opgeslagen in de Download map van de browser in PNG-formaat.

11. Open linialen

Commando: heersers

Nog een andere coole tool van Firefox die gemakkelijk toegankelijk is via GCLI. De heersers commando geeft horizontale en verticale linialen weer rond de pagina. De afmetingen van de linialen zijn in pixels. Voer dezelfde opdracht uit om de liniaal uit te schakelen.

12. Open de console en debugger

Commando: console open en dbg open

Als het toetsenbord wegvalt voor openen van de webconsole of het hulpprogramma voor foutopsporing heb je gedacht, geen zorgen, typ gewoon het eenvoudige commando console open of dbg open in de Firefox-opdrachtregel om de respectieve tool te openen.

13. Tel pagina-elementen

Commando: QSA

Deze handige opdracht van GCLI maakt een snelle census van elementen in een webpagina die overeenkomen met een bepaalde CSS-selector. Bijvoorbeeld om alles te krijgen elementen op een pagina, gebruik de qsa a commando.

14. Schakel add-ons in of uit

Commando: lijst met toevoegingen

Als u ooit uw Firefox-add-ons wilt onderzoeken en beheren, raad ik u aan dit te doen gebruik de GCLI-opdrachten in plaats van het menu Add-ons omdat de GCLI-versie alle add-ons en plug-ins vermeldt, inclusief de vooraf geïnstalleerde, die mogelijk niet wordt vermeld in het menu Add-ons.

U kunt de add-on-status in de GCLI wijzigen met de opdracht toevoeging gevolgd door het relevante deelcommando in staat stellen of onbruikbaar maken.

Op de onderstaande demo kunt u zien hoe je Pocket snel uitschakelt in Firefox.

15. Beheer instellingen

Commando: pref show

Er zijn heel veel aanpassingsinstellingen gebruikers hebben toegang via Firefox's about: config pagina. Dezelfde instellingen kunnen ook met de GCLI worden bekeken en gewijzigd.

Het gebruik van GCLI voor toegang tot de aanpassingsinstellingen is de snellere optie als u al weet welke configuratie u wilt bekijken of wijzigen. Naar een waarde instellen voor een instelling, gebruik de pref set commando, en naar reset een instelling, type pref-reset .

Op de onderstaande demo kun je zien hoe controleer de URI de injecteer jQuery commando is in de pagina geïnjecteerd (zie sectie # 9 in dit artikel):