15 Príkazy grafického príkazového riadku (GCLI) vo Firefoxe pre vývojárov Front-End

Nezáleží na tom, koľko fiktívnych tlačidiel a ponúk máme, vždy sú programátori, ktorí oceňujú prístup k príkazovým riadkom v ich pracovnom prostredí, najmä keď to eliminuje hľadanie pravého tlačidla alebo ponuky ktorý zobrazuje potrebné nastavenie v našom zornom poli.

Firefox mal Grafický tlmočník príkazového riadku, alebo skrátka a GCLI na chvíľu, a rozširuje svoje príkazové sety v priebehu času. Príkazy GCLI poskytujú vývojárom a rýchly prístup k nástrojom vývoja a konfigurácie. Má tiež funkcia automatického dopĺňania; ak stlačíte kláves Tab pri zadávaní ľubovoľného príkazu, zadajú sa príkazy navrhnuté GCLI.

Panel s nástrojmi

Firefox je GCLI je tiež známy ako Panel s nástrojmi pre vývojárov. Existujú tri spôsoby otvoriť ho:

1. Stlačte klávesovú skratku Shift + F2.
2. Kliknite na tlačidlo “Otvorte ponuku” (hamburger) na pravej strane panela s adresou (priamo na tlačidlo Domov) a potom kliknite na tlačidlo Vývojár> Panel s nástrojmi pre vývojárov submenu.
3. V hornom paneli ponuky začiarknite políčko Nástroje> Webový vývojár> Panel s nástrojmi pre vývojárov voľba.

Akonáhle je Panel s nástrojmi pre vývojárov otvorený, môžete ju vidieť v dolnej časti okna prehliadača. Ak ste sa rozhodli pracovať s GCLI, Poradil by som, aby som ho nechal otvorený po celý čas počas práce.

Teraz uvidíme niektoré užitočné úlohy, ktoré môžete vykonať vo Firefoxe pomocou GCLI.

1. Odstráňte prvky stránky

Command: prvok odstránenia stránky

Keď sa budete musieť opäť pozrieť na rozloženie webovej stránky s niektorými prvkami odstránené, stačí zadať príkaz prvok odstránenia stránky do príkazového riadku programu Firefox, aby ste odstránili tieto prvky zo stránky.

Hodnota musí byť a platný volič CSS na stránke. Povedzte na stránke, ktorú chcete odstrániť všetky odkazy (konkrétne) triedy .btn, príkaz je napísaný ako: pagemod odstrániť prvok a.btn.

Vo všeobecnosti príkaz pagemod sa používa pre úprava stránky, buď odstránením alebo nahradením zvolených prvkov alebo atribútov.

2. Meranie prvkov

Command: zmerať

Ak chceš poznať meranie akéhokoľvek vizuálneho modulu na webovej stránke, je tu nástroj. “zmerať” nástroj je prístupný prostredníctvom bežného nástroja pre vývojárov webových stránok a GCLI.

Zadajte a zadajte reťazec zmerať príkaz do riadku a kurzor premeniť na kríž. Merania budú zobrazené v pixeloch vedľa kurzora kríženia, a sú z šírka, výška a uhlopriečka vybranej oblasti. Zakázať nástroj, znova spustite znova zmerať príkaz.

3. Rýchlo upravte súbory

Command: editovať

štart upravovať zdroje vašej stránky s editovať Príkaz. Pri písaní príkazu uvidíte URI všetkých dostupných zdrojov z tejto stránky, ktorú môžete prehľadávať pomocou šípok so šípkou hore a dole. Po výbere zdroja, ktorý chcete upraviť, stlačte kláves Tab na automatické dopĺňanie návrhu a stlačte Enter a nástroj pre prehliadač sa otvorí s vybratým súborom.

4. Vyhľadajte neznáme vlastnosti CSS

Command: mdn css

Toto je veľmi pekný príkaz - je to trochu a popup slovník pre vlastnosti CSS. Ak narazíte na neznámy objekt CSS a chcete skontrolovať, čo to znamená, spustite príkaz mdn css v GCLI s nahradený skutočným názvom tohto neznámeho majetku.

Zobrazí sa vyskakovacie okno s “definícia” pre túto vlastnosť CSS priamo nad panelom s nástrojmi. Definícia je výpis z oficiálnej stránky Mozilla Developer Network (MDN) danej nehnuteľnosti. Slovník MDN o vlastnostiach CSS, prvkoch HTML a webových API je veľmi citovaný.

Ak text v popupu nestačí, a vy chcete vedieť viac, môžete kliknúť na odkaz Prejdite na stránku MDN v rozbaľovacom okne a otvorí sa príslušná stránka MDN pre danú vlastnosť. Momentálne je tento príkaz dostupný iba pre vlastnosti CSS.

5. Zmeniť veľkosť stránky

Command: zmeniť veľkosť na

Nástroj na zmenu veľkosti vám umožňuje zistiť, ako stránka vyzerá zmenené na konkrétne rozmery, čo môže byť užitočné, ak chcete zobraziť vzhľad stránky v zariadeniach s rozmermi odlišnými od tých, v ktorých pracujete.

