15 Графични командни редове (GCLI) Команди във Firefox за Front-End програмисти

Без значение колко луксозни копчета и менюта имаме, винаги има програмисти, които ценят достъп до командния ред в работната им среда, особено когато това е така елиминира лов за десния бутон или меню която показва необходимата настройка в нашата линия на видимост.

Firefox има Графичен интерпретатор на командния ред, или накратко a GCLI за известно време и разширяваше командния си набор с течение на времето. Командите GCLI предоставят на разработчиците a бърз достъп до инструменти за разработка и конфигуриране. Тя също има функция за автоматично довършване; ако натиснете клавиша Tab, докато въвеждате която и да е команда, ще бъдат въведени командите, предложени от GCLI.

Лента с инструменти

на Firefox GCLI е известен също като Лента с инструменти за програмисти. Има три начина за да го отворите:

1. Натиснете клавишната комбинация Shift + F2.
2. Кликнете върху “Отворете менюто” иконата (хамбургер) в най-дясната страна на адресната лента (отдясно до началния бутон), след което щракнете върху Програмист> Лента с инструменти за програмисти подменю.
3. В горното меню изберете отметката Инструменти> Уеб програмист> Лента с инструменти за програмисти опция.

След като лентата с инструменти за програмисти е отворена, можете да я видите в долната част на прозореца на браузъра. Ако сте решили да работите с GCLI, Бих посъветвал просто да го оставите отворено през цялото време, докато работите.

Сега нека видим някои полезни задачи, които можете да изпълните във Firefox използвайки своя GCLI.

1. Премахнете елементите на страницата

Команда: pagemod remove element

Когато трябва да погледнете отново оформлението на уеб страница с отстранени някои елементи, просто напишете командата pagemod remove element в командния ред на Firefox, за да премахнете тези елементи от страницата.

Стойността на трябва да бъде валиден CSS селектор на страницата. Кажете, на страница, която искате да премахнете всички връзки (конкретно) на класа .BTN, командата се записва като: pagemod извадете елемент a.btn.

Като цяло, командата pagemod се използва за промяна на страница, чрез премахване или замяна на избрани елементи или атрибути.

2. Измерете елементите

Команда: мярка

Ако искаш знаят измерването на всеки визуален модул на уеб страница, има инструмент за това. Най- “мярка” Инструментът е достъпен както от типичния набор от инструменти за уеб разработчици, така и от GCLI.

Въведете и въведете мярка в командния ред и курсора ще превърнете се в кръстосана греда. Измерванията ще бъдат показани в пиксели до курсора на кръстовището и са на ширина, височина и диагонална дължина от избраната област. За да деактивирате инструмента, повторете мярка команда.

3. Редактирайте файловете бързо

Команда: редактиране

начало редактиране на ресурсите на страницата ви с редактиране команда. Докато въвеждате командата, ще видите URI на всички налични ресурси от тази страница, която можете да разглеждате с клавишите със стрелки нагоре и надолу. След като изберете ресурса, който искате да редактирате, натиснете клавиша Tab, за да завършите предложението, и натиснете клавиша Enter инструмент за редактиране на браузъра ще се отвори с избрания файл.

4. Потърсете непознати CSS свойства

Команда: mdn css

Това е доста готина команда - това е нещо като изскачащ речник за свойствата на CSS. Ако попаднете на непозната CSS собственост и искате да проверите какво означава за нея, изпълнете командата mdn css в GCLI с заменен с действителното име на тази непозната собственост.

Ще се появи изскачащ прозорец с “дефиниция” за това свойство на CSS точно над лентата с инструменти. Определението е извлечете от официалната страница на Mozilla Developer Network (MDN) от даденото имущество. Речникът на свойствата на CSS, HTML елементи и уеб API на MDN е силно цитиран.

Ако текстът, показан в изскачащия прозорец, не е достатъчен, а вие искам да знам повече, можете да кликнете върху връзката Посетете MDN Page в изскачащия прозорец и съответната MDN страница за това свойство ще бъде отворена. В момента тази команда е достъпна само за CSS свойства.

5. Преоразмерете страницата

Команда: преоразмеряване на

Инструментът за преоразмеряване ви позволява да видите как изглежда страницата ви преоразмерени до конкретни размери, което може да бъде полезно, когато искате да прегледате изгледа на страницата си в устройства с различни размери от тази, в която работите.

