15 Befehle für die grafische Befehlszeile (GCLI) in Firefox für Front-End-Entwickler

Egal wie viele ausgefallene Knöpfe und Menüs wir haben, es gibt immer Programmierer, die es zu schätzen wissen Kommandozeilenzugriff in ihrem Arbeitsumfeld, besonders wenn es eliminiert die Suche nach der richtigen Taste oder dem richtigen Menü das zeigt die erforderliche Einstellung in unserer Sichtlinie.

Firefox hatte eine Grafischer Befehlszeileninterpreter, oder kurz a GCLI seit einiger Zeit und erweitert seinen Befehlssatz im Laufe der Zeit. Die GCLI-Befehle bieten Entwicklern eine Schneller Zugriff auf Entwicklungs- und Konfigurationstools. Es hat auch eine Autovervollständigung; Wenn Sie bei der Eingabe eines Befehls die Tabulatortaste drücken, werden die von GCLI vorgeschlagenen Befehle eingegeben.

Die Symbolleiste

Firefox's GCLI ist auch bekannt als Entwickler-Symbolleiste. Es gibt Drei Wege um es zu öffnen:

1. Drücken Sie die Tastenkombination Umschalt + F2.
2. Drücke den “Menü öffnen” (Hamburger) -Symbol auf der rechten Seite der Adressleiste (rechts von der Start-Schaltfläche) und klicken Sie dann auf Entwickler> Symbolleiste für Entwickler Untermenü.
3. Aktivieren Sie in der oberen Menüleiste das Kontrollkästchen Extras> Web Developer> Developer Toolbar Möglichkeit.

Sobald die Developer Toolbar geöffnet ist, können Sie sie sehen am unteren Rand des Browserfensters. Wenn Sie sich entschieden haben, mit der GCLI, Ich empfehle, es während der Arbeit ständig offen zu lassen.

Nun sehen wir einige nützliche Aufgaben, die Sie in Firefox ausführen können mit seiner GCLI.

1. Entfernen Sie Seitenelemente

Befehl: pagemod Element entfernen

Wenn Sie sich das Layout einer Webseite noch einmal ansehen möchten mit einigen Elementen entfernt, Geben Sie einfach den Befehl ein pagemod Element entfernen in die Firefox-Befehlszeile, um diese Elemente von der Seite zu entfernen.

Der Wert von muss ein sein gültiger CSS-Selektor auf der Seite. Angenommen, Sie möchten auf einer Seite alle Verknüpfungen (speziell) der Klasse entfernen .btn, Der Befehl wird geschrieben als: pagemod element a.btn entfernen.

Im Allgemeinen der Befehl Pagemod wird für verwendet eine Seite ändern, entweder entfernen oder ersetzen Sie ausgewählte Elemente oder Attribute.

2. Elemente messen

Befehl: messen

Wenn du möchtest kenne die Messung Von jedem visuellen Modul auf einer Webseite gibt es dafür ein Werkzeug. Das “messen” Das Tool ist sowohl über das typische Webentwickler-Toolset als auch über die GCLI verfügbar.

Geben Sie ein und geben Sie das ein messen Befehl in die Befehlszeile und der Cursor wird biegen Sie in ein Fadenkreuz ab. Die Messungen werden sein in Pixel angezeigt neben dem Fadenkreuz und sind von der Breite, Höhe und Diagonale des ausgewählten Bereichs. So deaktivieren Sie das Tool, Wiederholen Sie die messen Befehl.

3. Bearbeiten Sie die Dateien schnell

Befehl: bearbeiten

Start Bearbeiten Sie die Ressourcen Ihrer Seite mit dem bearbeiten Befehl. Während Sie den Befehl eingeben, sehen Sie die URIs aller verfügbaren Ressourcen von dieser Seite aus, die Sie mit den Aufwärts- und Abwärtspfeiltasten durchsuchen können. Wenn Sie die Ressource ausgewählt haben, die Sie bearbeiten möchten, drücken Sie die Tabulatortaste, um den Vorschlag automatisch zu vervollständigen, und drücken Sie die Eingabetaste Editorwerkzeug des Browsers wird mit der ausgewählten Datei geöffnet.

