15 GCLI n graafiset komennot Firefoxissa Front-End-kehittäjille
Riippumatta siitä, kuinka monta hienoa nappia ja valikoita meillä on, on aina ohjelmoijia, jotka arvostavat komentoriviltä työympäristössään, varsinkin kun se on poistaa oikean painikkeen tai valikon metsästyksen joka näyttää tarvittavan asetuksen näkymässämme.
Firefoxilla on ollut Graafinen komentorivin tulkki, tai lyhyesti a GCLI jo jonkin aikaa, ja laajensi komennonsa ajan mittaan. GCLI-komennot tarjoavat kehittäjille a nopea käyttö kehitys- ja kokoonpanotyökaluihin. Siinä on myös automaattisen täydennyksen ominaisuus; jos painat Tab-näppäintä kirjoitettaessa mitä tahansa komentoa, GCLI: n ehdottamat komennot syötetään.
Työkalupalkki
Firefoxin GCLI tunnetaan myös nimellä Kehittäjän työkalupalkki. On kolmella tavalla avata se:
- Paina Shift + F2-pikanäppäintä.
- Klikkaa “Avaa valikko” (hampurilainen) -kuvake osoitepalkin oikeassa reunassa (oikealle Home-painikkeeseen) ja napsauta sitten Kehittäjä> Kehittäjän työkalupalkki alivalikko.
- Valitse ylävalikkoriviltä kohta Työkalut> Web Developer> Developer Toolbar vaihtoehto.
Kun kehittäjän työkalupalkki on auki, voit nähdä sen selainikkunan alareunassa. Jos olet päättänyt työskennellä GCLI, Haluaisin vain jättää sen avoinna koko ajan työskennellessäsi.
Nyt katsotaan joitakin hyödyllisiä tehtäviä, joita voit suorittaa Firefoxissa käyttämällä GCLI: tä.
1. Poista sivun elementit
Komento: sivun poisto elementti
Kun haluat tarkastella uudelleen verkkosivun ulkoasua joidenkin elementtien poistaminen, kirjoita vain komento sivun poisto elementti Firefoxin komentoriville, jotta nämä elementit poistetaan sivulta.
Arvo .btn, komento on kirjoitettu seuraavasti: sivunvaihto poistaa elementin a.btn.
Yleensä komento pagemod käytetään sivun muokkaaminen, poistamalla tai korvaamalla valitut elementit tai attribuutit.
2. Mittaa elementit
Komento: mitata
Jos haluat tietää mittaus minkä tahansa visuaalisen moduulin luominen verkkosivulle, siihen on työkalu. “mitata” työkalu on käytettävissä sekä tyypillisen web-kehittäjätyökalun että GCLI: n kautta.
Kirjoita ja kirjoita mitata komento komentoriville ja kohdistin tulee näkyviin kääntyä ristiin. Mittaukset ovat näkyy pikseleinä risteyskohdan osoittimen vieressä ja ovat leveys, korkeus ja diagonaalipituus valittua aluetta. Voit poistaa työkalun käytöstä, toista mitata komento.
3. Muokkaa tiedostoja nopeasti
Komento: muokata
alkaa sivun resurssien muokkaaminen kanssa muokata komento. Kun kirjoitat komentoa, näet Kaikkien käytettävissä olevien resurssien URI: t sivulta, josta voit selata ylös- ja alas-nuolinäppäimillä. Kun olet valinnut resurssin, jota haluat muokata, paina Tab-painiketta täydelliseksi ehdotukseksi ja paina Enter ja selaimen muokkaustyökalu avautuu valitulla tiedostolla.
4. Etsi tuntemattomat CSS-ominaisuudet
Komento: mdn css
Tämä on melko viileä komento, se on eräänlainen a CSS-ominaisuuksien ponnahdusikkuna. Jos kohtaat tuntemattoman CSS-ominaisuuden ja haluat tarkistaa, mitä se tarkoittaa, suorita komento mdn css GCLI: ssa
Näkyviin tulee ponnahdusikkuna kanssa “määritelmä” kyseiselle CSS-ominaisuudelle oikealla työkalurivin yläpuolella. Määritelmä on ote virallisesta Mozilla Developer Network (MDN) -sivulta tietyn kiinteistön. MDN: n CSS-ominaisuuksien sanasto, HTML-elementit ja web-sovellusliittymät ovat hyvin lainattuja.
Jos ponnahdusikkunassa näkyvä teksti ei riitä, ja sinä haluat tietää enemmän, voit napsauttaa linkkiä Käy MDN-sivulla ponnahdusikkunan sisällä ja vastaava MDN-sivu avataan. Juuri nyt tämä komento on käytettävissä vain CSS-ominaisuuksissa.
5. Muuta sivua
Komento: kokoa
Muuta kokoa -työkalun avulla näet, miten sivusi näyttää muutettu tiettyyn ulottuvuuteen, mikä voi olla hyödyllistä, jos haluat esikatsella sivusi ulkoasua laitteissa, joiden mitat poikkeavat toisistaan.
Firefoxissa on myös a näppäimistön pikanäppäin tämän työkalun avaamiseen: Ctrl + Vaihto + M (Cmd + Alt + M Macille). Mutta jos olet jo tietää tarkat mitat kokoa varten, nopein tapa on ajaa kokoa komento, jossa on tarvitsemasi mitat.
Mitat ovat tulkitaan pikseleinä. Kun komento on suoritettu, näet muutetun sivun.
6. Käynnistä selain uudelleen
Komento: uudelleenkäynnistää
Tämä komento on itsestään selvä. Käynnistä Firefox uudelleen kirjoittamalla uudelleenkäynnistää komentoriville ja paina Enter-näppäintä, jos se on kätevä, kun asennat lisäosia tai lisäosia, jotka edellyttävät uudelleenkäynnistystä.
7. Avaa Firefox-profiilikansionasi
Komento: kansio openprofile
Jokainen Firefox-käyttäjä saa niiden oman paikallisen profiilin kansion että tallentaa käyttäjäkohtaisia tiedostoja, kuten kirjanmerkit ja /kromi kansio. Kun mukautat Firefoxin, saatat joutua tarkastelemaan ja muokkaamaan tämän kansion sisältöä.
Vaihtoehtoinen tapa avata tämä kansio on napsauttaa Näytä kansio -painiketta Tietoja: tuki sivu. Käynnistä komento kansio openprofile Firefox-komentorivillä näet profiilikansion auki heti.
8. Kopioi väriarvot
Komento: eyedropper
Muuten kuin se, että se tukee vain heksamuotoa, silmälasku on loistava työkalu väriarvon kopioiminen Web-sivun näkyvän värisävyn. Anna komento eyedropper GCLI: hen vaihtaaksesi työkalun toiminnallisuutta.
9. Testaa ulkoisia kirjastoja
Komento: pistää
Jos haluat testata joitakin ulkoisia kirjastoja käytä verkkosivullesi sen sijaan, että olisit sukeltanut lähdekoodiin, jotta voit tehdä väliaikaisia lisäyksiä, käytä vain pistää komento aseta kirjastot. Esimerkiksi jQuery-tyypin lisääminen pistää jQuery.
Komentoa suoritettaessa resurssi tulee olemaan tuotu sivulle lisäämällä a >
10. Ota kuvakaappauksia
Komento: kuvakaappaus
sisäänrakennettu kuvakaappaustyökalu Firefoxissa on varsin tehokas. Voit esimerkiksi kohdistaa yksittäisiä elementtejä käyttämällä CSS-valitsimia, käyttää ajastinta, soveltaa a DPR. Voit jopa ottaa kuvakaappauksen vain selaimen kromiosa (käyttäjän sisältöä ympäröivä alue) käyttämällä kuvakaappaus - kromi komento.
Kuvakaappaukset tallennetaan Lataa kansio selain PNG-muodossa.
11. Avaa hallitsijat
Komento: hallitsijat
Vielä yksi Firefoxin viileä työkalu, joka on helposti saatavilla GCLI: n kautta. hallitsijat komento näyttää vaaka- ja pystysuuntaiset hallitsijat sivun ympärille. Hallitsijoiden mittaukset ovat pikseleinä. Suorita sama komento, kun haluat poistaa hallitsijan käytöstä.
12. Avaa konsoli & debugger
Komento: konsoli auki ja dbg auki
Jos näppäimistön pikanäppäimet ovat Web-konsolin tai debugger-työkalun avaaminen ovat luopuneet mielestäsi, älä huoli, kirjoita yksinkertainen komento konsoli auki tai dbg auki avaa vastaava työkalu Firefox-komentoriville.
13. Laske sivun elementit
Komento: QSA
Tämä GCLI: n hieno komento vie nopeasti verkkosivun elementtejä sopivat yhteen tiettyyn CSS-valitsimeen. Jos haluat esimerkiksi laskea kaiken sivun elementtejä, käytä qsa a komento.
14. Ota lisäosat käyttöön tai poista se käytöstä
Komento: addon-luettelo
Jos sinun tarvitsee kysyä ja hallita Firefox-lisäosia, suosittelen sinua käytä GCLI-komentoja Add-ons-valikon sijaan koska GCLI-versio sisältää kaikki lisäosat ja lisäosat, mukaan lukien esiasennetut, joka ei ehkä ole luettelossa Lisäosat-valikossa.
Voit vaihtaa GCLI: n lisäosan tilan komennolla lisäosa sen jälkeen myös asianomainen alikomento ota käyttöön tai Poista käytöstä.
Alla olevasta demosta näet miten Pocket voidaan nopeasti poistaa käytöstä Firefoxissa.
15. Hallitse asetuksia
Komento: pref show
On tonnia räätälöintiasetukset käyttäjät voivat käyttää Firefoxin kautta about: config sivu. Samoja asetuksia voidaan tarkastella ja muokata myös GCLI: n avulla.
GCLI: n käyttäminen mukautusasetusten käyttämiseen on nopeampi vaihtoehto jos tiedät jo, mitä kokoonpanoa haluat tarkastella tai muuttaa. jotta aseta asetusarvo, Käytä pref set komento ja nollaa asetus, tyyppi pref reset .
Alla olevalla demolla näet miten tarkista URI pistää jQuery komento on pistetty sivulle (katso tämän artikkelin kohta 9):
