10 nützliche Firefox-Entwicklertools, die Sie kennen sollten

Firefox als "Browser für Entwickler" bietet viele großartige Tools, die unsere Arbeit erleichtern. Weitere Informationen zur Tool-Sammlung finden Sie auf der Firefox Developer Tools-Webseite. Außerdem können Sie den Developer Edition-Browser ausprobieren, der über weitere Funktionen und Tools verfügt, die getestet werden.

Für diesen Beitrag habe ich aufgeführt 10 handliche Werkzeuge Vielleicht möchten Sie aus der Entwickler-Tools-Sammlung. Ich habe auch gezeigt, was diese Tools mit GIFs tun können, und wie Sie darauf zugreifen können, um schnell darauf zugreifen zu können.

1. Horizontale und vertikale Lineale anzeigen

Firefox verfügt über ein Lineal Zeigt sowohl horizontale als auch vertikale Lineale mit Pixeleinheiten an auf der Seite. Das Tool ist nützlich, um Ihre Elemente auf der Seite anzuordnen.

Um über das Menü auf Lineale zuzugreifen, gehen Sie zu: ☰> Entwickler > Entwickler-Symbolleiste (Abkürzung: Umschalt + F2). Wenn die Symbolleiste am unteren Rand der Seite angezeigt wird, geben Sie Folgendes ein Lineale und drücke Eingeben.

Gehen Sie zu "Toolbox-Optionen", damit dies im Entwickler-Tools-Fenster angezeigt wird. Aktivieren Sie im Abschnitt "Verfügbare Toolbox-Schaltflächen" die Option "Schaltet die Lineale für die Seite um"Kontrollkästchen.

2. Machen Sie Screenshots mit CSS-Selektoren

Obwohl Sie mit der Firefox-Symbolleiste Screenshots der gesamten Seite oder der sichtbaren Bereiche erstellen können, ist meiner Meinung nach die CSS-Auswahlmethode für die Erfassung nützlicher Screenshots einzelner Elemente sowie für Elemente, die im Mauszeiger sichtbar sind nur (wie Menüs).

Um Screenshots über das Menü aufzunehmen, gehen Sie zu ☰> Entwickler > Entwickler-Symbolleiste (ShortcutShift + F2). Wenn die Symbolleiste am unteren Rand der Seite angezeigt wird, geben Sie Folgendes ein Screenshot --selector any_unique_css_selector und drücke eingeben.

Um dies im Entwickler-Tools-Fenster anzuzeigen, klicken Sie auf "Toolbox-Optionen" und unter "Verfügbare Toolbox-Schaltflächen" auf "Aktivieren".Machen Sie einen ganzseitigen Screenshot " Kontrollkästchen.

3. Wählen Sie Farben von Webseiten aus

Firefox verfügt über ein eingebautes Farbauswahl-Tool mit dem Namen "Pipette". Um über das Menü auf das Werkzeug "Pipette" zuzugreifen, gehen Sie zu ☰> Entwickler > Pipette.

Um dies im Entwickler-Tools-Fenster anzuzeigen, klicken Sie auf "Toolbox-Optionen" und prüfen Sie im Abschnitt "Verfügbare Toolbox-Schaltflächen".Besorgen Sie sich eine Farbe von der Seite"Kontrollkästchen.

4. Seitenlayout in 3D anzeigen

Das Anzeigen von Webseiten in 3D hilft bei Layoutproblemen. Sie können die verschiedenen Ebenenelemente in der 3D-Ansicht viel klarer sehen. Um die Webseite in 3D anzuzeigen, klicken Sie auf die Schaltfläche "3D-Ansicht".

Damit dies im Entwickler-Tools-Fenster angezeigt wird, klicken Sie auf "Toolbox-Optionen". Aktivieren Sie im Abschnitt "Verfügbare Toolbox-Schaltflächen" das Kontrollkästchen "3D-Ansicht"Kontrollkästchen.

5. Browser-Stil anzeigen

Browser-Stile bestehen aus zwei Arten: dem Standardstil, den ein Browser jedem Element zuordnet, und den browserspezifischen Stilen (die mit dem Browser-Präfix). Wenn Sie sich die Browserstile ansehen, können Sie dies tun diagnostizieren Sie alle Überschreibungsprobleme in Ihrem Stylesheet und lernen Sie auch alle vorhandenen Browserspezifischen Stile kennen .