Firefox също има клавишна комбинация, за да отворите този инструмент: Ctrl + Shift + M (Cmd + Alt + M за Mac). Но ако вече знаят точните размери за да се използва за преоразмеряване, най-бързият начин е да стартирате преоразмеряване командата с необходимите ви размери.

Размерите са интерпретирани в пиксели. След като стартирате командата, ще видите преоразмерената страница.

6. Рестартирайте браузъра

Команда: рестартирам

Тази команда е очевидна. За да рестартирате Firefox, просто напишете рестартирам в командния ред и натиснете Enter - може да ви е от полза, когато инсталирате добавки или плъгини, които изискват рестартиране.

7. Отворете папката с профили за Firefox

команда: папка openprofile

Всеки потребител на Firefox получава своя собствена папка за местен профил че съхранява специфични за потребителя файлове, като отметки и / хром папка. Когато персонализирате Firefox, може да се наложи да прегледате и промените съдържанието на тази папка.

Алтернативният начин да отворите тази папка е да щракнете върху бутона Покажи папката на за: подкрепа страница. Чрез изпълнение на командата папка openprofile в командния ред на Firefox ще видите папката на вашия профил отворен веднага.

8. Копирайте цветовите стойности

Команда: капкомер

Освен факта, че поддържа само шестнадесетичния формат, пипетката е брилянтен инструмент копиране на стойността на цвета на всеки видим цвят на уеб страница. Въведете командата капкомер в GCLI, за да превключвате оперативността на инструмента.

9. Тествайте външните библиотеки

Команда: инжектирам

Ако искаш тествайте някои външни библиотеки на вашата уеб страница, вместо да се гмуркате в изходния код, за да направите временните допълнения, просто използвайте инжектирам команда вмъкнете библиотеките. Например, за да включите просто jQuery инжектирайте jQuery.

При изпълнение на командата ресурсът ще бъде импортирани на страницата чрез вмъкване на a > в етикета раздел на HTML документа.

10. Направете снимки на екрани

Команда: снимки

Най- вграден инструмент за вземане на скрийншот в Firefox е доста мощен. Например, можете да насочвате отделни елементи с помощта на CSS селектори, да използвате таймер, да приложите a DPR. Можете дори да направите снимка на екрана само хромираната част на браузъра (област около потребителското съдържание) чрез използване на екранна снимка --хром команда.

Снимките на екрана се запазват в Изтегли папка на браузъра в PNG формат.

11. Отворете владетелите

команда: владетели

Още един страхотен инструмент от Firefox, който е лесно достъпен чрез GCLI. Най- владетели команда показва хоризонтални и вертикални линийки около страницата. Измерванията на владетелите са в пиксели. Изпълнете същата команда, за да деактивирате линейката.

12. Отворете конзолата и дебъгера

Команда: отворена конзола и dbg open

Ако клавиатурата се съкрати отваряне на уеб конзолата или инструмента за дебъгер са подхлъзнали ума си, не се тревожете, просто напишете проста команда отворена конзола или dbg open в командния ред на Firefox, за да отворите съответния инструмент.

13. Пребройте елементите на страницата

Команда: QSA

Тази чудесна команда от GCLI извършва бързо преброяване на елементи в уеб страница, която съответства на всеки CSS селектор. Например, за да получите броя на всички на страница, използвайте qsa a команда.

14. Активирайте или деактивирайте добавките

Команда: addon списък

Ако някога се наложи да прегледате и управлявате вашите Firefox добавки, препоръчвам ви да го направите използвайте командите GCLI вместо менюто за добавки защото версията на GCLI изброява всички добавки и приставки, включително предварително инсталираните, които не могат да бъдат изброени в менюто Добавки.

Можете да превключвате състоянието на добавката в GCLI с командата Адон последвано от съответната подкоманда се даде възможност на или правя неспособен.

На демото по-долу можете да видите как бързо да забраните Pocket в Firefox.

15. Управление на настройките

Команда: префикс шоу

Има тона настройки за персонализиране потребителите могат да имат достъп чрез Firefox за: довереник страница. Същите настройки могат да се видят и променят и с помощта на GCLI.

Използването на GCLI за достъп до настройките за персонализиране е по-бързата опция ако вече знаете коя конфигурация искате да видите или промените. Да се задайте стойност за настройка, използвай pref set и към нулиране на настройка, Тип предварително нулиране .

На демото по-долу можете да видите как да го направите проверете URI на инжектирайте jQuery команда е инжектирала в страницата (вижте секция # 9 в тази статия):