Domača » Oblikovanje spletnih strani » 15 Ukazna vrstica (GCLI) Grafični ukazni vrstici (GCLI) v Firefoxu za razvijalce front-end

    15 Ukazna vrstica (GCLI) Grafični ukazni vrstici (GCLI) v Firefoxu za razvijalce front-end

    Ne glede na to, koliko fancy gumbov in menijev imamo, vedno obstajajo programerji, ki cenijo dostop do ukazne vrstice v njihovem delovnem okolju, še posebej, kadar je to \ t odpravlja lov na desni gumb ali meni ki prikazuje potrebno nastavitev v naši pogledi.

    Firefox je imel Grafični prevajalnik ukazne vrstice, ali na kratko a GCLI za nekaj časa in je sčasoma razširil svoj ukaz. Ukazi GCLI razvijalcem zagotavljajo a hiter dostop do razvojnih in konfiguracijskih orodij. Prav tako ima funkcija samodokončanja; če med tipkanjem katerega koli ukaza pritisnete Tab, se vnesejo ukazi, ki jih predlaga GCLI.

    Orodna vrstica

    Firefox GCLI znan tudi kot Orodna vrstica za razvijalce. Obstajajo na tri načine , da ga odprete:

    1. Pritisnite bližnjico Shift + F2.
    2. Kliknite gumb “Odprite meni” ikona (hamburger) na skrajni desni strani naslovne vrstice (desno do gumba Domov) in nato kliknite Razvijalec> Orodna vrstica za razvijalce podmeni.
    3. V zgornji vrstici menija označite Orodja> Spletni razvijalec> Orodna vrstica za razvijalce možnost.

    Ko je orodna vrstica za razvijalce odprta, jo lahko vidite na dnu okna brskalnika. Če ste se odločili za delo z GCLI, Jaz bi svetoval, da pustite odprto ves čas med delom.

    Zdaj pa si oglejte nekaj uporabnih nalog, ki jih lahko izvajate v Firefoxu z uporabo svojega GCLI.

    1. Odstranite elemente strani

    Ukaz: pagemod remove element

    Ko morate še enkrat pogledati postavitev spletne strani nekateri elementi so odstranjeni, samo vnesite ukaz pagemod remove element v ukazno vrstico Firefox, da odstranite te elemente s strani.

    Vrednost mora biti veljavni izbirnik CSS na strani. Recimo, na strani, ki jo želite odstraniti vse povezave (posebej) razreda .btn, ukaz je zapisan kot: pagemod odstranite element a.btn.

    Na splošno, ukaz pagemod se uporablja za spreminjanje strani, z odstranitvijo ali zamenjavo izbranih elementov ali atributov.

    2. Izmerite elemente

    Ukaz: ukrep

    Če želiš poznajo meritev katerega koli vizualnega modula na spletni strani, obstaja orodje za to. The “ukrep” Orodje je dostopno prek tipičnega spletnega orodja za razvijalce in GCLI.

    Vnesite in vnesite ukrep v ukazno vrstico in kazalec bo spremenite v križišče. Meritve bodo prikazano v slikovnih pikah poleg kazalke križca in sta širina, višina in diagonalna dolžina izbranega območja. Če želite onemogočiti orodje, ponovite ukrep ukaz.

    3. Hitro uredite datoteke

    Ukaz: Uredi

    Začni urejanje virov strani z Uredi ukaz. Med tipkanjem ukaza boste videli URI vseh razpoložljivih virov s te strani, ki jo lahko pregledujete s puščičnimi tipkami navzgor in navzdol. Ko izberete vir, ki ga želite urediti, pritisnite tipko Tab za samodokončanje predloga in pritisnite tipko Enter in urejevalnika brskalnika se bo odprla z izbrano datoteko.

    4. Poiščite nepoznane lastnosti CSS

    Ukaz: mdn css

    Ta je precej kul ukaz - to je nekako pojavni slovar za lastnosti CSS. Če naletite na nepoznano lastnost CSS in želite preveriti, kaj pomeni, zaženite ukaz mdn css v GCLI z nadomesti z dejanskim imenom te nepoznane lastnine.

    Pojavilo se bo pojavno okno z “opredelitev” za to lastnost CSS nad orodno vrstico. Opredelitev je izvleček iz uradne Mozilla Developer Network (MDN) strani danega premoženja. MDN-jev slovar CSS lastnosti, elementov HTML in spletnih API-jev je zelo citiran.

    Če besedilo, prikazano v pojavnem oknu, ni dovolj, in vas želite izvedeti več, lahko kliknete povezavo Obiščite stran MDN znotraj pojavnega okna in odpre se ustrezna stran MDN za to lastnost. Zdaj je ta ukaz na voljo samo za lastnosti CSS.

    5. Spreminjanje velikosti strani

    Ukaz: spremeni velikost v

    Orodje za spreminjanje velikosti vam omogoča, da vidite, kako izgleda vaša stran velikosti, ki je lahko uporabna, če si želite ogledati videz strani v napravah, ki so drugačne od tistih, v katerih delate.

    Firefox ima tudi bližnjico na tipkovnici, da odprete to orodje: Ctrl + Shift + M (Cmd + Alt + M za Mac). Ampak če že poznati natančne dimenzije za uporabo pri spreminjanju velikosti, najhitreje je zagnati spremenite velikost ukaz z dimenzijami, ki jih potrebujete.

    Dimenzije so razlagati v slikovnih pikah. Ko se ukaz zažene, se prikaže stran s spremenjeno velikostjo.

    6. Znova zaženite brskalnik

    Ukaz: ponovni zagon

    Ta ukaz je samoumeven. Če želite ponovno zagnati Firefox, samo vnesite ponovni zagon v ukazno vrstico in pritisnite Enter - lahko uporabite, ko namestite dodatke ali vtičnike, ki zahtevajo ponovni zagon.

    7. Odprite mapo profila Firefox

    Ukaz: mapa openprofile

    Vsak uporabnik Firefoxa dobi svoj lastno mapo lokalnega profila to shrani uporabniško določene datoteke, kot so zaznamki in / krom mapo. Ko prilagodite Firefox, boste morda morali pregledati in spremeniti vsebino te mape.

    Drugi način za odpiranje te mape je, da kliknete gumb Pokaži mapo na about: podpora stran. Z izvajanjem ukaza mapa openprofile v ukazni vrstici Firefox boste videli mapo profila odpre.

    8. Kopirajte barvne vrednosti

    Ukaz: kapalko

    Razen dejstva, da podpira samo heksadecimalno obliko, je kapljica za briljantno orodje kopiranje vrednosti barve vidnega odtenka na spletni strani. Vnesite ukaz kapalko v GCLI, da preklopite na delovanje orodja.

    9. Preizkusite zunanje knjižnice

    Ukaz: injicirajte

    Če želiš preizkusite nekatere zunanje knjižnice na vaši spletni strani, namesto da se potapljate v izvorno kodo, da naredite začasne dodatke, uporabite injicirajte ukaz vstavite knjižnice. Na primer, vključite samo tip jQuery injicirajte jQuery.

    Ob izvrševanju ukaza bo vir uvoženo na stran z vstavljanjem a > v oznako dokumenta HTML.

    10. Naredi posnetke zaslona

    Ukaz: posnetek zaslona

    The vgrajeno orodje za zajem zaslona v Firefoxu je zelo močna. Na primer, lahko uporabite CSS selektorje, uporabite časovnik, uporabite a dpr. Lahko celo posnamete posnetek zaslona samo kromiran del brskalnika (področje okoli uporabniške vsebine) z uporabo screenshot - krom ukaz.

    Posnetki zaslona so shranjeni v Prenesi mapo brskalnika v zapisu PNG.

    11. Odprite vladarje

    Ukaz: vladarji

    Še ena kul orodje iz Firefoxa, ki je lahko dostopno prek GCLI. The vladarji ukaz prikazuje horizontalne in vertikalne ravnila okoli strani. Meritve vladarjev so v pikslih. Zaženite isti ukaz za deaktiviranje ravnila.

    12. Odprite konzolo in razhroščevalnik

    Ukaz: konzola odprta in dbg odprto

    Če se tipkovnica skrajša za odprtje spletne konzole ali orodja za iskanje napak ste se umaknili, brez skrbi, vnesite preprosto ukaz konzola odprta ali dbg odprto v ukazno vrstico Firefox, da odprete ustrezno orodje.

    13. Preštejte elemente strani

    Ukaz: qsa

    Ta izjemen ukaz iz GCLI-ja opravi hiter popis elementov na spletni strani ujemajo s katerim koli izbirnikom CSS. Na primer, da bi dobili število vseh elementov na strani, uporabite qsa a ukaz.

    14. Omogočite ali onemogočite dodatke

    Ukaz: addon list

    Če boste kdaj potrebovali pregledovanje in upravljanje dodatkov za Firefox, vam priporočam uporabite ukaze GCLI namesto menija dodatkov ker različica GCLI navaja vse dodatke in dodatke, vključno z vnaprej nameščenimi, ki jih morda ne najdete v meniju Dodatki.

    Stanje dodatka lahko preklapljate z ukazom v GCLI addon sledi mu ustrezni pododbor omogoči ali onemogoči.

    Na spodnji predstavitvi si lahko ogledate kako hitro onemogočiti Pocket v Firefoxu.

    15. Upravljanje nastavitev

    Ukaz: pref show

    Obstaja ton nastavitve prilagajanja uporabniki lahko dostopajo prek Firefoxa about: config stran. Iste nastavitve lahko gledate in spreminjate tudi s pomočjo GCLI.

    Uporaba GCLI za dostop do nastavitev za prilagajanje je hitrejšo možnost če že veste, katero konfiguracijo želite pregledati ali spremeniti. Za nastavite vrednost za nastavitev, uporabi pref set in ukaz ponastavite nastavitev, vrsto prednastavljeno .

    Na spodnji predstavitvi si lahko ogledate, kako preverite URI injicirajte jQuery ukaz je vnesel v stran (glejte razdelek # 9 v tem članku):