Wenn Sie schon immer wissen wollten, wie Ihre Lieblingswebseiten strukturiert sind, können die "Inspect" -Dienste eines Browsers ein versteckter Segen sein. Wir haben das "Inspect" -Tool von Chrome abgedeckt, und Firefox bietet ein ähnliches Angebot.

Das Tool "Inspect Element" von Firefox kann Ihnen helfen, die Grundlagen des Betriebs einer Website zu untersuchen, einschließlich der verwendeten HTML- und CSS-Elemente, der Auslastung des Netzwerks, der Latenzzeit der Ladeelemente und der darin gespeicherten Dateien Kekse.

Erfahrene Entwickler finden möglicherweise in diesem Primer nicht viel Neues. Anfänger und alltägliche Internetnutzer sollten jedoch eine neue, mächtige Seite für die Fähigkeiten von Firefox und eine Vielzahl von Dateien und Operationen finden, die unter jeder Website im Internet zu finden sind.

Installation

Wenn Sie Firefox verwenden, müssen Sie nichts weiter tun. Wenn Sie Firefox verwenden möchten und Windows, Linux, Mac, iOS oder Android verwenden, folgen Sie diesem Link, um die neueste Version des Browsers zu finden. Installieren Sie die heruntergeladenen Installationsdateien wie gewohnt, indem Sie auf sie doppelklicken oder auf ein Smartphone tippen.

Große Linux-Distributionen werden wahrscheinlich mit Firefox vorinstalliert sein oder Kopien von Firefox in ihren Software-Center- / Paket-Repositories haben, die der Benutzer leicht installieren kann.

Öffnen "Element prüfen"

Nach der Installation von Firefox finden Sie den Inspektor, indem Sie mit der rechten Maustaste auf ein Element auf einer Webseite klicken. Das zeigt Ihnen ein Dropdown-Menü wie das unten abgebildete, wo sich "Inspect Element" am unteren Ende der Liste befindet.

Inspektor

Wenn Sie auf "Element prüfen" klicken, wird der Inspektor am unteren Bildschirmrand geöffnet. An dieser Stelle werden die Titel etwas unklar, da der Inspektor den "Inspektor" Teil seiner Dienste technisch geöffnet hat.

In jedem Fall wird das Element, auf das Sie geklickt haben, in der Mitte des Werkzeugs angezeigt, und wenn Sie mit der Maus über dieses Element fahren, wie z In der Abbildung unten schwebe ich über den Mauszeiger - der "Inspektor" hebt das visuelle Element auf Ihrem Bildschirm in der Webseite selbst hervor.

Dies macht es einfach zu wissen, welche Elemente Sie betrachten. Es macht es auch einfach, die verschiedenen Eigenschaften dieser Elemente zu finden. Wenn Sie auf die rechte Seite des "Inspektors" schauen, sehen Sie die Eigenschaften dieses spezifischen Objekts Tags, einschließlich der Einstellungen für Rand, Füllung, Rahmen, Schriftgröße und vertikale Ausrichtung.

Wenn Sie durch das rechte Fenster blättern, können Sie die Eigenschaften sehen, die es von anderen Elementen geerbt hat. Sie können sogar die Eigenschaften in diesem Fenster ändern und sehen, dass sie in Echtzeit auf der Webseite erscheinen.

Stil-Editor

Sie können Ihre Reise in den Bereich Cascading Stylesheets (CSS) fortsetzen, indem Sie der Symbolleiste am oberen Rand des Inspektors folgen. Klicken Sie auf "Style Editor", um einen neuen Dialog zu öffnen, der drei neue Bereiche am unteren Bildschirmrand anzeigt.

Hier sehen Sie die zwei Stylesheet-Dateien, die DuckDuckGo verwendet, die Elemente des ersten ausgewählten Stylesheets und die verschiedenen "@media" -Regeln dieses Blattes, die das responsive Design für kleinere und größere Bildschirme steuern.

Sie können diese Stylesheets genau wie im Bereich "Informationen" bearbeiten. In diesem Fall gibt es viele Regeln zur Auswahl - 1262 Regeln im ersten Stylesheet allein.

Wenn Sie in der Symbolleiste noch weiter zum "Netzwerkmonitor" navigieren, finden Sie die Anforderungen der Website für diese Dateien und deren Status. Auf dieser Registerkarte können auch andere Elemente wie Bilder und Schriftarten vorhanden sein, und Sie können alle Anforderungen und die Größe jeder Datei anzeigen, nachdem die Anforderung verarbeitet wurde.

Performance

Wenn Sie die Registerkarte "Leistung" öffnen, müssen Sie auf die Schaltfläche "Aufzeichnungsleistung starten" klicken, damit der Prüfer Informationen sammelt. In wenigen Sekunden werden die Frames pro Sekunde (FPS), auf denen Ihre Seite ausgeführt wird, DOM-Ereignisse (Document Object Model) und Style-Neuberechnungen neben der Zeit (normalerweise in Millisekunden), die diese Elemente benötigt haben, ermittelt Belastung.

Für diese Site können Sie sehen, dass das hervorgehobene DOM-Ereignis, ein Mouseover, 6, 03 Millisekunden dauerte, um geladen zu werden. Der durchschnittliche FPS für diese Seite war ungefähr 39. Und das Diagramm, das meinen Bereich von Antwortzeiten zeigt, erreichte 9000 Millisekunden für einige Ereignisse.

Erinnerung

In der Registerkarte "Speicher" müssen Sie auch auf eine Schaltfläche - "Take Snapshot" - klicken, um Informationen zu sammeln. Für mich erzeugte es eine Karte von Ereignissen, die ungefähr 600 Kb an Strings, 1 Mb an Objekten und 1 Mb an Skripten zeigt, die ihre Wege in den Speicher finden. Sie können dieselben Elemente auf verschiedene Arten anzeigen, indem Sie auf das Dropdown-Menü klicken, in dem "Baumkarte" steht, wie Sie in diesem Screenshot sehen können.

Lager

Wenn Sie schließlich auf die Registerkarte "Speicher" klicken, können Sie permanente Dateien sehen, die eine Website möglicherweise auf Ihrem Computer abgelegt hat. Relevant für die meisten Benutzer sind Cookies. Sie können eine im Bild unten geladen sehen.

Sie können auf der rechten Seite sehen, dass dieser bestimmte Cookie in der Mitte des nächsten Jahrzehnts abläuft und dass ich während der Sitzung dieses Artikels darauf zugegriffen habe.

Fazit

Es gibt eine Menge zu durchwaten, wenn Sie den Firefox-Inspektor verwenden. Diese Einführung in die verschiedenen Teile sollte Sie für eine Weile beschäftigen.

Nehmen Sie sich etwas Zeit, um die HTML-Elemente einer Site zu ändern. Besuchen Sie einige verschiedene Websites, um deren Ladezeiten zu sehen. Finden Sie heraus, wie viele Cookies eine bestimmte Seite auf Ihrem Computer speichert. Manchmal kann diese Information eine Pause machen.

Hoffentlich wird Ihnen diese Entdeckungsreise ein besseres Verständnis davon geben, was Websites tun, damit sie so funktionieren können, wie Sie es erwarten. Es kann viel mehr sein, als Sie bisher realisiert haben.

Bildnachweis: Firefox Quantum-Homepage von DepositPhotos