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

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

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

Читайте также: 10 крутых скрытых настроек Firefox, которые вы должны знать

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

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

Когда панель инструментов разработчика открыта, вы можете увидеть ее в нижней части окна браузера. Если вы решили работать с GCLI, я бы посоветовал просто оставить его открытым во время работы.
Теперь давайте посмотрим на некоторые полезные задачи, которые вы можете выполнять в Firefox, используя его GCLI.
1. Удалить элементы страницы
Команда: pagemod удалить элемент

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

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

Обычно команда pagemod используется для изменения страницы путем удаления или замены выбранных элементов или атрибутов.
2. Измерить элементы
Команда: мера

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

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

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

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

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

Если текста, отображаемого во всплывающем окне, недостаточно, и вы хотите узнать больше, вы можете щелкнуть ссылку Посетить страницу MDN внутри всплывающего окна, и откроется соответствующая страница MDN для этого свойства. В настоящее время эта команда доступна только для свойств CSS.
5. Изменить размер страницы
Команда: изменить размер до

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

Firefox также имеет сочетание клавиш для открытия этого инструмента: Ctrl + Shift + M (Cmd + Alt + M для Mac). Но если вы уже знаете точные размеры, которые будут использоваться для изменения размера, самый быстрый способ – запустить команду изменения размера с нужными вам размерами.

Размеры интерпретируются в пикселях. После запуска команды вы увидите страницу с измененным размером.
6. Перезапустите браузер.
Команда: перезапустить

Эта команда самоочевидна. Чтобы перезапустить Firefox, просто введите в командной строке restart и нажмите Enter – это может пригодиться при установке дополнений или плагинов, которые требуют перезапуска.
7. Откройте папку вашего профиля Firefox
Команда: папка openprofile

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

Альтернативный способ открыть эту папку – нажать кнопку Показать папку на о: страница поддержки, Запустив папку команд openprofile в командной строке Firefox, вы сразу увидите папку вашего профиля.
8. Скопируйте значения цвета
Команда: пипетка

Помимо того факта, что он поддерживает только шестнадцатеричный формат, пипетка является прекрасным инструментом для копирования значения цвета любого видимого оттенка на веб-странице. Введите команду пипеткой в ​​GCLI, чтобы переключить работоспособность инструмента.
9. Протестируйте внешние библиотеки
Команда: ввести

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

При выполнении команды ресурс будет импортирован на страницу, вставив