Im Folgenden finden Sie Funktionen und Tipps zur Verwendung der Firefox-Entwicklertools. Einige davon ähneln den Funktionen von Tools in Chrome, andere enthalten keine Analoga in anderen Browsern.

Achtung, unter dem Schnitt viele schwere Gifs!

Inspektor

CSS-Selektorsuche

Es ist sehr bequem zu verwenden für:

• Elemente mit "Z-Index", die nicht angeklickt werden können
• visuell die gleichen Elemente, für die Sie den Selektor kennen

Stilfilter

Sie können CSS-Regeln nach beliebigen Selektoren oder Eigenschaften filtern.

Bei Selektoren hebt der Filter die Selektoren in der Regelliste hervor. Bei Eigenschaften erweitert das Tool alle Eigenschaften, die Ihren Filter enthalten, hebt sie farblich hervor und blendet auch die Regeln aus, für die keine Eigenschaften im Filter vorhanden sind.

Farbwähler und Pipette

Klicken Sie im Inspektor auf eine beliebige Stelle mit Farbe, um ein praktisches Werkzeug zu öffnen.

Farbdarstellungen ändern

Mit gedrückter Umschalttaste und einem Klick auf einen Farbpunkt können Sie die Farbdarstellung ändern (Name / Hex / HSL / RGB).

Wenn Sie bei gedrückter Umschalttaste auf einen Punkt in der Nähe der Ecke klicken, können Sie die Winkeleinheiten ändern.

Bearbeiten von Bezierkurven von Zeitfunktionen

Klicken Sie auf einen Punkt mit einer gekrümmten Linie neben der Zeitfunktionseigenschaft, um einen praktischen Editor zu öffnen. Es gibt sowohl vordefinierte Funktionen als auch die Möglichkeit, Ihre Version manuell zu konfigurieren.

Konsole

CSS-Anwendung

console.log(“#%c%s%c%s”, “color: #bada55”, “dev”, “color: #c55”, “tricks”) 

Nicht alle Eigenschaften werden unterstützt, aber ziemlich viel .

Verlaufssuche

Drücken Sie STRG + R auf dem Mac (und F9 unter Windows und Linux). Verwenden Sie dann STRG + R / STRG + S ( F9 / UMSCHALT + F9 ), um vorwärts / rückwärts zu scrollen. Im Gegensatz zu Pfeilen funktionieren die oben genannten Tastaturkürzel zwischen Sitzungen.

Screenshot einer Seite oder ihres Elements

 :screenshot — fullpage :screenshot — selector .css-selector 

Es ist viel bequemer, einfach den Selektor anzugeben, als zu versuchen, den gewünschten Bereich mit der Maus genau auszuwählen.

JavaScript-Kontextwechsel

 cd(iframe) 

Sie können per Selektor mit cd () in den iframe- Kontext wechseln.

Timer-Tags

 console.time(“#devtricks”) console.timeEnd(“#devtricks”) 

Starten Sie den Timer - console.time ("label") ,

stoppen Sie es - console.timeEnd ("label") .

JavaScript-Debugger

Bedingte Haltepunkte

Um einen Punkt zu erstellen, klicken Sie mit der rechten Maustaste auf die Zeilennummer. Der Punkt ist nur aktiv, wenn die Bedingung erfüllt ist.

Suche nach Funktionsname oder Zeilennummer

Die Dateinamensuche lautet unter Mac CMD + P (und unter Windows und Linux STRG + P ).

Geben Sie " @" in dieselbe Eingabe ein, um nach Funktionsdeklaration in der Datei zu suchen.

Geben Sie ": " in die gleiche Eingabe ein, um schnell zu der Zeile anhand ihrer Nummer zu gelangen.

Schöne minimierte Code-Ausgabe

Klicken Sie auf das Symbol {} , um einen schönen Code anstelle eines minimierten Codes anzuzeigen.

URL-Haltepunkte

Der Punkt wird aktiv, wenn Sie versuchen, auf die URL zuzugreifen, und den Code anzeigen, der für den Zugriff verantwortlich ist.

Haltepunkte deaktivieren

Deaktivierte Punkte bleiben für die Aufnahme und zukünftige Verwendung verfügbar.

Netzwerk

Bearbeiten und Weiterleiten von HTTP-Anfragen

Übermittelte Anfragen bearbeiten und erneut übermitteln.

Abfragefilter

Der Domänenfilter ist CMD + F unter Mac (oder STRG + F unter Windows und Linux).

Wenn Sie alle Abfragen ohne Domain finden müssen , fügen Sie vor dem Filter einen Bindestrich ( - ) ein.

Geschwindigkeitsbegrenzung

Überprüfen Sie, wie die Site geladen wird, wenn das Internet langsam ist.

Hot / Cold Profiling

Klicken Sie auf das Timer-Symbol, um die Abfrageleistung der Site anzuzeigen. Die Seite wird zweimal geladen - ohne Cache (Emulation des ersten Ladevorgangs) und mit Cache (Emulation eines wiederholten Aufrufs).

Speichern / Laden von HAR

Wir speichern die perfekten Anfragen im Archivformat . Praktisch, um mit anderen Entwicklern zu teilen.

Responsive Design

Benutzerdefiniertes Gerät

Sehen Sie, wie die Site nach Geräten mit benutzerdefinierter Auflösung sucht.

Geschwindigkeitsbegrenzung

Wir beobachten den Download der mobilen Version im mobilen Internet.

Emulation von Tachi

Dafür ist ein kleines Symbol mit einer „Hand“ verantwortlich. Emuliert, einschließlich langer Tapas.

Ändern Sie den Benutzeragenten

Vergessen Sie nicht, in den Einstellungen die Option "Seite beim Ändern der Benutzeroberfläche neu laden" zu aktivieren - sparen Sie Zeit.

Linke Ansichtsfensterausrichtung

Praktisch, wenn Sie Panels rechts platzieren möchten (z. B. zum Debuggen).

Lagerinspektor

Cookies bearbeiten

Doppelklicken Sie auf die Zelle, deren Wert Sie ändern möchten.

Cookies entfernen

Am einfachsten können Sie Cookies löschen, indem Sie sie auswählen und auf "Zurück" klicken.

Beachten Sie die Optionen des Kontextmenüs. Die Option "Alles für eine Domain löschen" ist sehr praktisch, bedenken Sie jedoch, dass die Domain korrekt sein muss (d. H. Das Löschen von Cookies für .medium.com löscht sie nicht für medium.com ).

Echtzeit-Änderungs-Cookies

Gerade geänderte Cookies blinken orange.

Statische Snapshots für IndexedDB

Sie können Änderungen in IndexedDB-Datensätzen nicht in Echtzeit sehen. Verwenden Sie daher die Schaltfläche "Aktualisieren", um den aktuellsten Datenbank-Snapshot abzurufen.

Ändern der angezeigten Tabellenspalten

Wenn Sie mit der rechten Maustaste auf die Tabellenüberschrift klicken, werden uninteressante Spalten ausgeblendet.

Das ist alles Ich hoffe die Tipps waren hilfreich!