15 Grafikus parancssor (GCLI) parancsok a Firefoxban a Front-End fejlesztők számára

Függetlenül attól, hogy mennyi díszes gomb és menük van, mindig vannak programozók, akik értékelik parancssori hozzáférés munkakörnyezetükben, különösen akkor, amikor kiküszöböli a jobb gomb vagy menü vadászatát amely megjeleníti a szükséges beállítást a látóvonalunkban.

A Firefoxnak van egy Grafikus parancssoros tolmács, vagy röviden a GCLI egy ideig most, és idővel bővítette a parancsát. A GCLI parancsok a fejlesztők számára a gyors hozzáférést biztosít a fejlesztési és konfigurációs eszközökhöz. Van is egy automatikus kiegészítés funkció; ha bármelyik parancs beírása közben megnyomja a Tab billentyűt, a GCLI által javasolt parancsok kerülnek beírásra.

Az Eszköztár

Firefox GCLI más néven Fejlesztő eszköztár. Vannak három módon megnyitja:

1. Nyomja meg a Shift + F2 billentyűparancsot.
2. Kattints a “Nyissa meg a Menüt” (hamburger) ikon a címsor jobb szélén (jobbra a Kezdőlap gombra), majd kattintson a gombra Fejlesztő> Fejlesztő eszköztár almenü.
3. A felső menüsorban jelölje be a Eszközök> Webfejlesztő> Fejlesztői eszköztár választási lehetőség.

Miután megnyílt a fejlesztői eszköztár, láthatja azt a böngészőablak alján. Ha úgy döntött, hogy együtt dolgozik a GCLI, Azt tanácsolom, hogy a munka közben mindig nyitva maradjon.

Most nézzük meg a Firefoxban végrehajtandó hasznos feladatokat a GCLI használatával.

1. Távolítsa el az oldalelemeket

Parancs: elem eltávolítása elem

Ha meg kell néznie egy másik oldal elrendezését néhány elem eltávolítva, írja be a parancsot elem eltávolítása elem a Firefox parancssorba, hogy eltávolítsa ezeket az elemeket az oldalról.

Az értéke kell egy érvényes CSS választó az oldalon. Mondjuk, egy olyan oldalon, amelyen az osztály összes linkjét szeretné eltávolítani .BTN, a parancs a következőképpen íródott: pagemod elem eltávolítása a.btn.

Általában a parancs pagemod használják oldal módosítása, a kiválasztott elemek vagy attribútumok eltávolításával vagy cseréjével.

2. Mérjük meg az elemeket

Parancs: intézkedés

Ha akarod tudja a mérést a weblap bármelyik vizuális modulja, erre van egy eszköz. A “intézkedés” az eszköz a tipikus webes fejlesztői eszközök és a GCLI segítségével érhető el.

Írja be és írja be a intézkedés parancsot a parancssorba, és a kurzor fog forduljon át. A mérések lesznek pixelben jelenik meg a keresztirányú kurzor mellett, és a szélesség, magasság és átlós hosszúság a kiválasztott területen. A szerszám letiltása, indítsa újra a intézkedés parancs.

3. Gyorsan szerkesztheti a fájlokat

Parancs: szerkesztés

Rajt az oldal erőforrásainak szerkesztése a ... val szerkesztés parancs. A parancs beírása közben megjelenik a Az összes rendelkezésre álló erőforrás URI-ja az oldalról, amelyet a fel és le nyílbillentyűkkel böngészhet. Miután kiválasztotta a szerkeszteni kívánt erőforrást, nyomja meg a Tab billentyűt a javaslat automatikus befejezéséhez, majd nyomja meg az Enter billentyűt, majd a a böngésző szerkesztő eszköze a kiválasztott fájl megnyílik.

4. Keresse meg az ismeretlen CSS tulajdonságokat

Parancs: mdn css

Ez egy nagyon jó parancs, ez egyfajta a előugró szótár a CSS tulajdonságokhoz. Ha ismeretlen CSS tulajdonsággal találkozik, és szeretné megnézni, hogy mit jelent, akkor futtassa a parancsot mdn css a GCLI-ban helyettesíti az ismeretlen tulajdon tényleges nevét.

Megjelenik egy felugró ablak a ... val “meghatározás” ehhez a CSS tulajdonsághoz jobbra az eszköztár felett. A definíció egy kivonat a hivatalos Mozilla Developer Network (MDN) oldalról az adott tulajdonságnak. Az MDN CSS tulajdonságai, a HTML elemek és a web API-k kifejezetten idézik.

Ha a felugró ablakban látható szöveg nem elég, és te szeretne többet tudni, kattintson a linkre Látogasson el az MDN oldalra A felugró ablakon belül megnyílik a megfelelő MDN oldal. Jelenleg ez a parancs csak a CSS tulajdonságok számára elérhető.

5. Átméretezés oldal

Parancs: átméretezése

Az átméretező eszköz segítségével megtekintheti, hogyan néz ki az oldal átméretezésre van szükség, ami hasznos lehet, ha az oldal megjelenését olyan eszközökben szeretné megtekinteni, amelyek mérete eltér az Öntől.

