15 Команди графічного командного рядка (GCLI) у Firefox для Front-End Developers

Незалежно від того, скільки фігурних кнопок і меню у нас є, завжди є програмісти, які цінують доступ до командного рядка в їх робочому середовищі, особливо коли він усуває полювання за правою кнопкою або меню що відображає необхідні налаштування нашої лінії зору.

Firefox мав Графічний інтерпретатор командного рядка, або коротко a GCLI на деякий час, і з часом розширювали свій набір команд. Команди GCLI надають розробникам a швидкий доступ до інструментів розробки та налаштування. Вона також має функція автозаповнення; якщо натиснути клавішу Tab під час введення будь-якої команди, буде введено команди, запропоновані GCLI.

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

Firefox GCLI також відомий як Панель інструментів для розробників. Існує три способи відкрити його:

1. Натисніть клавішу Shift + F2.
2. Натисніть кнопку “Відкрийте меню” (гамбургер) на правому боці адресного рядка (праворуч від кнопки "Домашня сторінка"), потім натисніть кнопку Розробник> Панель інструментів для розробників підменю.
3. У верхньому рядку меню поставте галочку Інструменти> Веб-розробник> Панель інструментів для розробників опції.

Після того, як панель розробників відкрита, її можна побачити у нижній частині вікна веб-переглядача. Якщо ви вирішили працювати з GCLI, Я раджу просто залишити його відкритим весь час під час роботи.

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

1. Видаліть елементи сторінки

Команда: pagemod видалити елемент

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

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

Як правило, команда pagemod використовується для змінити сторінку, шляхом видалення або заміни вибраних елементів або атрибутів.

2. Виміряйте елементи

Команда: міра

Якщо ти хочеш знати вимірювання будь-якого візуального модуля на веб-сторінці, є інструмент для цього. The “міра” Інструмент доступний як за допомогою типового набору інструментів веб-розробника, так і через GCLI.

Введіть і введіть міра команду в командний рядок, і курсор буде перетворити на перехрестя. Вимірювання будуть у пікселях поруч з курсором перехрестя, і знаходяться ширина, висота і довжина діагоналі вибраної області. Щоб вимкнути інструмент, повторно міра команду.

3. Швидко редагуйте файли

Команда: редагувати

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

4. Знайдіть незнайомі властивості CSS

Команда: mdn css

Це одна досить прохолодна команда - це свого роду спливаючий словник для властивостей CSS. Якщо ви зіткнетеся з незнайомим властивістю CSS, і хочете перевірити, для чого він призначений, запустіть команду mdn css в GCLI з замінюється фактичною назвою незнайомої власності.

З'явиться спливаюче вікно з “визначення” для цього властивості CSS над панеллю інструментів. Визначення є витяг з сторінки офіційної мережі розробників Mozilla (MDN) даного майна. Глосарій властивостей CSS, елементів HTML і веб-API API MDN називається дуже високим.

Якщо текст, показаний у спливаючому вікні, недостатньо, і ви хочу знати більше, натисніть посилання Відвідайте сторінку MDN у спливаючому вікні, і відповідна сторінка MDN для цього властивості буде відкрита. Зараз ця команда доступна лише для властивостей CSS.

5. Змінити розмір сторінки

Команда: змінити розмір на

За допомогою інструмента "Змінити розмір" можна побачити, як виглядає ваша сторінка змінюється на конкретні розміри, які можуть бути корисними, коли ви хочете переглянути зображення своєї сторінки на пристроях з розмірами, відмінними від показників, на яких ви працюєте.

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

Розміри інтерпретується в пікселях. Після запуску команди ви побачите сторінку з розміром.

6. Перезапустіть браузер

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

Ця команда є самоочевидною. Щоб перезапустити Firefox, просто введіть перезапустити у командному рядку та натисніть Enter - може стати в нагоді, коли ви встановлюєте додатки або плагіни, які потребують перезавантаження.