Firefox má tiež klávesovou skratkou na otvorenie tohto nástroja: Ctrl + Shift + M (Cmd + Alt + M pre Mac). Ale ak už ste poznať presné rozmery ktoré sa majú použiť na zmenu veľkosti, najrýchlejším spôsobom je spustenie veľkosť príkaz s rozmermi, ktoré potrebujete.

Rozmery sú interpretované v pixeloch. Po spustení príkazu sa zobrazí stránka s veľkosťou.

6. Reštartujte prehliadač

Command: reštart

Tento príkaz je samozrejmý. Ak chcete reštartovať Firefox, stačí zadať reštart do príkazového riadka a stlačte kláves Enter - môže sa stať vhodným pri inštalácii doplnkov alebo zásuvných modulov, ktoré vyžadujú reštartovanie.

7. Otvorte zložku profilu Firefoxu

príkaz: priečinok openprofile

Každý používateľ Firefox dostane ich Vlastná zložka miestneho profilu že ukladá súbory špecifické pre používateľov, ako sú záložky a / chróm zložky. Keď personalizujete Firefox, možno budete musieť prezerať a upravovať obsah tejto zložky.

Alternatívnym spôsobom, ako otvoriť tento priečinok, je kliknúť na tlačidlo Zobraziť priečinok na priečinku about: podporu str. Spúšťaním príkazu priečinok openprofile v príkazovom riadku prehliadača Firefox sa zobrazí vaša zložka profilu otvoriť naraz.

8. Kopírovať hodnoty farieb

Command: kvapkadlo

Iné ako skutočnosť, že podporuje iba formát hexadecimálne, kvapkadlo je vynikajúcim nástrojom kopírovanie hodnoty farby akéhokoľvek viditeľného sfarbenia na webovej stránke. Zadajte príkaz kvapkadlo do GCLI prepínať funkčnosť nástroja.

9. Test vonkajšie knižnice

Command: vstreknúť

Ak chceš test niektorých externých knižníc na svojej webovej stránke namiesto potápania do zdrojového kódu, aby sa dočasné doplnky, stačí použiť vstreknúť príkaz na vložte knižnice. Napríklad, aby ste zaradili jQuery, jednoducho napíšte vstreknite jQuery.

Pri vykonaní príkazu bude zdrojom importované na stránku vložením položky a > značku do časti HTML dokumentu.

10. Získajte snímky obrazovky

Command: screenshot

zabudovaný nástroj na snímanie obrazovky vo Firefoxe je dosť silný. Napríklad, môžete zacieliť jednotlivé prvky pomocou voličov CSS, použiť časovač, aplikovať a DPR. Môžete dokonca urobiť snímku obrazovky len chrómová časť prehliadača (oblasť obklopujúca užívateľský obsah) pomocou screenshot - chrome príkaz.

Obrázky obrazovky sa ukladajú do priečinka Stiahnite priečinok prehliadača vo formáte PNG.

11. Otvorte pravítka

príkaz: pravítka

Ešte ďalší cool nástroj od Firefoxu, ktorý je ľahko dostupný cez GCLI. pravítka príkaz zobrazuje horizontálne a vertikálne pravítka okolo stránky. Merania pravítok sú v pixeloch. Spustite ten istý príkaz, aby ste deaktivovali pravítko.

12. Otvorte konzolu a debugger

Command: konzola otvorená a dbg otvorené

Ak klávesová skratka pre otvorenie webovej konzoly alebo nástroja na ladenie ste si prekonali svoju myseľ, bez starostí, jednoducho zadajte jednoduchý príkaz konzola otvorená alebo dbg otvorené do príkazového riadku programu Firefox a otvorte príslušný nástroj.

13. Počítanie prvkov stránky

Command: QSA

Tento šikovný príkaz od GCLI vykonáva rýchle sčítanie prvkov na webovej stránke zodpovedajú ľubovoľnému výberu CSS. Napríklad, aby ste získali pocet všetkých prvky na stránke, použite qsa a príkaz.

14. Povolenie alebo zakázanie doplnkov

Command: zoznam adries

Ak ste niekedy potrebovali prehľadávať a spravovať doplnky pre Firefox, odporúčam vám použite skôr príkazy GCLI než ponuku Add-ons pretože verzia GCLI obsahuje zoznam všetkých doplnkov a doplnkov, vrátane predinštalovaných, ktoré nemusia byť uvedené v ponuke doplnkov.

Stav prídavného modulu môžete prepínať pomocou príkazu GCLI addon za ktorým nasleduje príslušný podriadený príkaz umožniť alebo zakázať.

Na demo nižšie môžete vidieť ako rýchlo zakázať Pocket vo Firefoxe.

15. Spravujte nastavenia

Command: pref show

Existuje veľa ton nastavenia prispôsobenia používateľom prístup cez Firefox about: config str. Rovnaké nastavenia je možné zobraziť a upraviť aj pomocou GCLI.

Používanie GCLI pre prístup k nastaveniam prispôsobenia je rýchlejšia voľba ak už viete, ktorú konfiguráciu chcete zobraziť alebo zmeniť. na nastavte hodnotu pre nastavenie, Použi pref set príkaz a obnovte nastavenie, typ pref reset .

Na demo nižšie môžete vidieť, ako skontrolujte URI vstreknite jQuery príkaz vložil do stránky (pozri časť č. 9 v tomto článku):