15 команд графической командной строки (GCLI) в Firefox для разработчиков интерфейса

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

Firefox был Графический интерпретатор командной строки, или короче говоря GCLI какое-то время, и расширяет свой набор команд с течением времени. Команды GCLI предоставляют разработчикам быстрый доступ к инструментам разработки и настройки. Он также имеет функция автозаполнения; если вы нажмете Tab во время ввода какой-либо команды, будут введены команды, предложенные GCLI.

Панель инструментов

Фирефокса GCLI также известен как Панель инструментов разработчика. Есть три способа чтобы открыть это:

1. Нажмите сочетание клавиш Shift + F2.
2. Нажмите на “Открытое меню” (гамбургер) в правой части адресной строки (справа от кнопки «Домой»), затем нажмите Разработчик> Панель инструментов разработчика подменю.
3. В верхней строке меню отметьте Инструменты> Веб-разработчик> Панель инструментов разработчика вариант.

Когда панель инструментов разработчика открыта, вы можете ее увидеть внизу окна браузера. Если вы решили работать с GCLI, Я бы посоветовал просто оставить его открытым во время работы.

Теперь давайте посмотрим на некоторые полезные задачи, которые вы можете выполнять в Firefox. используя свой GCLI.

1. Удалить элементы страницы

Команда: pagemod удалить элемент

Когда вам нужно еще раз взглянуть на макет веб-страницы с некоторыми элементами удалены, просто введите команду pagemod удалить элемент в командной строке Firefox, чтобы удалить эти элементы со страницы.

Значение должен быть действительный селектор CSS на странице. Скажем, на странице вы хотите удалить все ссылки (особенно) класса .БТН, команда записывается как: pagemod удалить элемент a.btn.

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

2. Измерить элементы

Команда: измерение

Если хотите знать измерения любого визуального модуля на веб-странице, есть инструмент для этого. “измерение” инструмент доступен как через типичный набор инструментов для веб-разработчиков, так и через GCLI.

Введите и введите измерение команда в командной строке, и курсор будет превращаться в перекрестие. Измерения будут показано в пикселях рядом с курсором перекрестия, и имеют ширина, высота и длина диагонали выбранной области. Чтобы отключить инструмент, перезапустить измерение команда.

3. Редактируйте файлы быстро

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

Начните редактирование ресурсов вашей страницы с редактировать команда. При вводе команды вы увидите URI всех доступных ресурсов с этой страницы, которую вы можете просматривать с помощью клавиш со стрелками вверх и вниз. После того, как вы выбрали ресурс, который хотите редактировать, нажмите Tab, чтобы автоматически завершить предложение, и нажмите Enter, и инструмент редактора браузера откроется с выбранным файлом.

4. Найдите незнакомые свойства CSS

Команда: MDN CSS

Это довольно крутая команда - это своего рода всплывающий словарь для свойств CSS. Если вы столкнулись с незнакомым свойством CSS и хотите проверить, что оно обозначает, выполните команду MDN CSS в ГКЛИ с заменено фактическим названием этого незнакомого свойства.

Появится всплывающее окно с “определение” для этого свойства CSS прямо над панелью инструментов. Определение является выдержка из официальной страницы Mozilla Developer Network (MDN) данного имущества. Глоссарий MDN о CSS-свойствах, HTML-элементах и ​​веб-API очень популярен.

Если показанного во всплывающем окне текста недостаточно, и вы Хотите узнать больше, Вы можете нажать на ссылку Посетите страницу MDN внутри всплывающего окна, и будет открыта соответствующая страница 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.

При выполнении команды ресурс будет импортировано на страницу вставив > пометить в раздел документа HTML.

10. Делайте скриншоты

Команда: Скриншот

встроенный инструмент для снятия скриншотов в Firefox довольно мощный. Например, вы можете настроить таргетинг на отдельные элементы с помощью селекторов CSS, использовать таймер, применить DPR. Вы даже можете сделать скриншот только хромированная часть браузера (область, окружающая пользовательский контент) с помощью скриншот - хром команда.

Скриншоты сохраняются в Скачать папку браузера в формате PNG.

11. Открытые правители

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

Еще один крутой инструмент от Firefox, который легко доступен через GCLI. правители команда отображает горизонтальные и вертикальные линейки вокруг страницы. Размеры линейки в пикселях. Запустите ту же команду, чтобы деактивировать линейку.

12. Откройте консоль и отладчик

Команда: консоль открыта а также БД открыт

Если клавиатура сочетается с открытие веб-консоли или инструмента отладчика Соскользнуло с ума, не беспокойтесь, просто наберите простую команду консоль открыта или же БД открыт в командной строке Firefox, чтобы открыть соответствующий инструмент.

13. Подсчет элементов страницы

Команда: QSA

Эта изящная команда из GCLI проводит быструю перепись элементов на веб-странице, которая соответствовать любой данный селектор CSS. Например, чтобы подсчитать все элементы на странице, используйте QSA команда.

14. Включить или отключить надстройки

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

Если вам когда-нибудь понадобится просматривать и управлять своими надстройками Firefox, я рекомендую вам используйте команды GCLI, а не меню дополнений потому что версия GCLI перечисляет все дополнения и плагины, в том числе предустановленные, которые могут отсутствовать в меню дополнений.

Вы можете переключать статус надстройки в GCLI с помощью команды добавить сопровождаемый соответствующей подкомандой, либо включить или же запрещать.

На демо ниже вы можете увидеть как быстро отключить Pocket в Firefox.

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

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

Есть тонны настройки настройки пользователи могут получить доступ через Firefox о: конфигурации стр. Те же настройки можно просматривать и изменять с помощью GCLI..

Использование GCLI для доступа к настройкам настройки более быстрый вариант если вы уже знаете, какую конфигурацию вы хотите просмотреть или изменить. к установить значение для настройки, использовать Pref Set командовать и сбросить настройку, тип сброс настроек .

На демоверсии ниже вы можете увидеть, как проверьте URI внедрить JQuery Команда ввела на страницу (см. раздел № 9 в этой статье):