15 Comenzi pentru linia de comandă grafică (GCLI) în Firefox pentru dezvoltatorii din Front-End

Indiferent cât de multe butoane și meniuri fanteziste avem, există întotdeauna programatori care apreciază acces la linia de comandă în mediul de lucru, mai ales atunci când elimină o vânătoare pentru butonul sau meniul drept care afișează setările necesare în linia noastră de vedere.

Firefox a avut o Interpret de linie de comandă grafică, sau pe scurt a GCLI pentru o vreme, și-a extins setul de comandă de-a lungul timpului. Comenzile GCLI furnizează dezvoltatorilor un a acces rapid la instrumente de dezvoltare și configurare. De asemenea, are un funcția de completare automată; dacă apăsați pe Tab în timp ce introduceți o comandă, vor fi introduse comenzile sugerate de GCLI.

Bara de instrumente

Firefox GCLI este, de asemenea, cunoscut sub numele de Bara de instrumente pentru dezvoltatori. Sunt trei moduri pentru ao deschide:

1. Apăsați comanda rapidă Shift + F2.
2. Apasă pe “Deschideți meniul” (hamburger) din partea dreaptă a barei de adrese (dreapta la butonul Home), apoi faceți clic pe Programator> Bara de instrumente pentru dezvoltatori submeniul.
3. În bara de meniu de sus, bifați Instrumente> Dezvoltator web> Bara de instrumente pentru dezvoltatori opțiune.

Odată ce Bara de instrumente pentru dezvoltatori este deschisă, o puteți vedea în partea de jos a ferestrei browserului. Dacă v-ați decis să lucrați cu GCLI, Aș sfătui să-l las deschis tot timpul în timp ce lucrați.

Acum, să vedem câteva sarcini utile pe care le puteți efectua în Firefox folosind GCLI-ul său.

1. Eliminați elementele paginii

Comanda: elementul de eliminare a modulului de pagină

Când trebuie să faceți o altă privire la aspectul unei pagini web cu unele elemente eliminate, doar tastați comanda elementul de eliminare a modulului de pagină în linia de comandă Firefox pentru a elimina elementele din pagină.

Valoarea a trebuie să fie a valid selector CSS pe pagină. Spuneți, într-o pagină pe care doriți să eliminați toate linkurile (în mod specific) ale clasei .BTN, comanda este scrisă ca: pagemod a elimina elementul a.btn.

În general, comanda pagemod este folosit pentru modificarea unei pagini, fie prin înlăturarea, fie prin înlocuirea elementelor sau atributelor alese.

2. Măsurați elementele

Comanda: măsura

Dacă dorești cunosc măsurarea a oricărui modul vizual de pe o pagină web, există un instrument pentru asta. “măsura” instrumentul este accesibil atât prin setul de instrumente web pentru dezvoltatori și prin GCLI.

Introduceți și introduceți măsura comanda în linia de comandă, și cursorul va transformați-vă într-o cruce. Măsurătorile vor fi afișat în pixeli lângă cursorul de cruce și sunt din lățime, înălțime și lungime diagonală din zona selectată. Pentru a dezactiva instrumentul, reporniți măsura comanda.

3. Editați rapid fișierele

Comanda: Editați | ×

start editarea resurselor paginii dvs. cu Editați | × comanda. În timp ce tastați comanda, veți vedea URI ale tuturor resurselor disponibile din acea pagină, pe care o puteți răsfoi folosind tastele săgeți sus și jos. Odată ce ați selectat resursa pe care doriți să o editați, apăsați pe Tab pentru a completa completarea sugestiei și apăsați pe Enter și pe instrument de editor al browserului se va deschide cu fișierul ales.

4. Căutați proprietăți CSS necunoscute

Comanda: mdn css

Aceasta este o comandă destul de rece - este un fel de a dicționarul pop-up pentru proprietățile CSS. Dacă întâlniți o proprietate necunoscută CSS și doriți să verificați ce înseamnă, rulați comanda mdn css în GCLI cu înlocuit cu numele real al acestei proprietăți necunoscute.

Va apărea un popup cu “definiție” pentru acea proprietate CSS chiar deasupra barei de instrumente. Definiția este o extrageți din pagina oficială Mozilla Developer Network (MDN) din proprietatea dată. Glosarul MDN al proprietăților CSS, al elementelor HTML și al API-urilor web este foarte citat.

Dacă textul afișat în fereastra de dialog nu este suficient, și tu doriți să aflați mai multe, puteți da clic pe link Accesați pagina MDN în fereastra pop-up, iar pagina MDN respectivă pentru această proprietate va fi deschisă. În prezent, această comandă este disponibilă numai pentru proprietățile CSS.

5. Redimensionați pagina

Comanda: redimensiona la

Instrumentul de redimensionare vă permite să vedeți cum arată pagina dvs. redimensionate la dimensiuni specifice, care pot fi utile atunci când doriți să previzualizați aspectul paginii dvs. în dispozitive cu dimensiuni diferite de cele în care lucrați.