Um über das Menü auf "Browserstile" zuzugreifen, gehen Sie zu ☰> Entwickler > Inspektor. Klicken Sie dann im rechten Bereich auf die Registerkarte "Berechnet" und aktivieren Sie das Kontrollkästchen "Browserstile".

Sie können auch die "öffnen"Inspektor"Tab durch die Verknüpfung Strg + Umschalt + C und dann auf" Browser-Stile "zugreifen.

6. Deaktivieren Sie JavaScript für die aktuelle Sitzung

Aus Gründen der Best Practice und der Kompatibilität mit Bildschirmlesern wird immer empfohlen, jede Website so zu codieren, dass ihre Funktionalität in einer Javascript-deaktivierten Umgebung nicht behindert wird. Um auf solche Umgebungen zu testen, können Sie Deaktivieren Sie das JavaScript für die Sitzung, in der Sie gerade arbeiten.

Um JavaScript für die aktuelle Sitzung zu deaktivieren, klicken Sie auf "Toolbox-Optionen". Aktivieren Sie im Abschnitt "Erweiterte Einstellungen" die Option "Javascript ausschalten* "Ankreuzfeld.

7. Blenden Sie den CSS-Stil auf der Seite aus

Genau wie JavaScript ist es aus Gründen der Barrierefreiheit am besten, Websites so zu gestalten, dass Die Seiten sollten auch ohne Formatvorlagen lesbar sein. Um zu sehen, wie die Seite ohne Stil aussieht, können Sie sie in den Entwicklerwerkzeugen deaktivieren.

Um einen auf einer Webseite angewendeten CSS-Stil (Inline, Intern oder Extern) zu entfernen, genügt dies Klicken Sie auf das Augensymbol der aufgelisteten Stylesheets in der Registerkarte "Style Editor". Klicken Sie erneut darauf, um zur ursprünglichen Ansicht zurückzukehren.

Um über das Menü auf den "Style Editor" zuzugreifen, gehen Sie zu ☰> Entwickler > Stileditor (Abkürzung: Umschalt + F7.

8. Zeigen Sie eine Vorschau der HTML-Inhaltsantwort auf eine Anforderung an

Firefox-Entwicklertools haben eine Option dazu Vorschau der Antworten des HTML-Inhaltstyps. Dies hilft dem Entwickler, eine Vorschau von 302 Weiterleitungen anzuzeigen und zu prüfen, ob in der Antwort sensible Informationen gerendert wurden oder nicht.

Um über das Menü auf "Vorschau" zuzugreifen, gehen Sie zu ☰> Entwickler > Netzwerk (Tastenkombination: Strg + Umschalt + Q. Öffnen Sie dann die gewünschte Webseite oder laden Sie die aktuelle Seite neu, klicken Sie auf gewünschte Anfrage (mit HTML-Antwort) aus der Liste der Anfragen und klicken Sie auf "Vorschau"Tab im rechten Bereich.

9. Vorschau einer Webseite in verschiedenen Bildschirmgrößen

Um eine Website auf ihre Reaktionsfähigkeit zu testen, verwenden Sie die "Responsive Design View", auf die Sie mit ☰> zugreifen können Entwickler > Responsive Design-Ansicht oder mit der Tastenkombination: Strg + Umschalttaste + M.

Damit die Schaltfläche "Responsive Design Mode" angezeigt wird, klicken Sie auf "Toolbox-Optionen" und aktivieren Sie unter "Verfügbare Toolbox-Schaltflächen" das Kontrollkästchen "Responsive Design Mode".

10. Führen Sie JavaScript auf Seiten aus

Für eine schnelle Ausführung von JavaScript auf jeder Webseite verwenden Sie einfach das "Scratchpad" -Tool von Firefox. Um über das Menü auf "Scratchpad" zuzugreifen, gehen Sie zu; ☰> Entwickler > Scratchpad oder verwenden Sie die Tastenkombination Umschalttaste + F4.

Um die Schaltfläche "Scratchpad" für die schnelle Verwendung im Fenster der Entwickler-Tools anzuzeigen: Klicken Sie auf "Toolbox-Optionen"und unter dem"Verfügbare Toolbox-Schaltflächen"Abschnitt" Scratchpad "überprüfen Kontrollkästchen.