4. Suchen Sie nach unbekannten CSS-Eigenschaften

Befehl: mdn css

Dies ist ein ziemlich cooler Befehl - es ist eine Art von Popup-Wörterbuch für CSS-Eigenschaften. Wenn Sie auf eine unbekannte CSS-Eigenschaft stoßen und prüfen möchten, wofür sie steht, führen Sie den Befehl aus mdn css in der GCLI mit durch den tatsächlichen Namen dieses unbekannten Eigentums ersetzt.

Es erscheint ein Popup mit dem “Definition” für diese CSS-Eigenschaft direkt über der Werkzeugleiste. Die Definition ist eine Auszug aus der offiziellen Mozilla Developer Network (MDN) Seite der gegebenen Eigenschaft. Das Glossar der MDN zu CSS-Eigenschaften, HTML-Elementen und Web-APIs wird hoch zitiert.

Wenn der im Popup angezeigte Text nicht ausreicht, und Ihnen will mehr wissen, Sie können auf den Link klicken Besuchen Sie die MDN-Seite in dem Popup und die entsprechende MDN-Seite für diese Eigenschaft wird geöffnet. Derzeit ist dieser Befehl nur für CSS-Eigenschaften verfügbar.

5. Ändern Sie die Größe der Seite

Befehl: Größe ändern auf

Mit dem Werkzeug zur Größenänderung können Sie sehen, wie Ihre Seite aussieht an bestimmte Maße angepasst, Dies kann nützlich sein, wenn Sie das Erscheinungsbild Ihrer Seite in Geräten mit anderen Abmessungen als den, in denen Sie arbeiten, in der Vorschau anzeigen möchten.

Firefox hat auch eine Tastenkombination zum Öffnen dieses Tools: Strg + Umschalt + M (Cmd + Alt + M für Mac). Aber wenn du schon die genauen Abmessungen kennen für die Größenänderung verwendet werden, ist der schnellste Weg die Ausführung von Größe ändern Befehl mit den Abmessungen, die Sie benötigen.

Die Abmessungen sind in Pixel interpretiert. Sobald der Befehl ausgeführt wurde, wird die Seite mit der geänderten Größe angezeigt.

6. Starten Sie den Browser neu

Befehl: Neustart

Dieser Befehl ist selbstverständlich. Um Firefox neu zu starten, geben Sie einfach ein Neustart Klicken Sie in die Befehlszeile, und drücken Sie die Eingabetaste. Dies kann hilfreich sein, wenn Sie Add-Ons oder Plugins installieren, für die ein Neustart erforderlich ist.

7. Öffnen Sie Ihren Firefox-Profilordner

Befehl: Ordner Openprofile

Jeder Firefox-Benutzer erhält seine eigener lokaler Profilordner Das speichert benutzerspezifische Dateien, wie Lesezeichen und die /Chrom Mappe. Wenn Sie Firefox personalisieren, müssen Sie möglicherweise den Inhalt dieses Ordners anzeigen und ändern.

Alternativ können Sie diesen Ordner öffnen, indem Sie auf die Schaltfläche Show Folder (Ordner anzeigen) klicken über: unterstützung Seite. Durch Ausführen des Befehls Ordner Openprofile In der Firefox-Befehlszeile sehen Sie Ihren Profilordner auf einmal öffnen.

8. Farbwerte kopieren

Befehl: Pipette

Abgesehen von der Tatsache, dass nur das Hex-Format unterstützt wird, ist die Pipette ein brillantes Werkzeug für den Farbwert kopieren eines sichtbaren Farbtons auf einer Webseite. Geben Sie den Befehl ein Pipette in die GCLI, um die Funktionsfähigkeit des Werkzeugs umzuschalten.