7. Відкрийте папку профілю Firefox

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

Кожен користувач Firefox отримує їх власну папку місцевого профілю що зберігає файли, специфічні для користувача, такі як закладки та / хром папки. Під час персоналізації Firefox може знадобитися переглядати та змінювати вміст цієї папки.

Альтернативний спосіб відкрити цю папку - натиснути кнопку Показати папку на about: підтримка стор. Запустивши команду папка openprofile у командному рядку Firefox ви побачите папку профілю відкрито відразу.

8. Копіювати значення кольору

Команда: піпетка

Крім того, що він підтримує тільки шістнадцятковий формат, піпетка є блискучим інструментом для копіювання значення кольору будь-якого видимого відтінку на веб-сторінці. Введіть команду піпетка в GCLI для перемикання функціональності інструмента.

9. Перевірка зовнішніх бібліотек

Команда: ін'єкції

Якщо ти хочеш перевірити деякі зовнішні бібліотеки на веб-сторінці замість занурення у вихідний код, щоб зробити тимчасові доповнення, просто використовуйте ін'єкції команду вставити бібліотеки. Наприклад, для включення типу jQuery введіть jQuery.

При виконанні команди ресурс буде імпортовано на сторінку шляхом вставки a > в тезі HTML-документа.

10. Зробіть скріншоти

Команда: скріншот

The вбудований інструмент знімання екрана в Firefox досить потужний. Наприклад, ви можете націлювати окремі елементи за допомогою CSS-селекторів, використовувати таймер, застосовувати a dpr. Ви навіть можете зробити знімок екрана тільки хромована частина браузера (область навколо вмісту користувача) за допомогою скріншот --хром команду.

Скріншоти зберігаються в Завантажити папку браузера у форматі PNG.

11. Відкриті лінійки

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

Ще один чудовий інструмент з Firefox, який легко доступний через GCLI. The правителів команду відображає горизонтальні та вертикальні лінійки навколо сторінки. Вимірювання правителів в пікселях. Вимкніть ту саму команду, щоб вимкнути лінійку.

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

Команда: консоль відкрита і dbg відкрито

Якщо клавіатура замикається на відкриття веб-консолі або інструмента відладчика вислизнули з розуму, не турбувалися, просто введіть просту команду консоль відкрита або dbg відкрито у командний рядок Firefox, щоб відкрити відповідний інструмент.

13. Перерахуйте елементи сторінки

Команда: qsa

Ця відмінна команда від GCLI здійснює швидкий перепис елементів на веб-сторінці відповідати будь-якому селектору CSS. Наприклад, щоб отримати кількість всіх на сторінці, використовуйте qsa a команду.

14. Увімкніть або вимкніть додаткові компоненти

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

Якщо вам коли-небудь знадобиться обстеження та керування додатками Firefox, я рекомендую вам це зробити скористайтеся командами GCLI, а не меню Додатки тому що версія GCLI перелічує всі доповнення та плагіни, включаючи попередньо встановлені, які не можуть бути перелічені в меню Додатків.

Ви можете перемикати статус розширення в GCLI за допомогою команди аддон за ним слідує відповідна підкоманда увімкнути або вимкнути.

На демонстрації нижче ви можете побачити як швидко відключити Pocket у Firefox.

15. Керуйте налаштуваннями

Команда: pref show

Є тонни налаштування налаштування користувачі можуть отримати доступ через Firefox about: config стор. Ці ж налаштування можна також переглядати та змінювати за допомогою GCLI.

Використання GCLI для доступу до параметрів налаштування більш швидкий варіант якщо ви вже знаєте, яку конфігурацію потрібно переглянути або змінити. До встановити значення параметра, використовувати pref set команді і до скинути налаштування, тип pref reset .

На демонстрації нижче ви можете побачити, як це зробити перевірте URI введіть jQuery команда введена на сторінку (див. розділ # 9 у цій статті):