A Firefoxnak is van egy billentyűzet gyorsbillentyű az eszköz megnyitásához: Ctrl + Shift + M (Cmd + Alt + M Mac esetén). De ha már tudja a pontos méreteket az átméretezéshez a leggyorsabb mód az átméretezése parancsot a szükséges méretekkel.

A méretek pixelben értelmezve. A parancs futtatását követően megjelenik az átméretezett oldal.

6. Indítsa újra a böngészőt

Parancs: újrakezd

Ez a parancs magától értetődő. A Firefox újraindításához csak írja be újrakezd a parancssorba, és nyomja meg az Enter billentyűt, és hasznos lehet, ha újratelepítést igénylő bővítményeket vagy bővítményeket telepít.

7. Nyissa meg a Firefox profil mappáját

Parancs: mappa openprofile

Minden Firefox felhasználó megkapja saját helyi mappa hogy tárolja a felhasználó-specifikus fájlokat, például a könyvjelzők és a /króm mappát. Amikor személyre szabja a Firefoxot, előfordulhat, hogy meg kell néznie és módosítania kell a mappa tartalmát.

A mappa megnyitásának alternatív módja a Mappa megjelenítése gomb megnyomása about: támogatás oldalt. A parancs futtatásával mappa openprofile a Firefox parancssorban megjelenik a profil mappája nyitva.

8. Színértékek másolása

Parancs: szemcseppentő

Azon kívül, hogy csak a hatszög formátumot támogatja, a szemcsepp egy ragyogó eszköz a színérték másolása bármelyik látható színárnyalat egy weboldalon. Írja be a parancsot szemcseppentő a GCLI-be, hogy átváltsa a szerszám működését.

9. Ellenőrizze a külső könyvtárakat

Parancs: injekciót

Ha akarod teszteljen néhány külső könyvtárat a weblapon, ahelyett, hogy a forráskódba merülne az ideiglenes kiegészítések létrehozásához, csak használja a injekciót parancsot helyezze be a könyvtárakat. Például, hogy a jQuery-t egyszerűen beírja a jQuery injekciót.

A parancs végrehajtásakor az erőforrás lesz importált az oldalra behelyezésével a > címke a a HTML-dokumentum szakaszát.

10. Vegyük a képernyőképeket

Parancs: screenshot

A beépített screenshot-készítő eszköz a Firefoxban elég erős. Például az egyes elemeket CSS-szelektorokkal célozhatja meg, használhat egy időzítőt, alkalmazhatja a DPR. Akkor is készíthet egy képet csak a böngésző króm része (a felhasználó tartalmát körülvevő terület) a képernyőkép - króm parancs.

A képernyőképek a Letöltés mappa a böngésző PNG formátumban.

11. Nyissa meg az uralkodókat

Parancs: uralkodók

Még egy hűvös eszköz a Firefox-tól, amely könnyen elérhető a GCLI-n keresztül. A uralkodók parancs vízszintes és függőleges vonalzókat jelenít meg az oldal körül. Az uralkodók mérései pixelben. Futtassa ugyanazt a parancsot a vonalzó kikapcsolásához.

12. Nyissa meg a konzolt és a hibakeresőt

Parancs: konzol nyitva és dbg nyitva

Ha a billentyűzet rövidebb a webkonzol vagy a hibakereső eszköz megnyitása elcsúsztak az elméd, nem aggódnak, csak írjuk be az egyszerű parancsot konzol nyitva vagy dbg nyitva a Firefox parancssorába a megfelelő eszköz megnyitásához.

13. Számolja az oldalelemeket

Parancs: qsa

A GCLI-nek ez a remek parancs gyors elemzést végez egy weboldalon található elemekről megfeleljen az adott CSS választónak. Például, hogy mindent megszámláljunk elemeket használhat az oldalon qsa a parancs.

14. Engedélyezze vagy tiltsa le a bővítményeket

Parancs: addon lista

Ha valaha is meg kell vizsgálnia és kezelnie kell a Firefox bővítményeit, ajánlom használja a GCLI parancsokat a bővítmények menü helyett mert a GCLI verzió tartalmazza az összes bővítményt és bővítményt, beleértve az előre telepítetteket is, amely nem szerepel a Bővítmények menüben.

A GCLI-ben a kiegészítés állapotát a parancs segítségével váltogathatja Hozzáad ezt követi a megfelelő alparancs is engedélyezze vagy letiltása.

Az alábbi bemutatón látható hogyan lehet gyorsan kikapcsolni a zsebet Firefoxban.

15. A beállítások kezelése

Parancs: pref show

Vannak tonna testreszabási beállítások a felhasználók hozzáférhetnek a Firefoxon keresztül about: config oldalt. Ugyanezek a beállítások is megtekinthetők és módosíthatók a GCLI segítségével is.

A GCLI használata a testreszabási beállítások eléréséhez a gyorsabb lehetőség ha már tudja, hogy melyik konfigurációt szeretné megtekinteni vagy megváltoztatni. Nak nek állítsa be a beállítás értékét, használja a pref set parancsot állítsa vissza a beállítást, típus pref reset .

Az alábbi bemutatón láthatja, hogyan kell ellenőrizze az URI-t a a jQuery injekciót parancsot az oldalra (lásd a 9. fejezetet ebben a cikkben):