Firefox are, de asemenea, pentru a deschide acest instrument: Ctrl + Shift + M (Cmd + Alt + M pentru Mac). Dar dacă deja cunosc dimensiunile exacte pentru a fi utilizat pentru redimensionare, cea mai rapidă cale este de a rula redimensiona comandă cu dimensiunile de care aveți nevoie.

Dimensiunile sunt interpretate în pixeli. După ce se execută comanda, veți vedea pagina redimensionată.

6. Reporniți browserul

Comanda: repornire

Această comandă este evidentă. Pentru a reinițializa Firefox, tastați repornire în linia de comandă și apăsați pe Enter - pot fi utile atunci când instalați programe de completare sau pluginuri care necesită o repornire.

7. Deschideți folderul profilului dvs. Firefox

Comanda: folder openprofile

Fiecare utilizator Firefox devine lor propriul dosar de profil local acea stochează fișiere specifice utilizatorului, cum ar fi marcajele și /crom pliant. Când personalizați Firefox, este posibil să fie necesar să vizualizați și să modificați conținutul acestui dosar.

Modul alternativ de deschidere a acestui dosar este să faceți clic pe butonul Afișare folder pe despre: suport pagină. Prin rularea comenzii folder openprofile în linia de comandă Firefox, veți vedea dosarul profilului deschideți imediat.

8. Copiați valorile culorii

Comanda: pipetă

În afară de faptul că suportă numai formatul hexagonal, eyropropperul este un instrument genial pentru copierea valorii culorii de orice nuanță vizibilă de pe o pagină Web. Introduceți comanda pipetă în GCLI pentru a comuta operaționalitatea instrumentului.

9. Testați bibliotecile externe

Comanda: injecta

Dacă dorești testați unele biblioteci externe pe pagina dvs. web, în ​​loc să scufundați în codul sursă pentru a face adăugările temporare, utilizați doar injecta comanda pentru introduceți bibliotecile. De exemplu, pentru a include jQuery doar tastați injectați jQuery.

La executarea comenzii, resursa va fi importate în pagină prin introducerea unui a > eticheta în secțiune a documentului HTML.

10. Faceți capturi de ecran

Comanda: captură de ecran

instrument de captură de ecran încorporat în Firefox este destul de puternic. De exemplu, puteți direcționa elemente individuale folosind selectori CSS, utilizați un cronometru, aplicați a DPR. Poți chiar să iei o captură de ecran doar porțiunea cromată a browserului (zona care înconjoară conținutul utilizatorului) utilizând screenshot - crom comanda.

Capturile de ecran sunt salvate în Descărcați dosarul a browserului în format PNG.

11. Deschise

Comanda: conducători

Cu toate acestea, un alt instrument cool de la Firefox, care este ușor accesibil prin GCLI. conducători comanda afișează rigle orizontale și verticale în jurul paginii. Măsurătorile conducătorilor sunt în pixeli. Rulați aceeași comandă pentru a dezactiva rigla.

12. Deschideți consola și depanatorul

Comanda: consola deschisă și dbg deschis

Dacă tastatura este scurtă pentru deschiderea consolei web sau a instrumentului de depanare ți-au alunecat mintea, nu ai grijă, ci doar tastați comanda simplă consola deschisă sau dbg deschis în linia de comandă Firefox pentru a deschide instrumentul respectiv.

13. Numărați elementele paginii

Comanda: QSA

Această comandă minunată de la GCLI face un recensământ rapid al elementelor dintr-o pagină web care potriviți orice selector CSS dat. De exemplu, pentru a lua socoteală de toate elemente de pe o pagină, utilizați qsa a comanda.

14. Activați sau dezactivați programele de completare

Comanda: lista de add-uri

Dacă vreodată trebuie să studiezi și să gestionezi add-on-urile Firefox, îți recomand utilizați mai degrabă comenzile GCLI decât meniul Add-ons deoarece versiunea GCLI afișează toate programele de completare și pluginurile, inclusiv cele preinstalate, care nu pot fi listate în meniul Add-ons.

Puteți comuta starea de completare în GCLI cu comanda add-on urmată de subcomandarea relevantă permite sau dezactivați.

Pe demonstrația de mai jos puteți vedea cum să dezactivați rapid Pocket în Firefox.

15. Gestionați setările

Comanda: arată pref

Există tone de setările de personalizare utilizatorii pot accesa prin Firefox about: config pagină. Aceleași setări pot fi vizualizate și modificate și utilizând GCLI.

Utilizarea GCLI pentru a accesa setările de personalizare este opțiunea mai rapidă dacă știți deja configurația pe care doriți să o vedeți sau să o modificați. La setați o valoare pentru o setare, folosește set pref comandă, și pentru resetați o setare, tip pref reset .

În demonstrația de mai jos puteți vedea cum să verificați URI-ul injectați jQuery comandă a introdus în pagină (vezi secțiunea # 9 din acest articol):