9. Testen Sie externe Bibliotheken

Befehl: injizieren

Wenn du möchtest Testen Sie einige externe Bibliotheken Verwenden Sie auf Ihrer Webseite anstelle der Eingabe in den Quellcode die temporären Ergänzungen injizieren Befehl an Legen Sie die Bibliotheken ein. Um beispielsweise jQuery einzuschließen, geben Sie einfach ein jQuery injizieren.

Beim Ausführen des Befehls wird die Ressource angezeigt in die Seite importiert werden durch Einfügen von a > tag in die Abschnitt des HTML-Dokuments.

10. Machen Sie Screenshots

Befehl: Bildschirmfoto

Das integriertes Tool zum Aufnehmen von Screenshots in Firefox ist ziemlich mächtig. Sie können zum Beispiel einzelne Elemente mit CSS-Selektoren anvisieren, einen Timer verwenden, einen anwenden dpr. Sie können sogar einen Screenshot von machen nur der Chromteil des Browsers (Bereich, der den Benutzerinhalt umgibt), indem Sie die Screenshot --chrome Befehl.

Die Screenshots werden im gespeichert Download Ordner des Browsers im PNG-Format.

11. Lineale öffnen

Befehl: Lineale

Ein weiteres cooles Tool von Firefox, das über GCLI leicht zugänglich ist. Das Lineale Befehl zeigt horizontale und vertikale Lineale an um die Seite. Die Maße der Lineale sind in Pixel. Führen Sie denselben Befehl aus, um das Lineal zu deaktivieren.

12. Öffnen Sie die Konsole und den Debugger

Befehl: Konsole geöffnet und dbg offen

Wenn die Tastatur für Öffnen der Webkonsole oder des Debugger-Tools Sie haben Ihren Verstand verloren, keine Sorgen, geben Sie einfach den einfachen Befehl ein Konsole geöffnet oder dbg offen in die Firefox-Befehlszeile, um das entsprechende Tool zu öffnen.

13. Seitenelemente zählen

Befehl: qsa

Dieser schnelle Befehl von GCLI nimmt eine schnelle Zählung der Elemente einer Webseite vor passt zu einem bestimmten CSS-Selektor. Zum Beispiel, um alle zählen zu lassen Elemente auf einer Seite verwenden Sie die qsa a Befehl.

14. Aktivieren oder deaktivieren Sie Add-Ons

Befehl: Addon-Liste

Wenn Sie Ihre Firefox-Add-Ons jemals umfragen und verwalten müssen, empfehle ich Ihnen das Verwenden Sie die GCLI-Befehle anstelle des Menüs "Add-Ons" weil die GCLI-Version alle Add-Ons und Plugins auflistet, einschließlich der vorinstallierten, das ist möglicherweise nicht im Add-on-Menü aufgeführt.

Sie können den Add-On-Status in der GCLI mit dem Befehl umschalten Erweiterung gefolgt von dem entsprechenden Unterbefehl aktivieren oder deaktivieren.

Auf der Demo können Sie sehen Wie kann ich Pocket schnell deaktivieren? in Firefox.

15. Einstellungen verwalten

Befehl: Pref Show

Es gibt Tonnen von Anpassungseinstellungen Benutzer können über Firefox zugreifen über: config Seite. Die gleichen Einstellungen können auch mit der GCLI angezeigt und geändert werden.

Verwenden Sie GCLI für den Zugriff auf die Anpassungseinstellungen die schnellere Option Wenn Sie bereits wissen, welche Konfiguration Sie anzeigen oder ändern möchten. Zu Legen Sie einen Wert für eine Einstellung fest, benutze die pref set Befehl und zu eine Einstellung zurücksetzen, Art pref reset .

In der Demo unten können Sie sehen, wie Überprüfen Sie die URI das jQuery injizieren Befehl wurde in die Seite eingefügt (siehe Abschnitt 9 dieses Artikels):