So überprüfen Sie Elemente in Safari, Chrome und Firefox auf dem Mac

Die Überprüfung von Elementen ist eine grundlegende Fähigkeit, die es jedem ermöglicht, den Aufbau einer Website zu verstehen und notwendige Anpassungen vorzunehmen. Sie müssen kein Webentwickler sein, um Elemente auf einem Mac mit jedem modernen Browser mit nur wenigen Klicks überprüfen zu können. Glücklicherweise ist die Überprüfung von Elementen ein integriertes Tool in allen modernen Browsern und Sie benötigen dafür keine spezielle Software. Dieses Tutorial enthält schrittweise Anweisungen zur Überprüfung von Elementen in Safari, Chrome und Firefox auf dem Mac.

Tipp: Sie möchten von Chrome zu Firefox als Standardbrowser wechseln? Wir bieten Ihnen alles, was Sie für einen reibungslosen Übergang benötigen.

Was ist Inspect Elements?

„Elemente untersuchen“ ist eine leistungsstarke Funktion, die in allen modernen Webbrowsern verfügbar ist und mit der Sie mehr über eine Webseite erfahren können, beispielsweise über deren Struktur, Layout und Stil. Entwickler und Online-Content-Designer verwenden diese Tools häufig zum Debuggen, Experimentieren und Beheben von Problemen in einem Webprojekt. Sie können einfach ein Element einer Website auswählen und das Untersuchungstool gibt alle Informationen zu einem bestimmten Element an, beispielsweise Farbe, Schriftart, Größe und andere Elemente.

Mit dem Inspektionstool können Sie den Code auch vorübergehend ändern und die auf der Webseite vorgenommenen Änderungen in Echtzeit anzeigen. Die Änderungen sind jedoch nur für Sie sichtbar. Es ist ein leistungsstarkes Tool für Sie, egal ob Sie ein erfahrener Entwickler sind oder einfach nur neugierig, wie eine bestimmte Website erstellt wird.

Ist Ihnen das Firefox Relay-Popup begegnet? Wir zeigen Ihnen, wie Sie das Firefox Relay-Dropdown-Menü aus E-Mail-Feldern entfernen.

So überprüfen Sie Elemente in Google Chrome auf dem Mac

Beginnen wir mit der Überprüfung von Elementen in Chrome, dem beliebtesten Browser. Die Schritte sind relativ einfach, sodass Sie im Handumdrehen loslegen können.

So öffnen Sie das Inspektionsfenster in Google Chrome

1. Öffnen Sie den Chrome-Browser und besuchen Sie die Website, die Sie überprüfen möchten.

2. Klicken Sie mit der rechten Maustaste auf eine beliebige leere Stelle und wählen Sie „Untersuchen“ aus.

3. Sie sehen das Inspektionsfeld auf Ihrem Bildschirm.

Gut zu wissen: Sie verwenden Chrome für Mac nicht? Entdecken Sie, wie Sie das Tool „Inspect“ von Google Chrome zur Website-Diagnose auf einem Windows-PC verwenden.

So überprüfen Sie ein bestimmtes Element einer Webseite in Google Chrome

Nachdem Sie nun das Inspektionsfenster erfolgreich geöffnet haben, lernen wir, wie Sie mit einem Element interagieren.

1. Klicken Sie in der linken Ecke des Inspektionsfensters auf „Wählen Sie ein Element aus, um es zu inspizieren.“

2. Wählen Sie ein beliebiges Element aus. In diesem Beispiel untersuchen wir ein Bild auf der Webseite. Sie können dies mit jedem beliebigen Element tun. Sie sehen ein weißes Feld mit einigen grundlegenden Informationen, wie z. B. dem Elementtyp, dem Dateinamen usw. Auf der rechten Seite sehen Sie den mit dem jeweiligen Element verknüpften Code.

So zeigen Sie die mobile Version einer Website in Google Chrome an

1. Klicken Sie auf der linken Seite des Inspektionsfensters auf die Option „Gerätesymbolleiste umschalten“.

2. Sie werden sehen, wie die Website auf einem Mobilgerät reagiert. Sie können Ihre Inspektion weiterhin durchführen, indem Sie auf das Element klicken, und die Informationen basieren auf Smartphones.

3. Wenn du oben auf das Dropdown-Menü „Responsive“ klickst, kannst du aus der Liste ein Gerät deiner Wahl auswählen. Dabei siehst du, wie die Webseite auf ein bestimmtes Smartphone-Modell reagiert.

So ändern Sie den Speicherort des Inspektionsfelds in Google Chrome

1. Klicken Sie auf die vertikalen Auslassungspunkte mit den drei Punkten in der rechten Ecke des Inspektionsfensters.

2. Wählen Sie den Standort für die Inspektionsstation aus: links, unten oder in einem Popup-Fenster.

So überprüfen Sie Elemente in Safari auf dem Mac

Die Funktion „Elemente prüfen“ ist in Safari standardmäßig deaktiviert, da sie Teil der Entwickleroption ist. Daher müssen wir zuerst das „Entwicklermenü“ aktivieren.

Tipp: Sie möchten auf Ihrem Mac von Chrome zu Safari als Standardbrowser wechseln? Wir zeigen Ihnen alle Schritte, die Ihnen beim Übergang helfen, ohne dass Sie Ihre bevorzugten Lesezeichen, Erweiterungen usw. verlieren.

So öffnen Sie das Inspektionsfenster in Safari

1. Sobald Sie Safari geöffnet haben und sich bereits auf der Website befinden, die Sie überprüfen möchten, klicken Sie auf das „Safari“-Symbol in der oberen Menüleiste und wählen Sie „Einstellungen“.

2. Sie gelangen nun zur Registerkarte „Allgemein“. Wählen Sie ganz rechts die Registerkarte „Erweitert“ aus.

3. Aktivieren Sie das Kontrollkästchen neben „Entwicklermenü in der Menüleiste anzeigen“, um Zugriff auf alle erweiterten Funktionen von Safari zu erhalten.

4. Klicken Sie mit der rechten Maustaste irgendwo auf die Website und wählen Sie „Element untersuchen“. Dadurch wird das Fenster „Elemente untersuchen“ in Safari geöffnet.

5. Für erweiterte Optionen klicken Sie in der Menüleiste auf die Registerkarte „Entwickeln“.

So überprüfen Sie ein bestimmtes Element einer Webseite in Safari

1. Klicken Sie auf das „Untersuchen“-Symbol, das wie eine Zielscheibe aussieht und sich in der linken Ecke des Untersuchungsbereichs befindet.

2. Wählen Sie mit dem Cursor das Element aus, das Sie überprüfen möchten. In diesem Beispiel überprüfen wir das Titel-Tag, Sie können jedoch jedes beliebige Element überprüfen.

So zeigen Sie die mobile Version einer Website in Safari an

1. Klicken Sie in der oberen Menüleiste auf die Option „Entwickeln“ und wählen Sie „Responsive Design-Modus aktivieren“.

2. Wählen Sie ein beliebiges Gerätemodell aus, das Sie zum Überprüfen der Webseite verwenden möchten.

So ändern Sie die Position des Inspektionsfensters in Safari

Wählen Sie auf der linken Seite des Inspektionsfensters die gewünschte Position aus. Das Inspektionsfenster wird dann entsprechend verschoben.

So überprüfen Sie Elemente in Firefox auf dem Mac

Firefox ist bei erfahrenen Entwicklern und Designern bei der Arbeit an Webprojekten eine beliebte Wahl. Sehen wir uns an, wie wir Elemente in Firefox auf dem Mac überprüfen können.

So öffnen Sie das Inspektionsfenster in Firefox

1. Wenn Sie im Firebox-Browser auf der Webseite sind, die Sie überprüfen möchten, klicken Sie mit der rechten Maustaste und wählen Sie „Überprüfen“.

2. Dadurch wird das Inspektionsfenster im Firefox-Browser geöffnet.

So überprüfen Sie ein bestimmtes Element einer Webseite in Firefox

1. Klicken Sie auf das „Cursor“-Symbol, das Sie in der linken Ecke des Inspektionsfensters sehen.

2. Bewegen Sie den Cursor auf das Element, das Sie überprüfen möchten. In diesem Beispiel überprüfen wir ein Überschriften-Tag, Sie können dies jedoch mit jedem beliebigen Element tun.

So zeigen Sie die mobile Version einer Website in Firefox an

1. Klicken Sie in der rechten Ecke des Inspektionsfensters auf das Smartphone-Symbol.

2. Dadurch wird die Website in einen Smartphone-Viewer konvertiert und geladen. Sie können auf den Schalter „Responsive“ klicken, um ein Mobilgerät Ihrer Wahl auszuwählen.

So ändern Sie den Speicherort des Inspektionsfensters in Firefox

1. Klicken Sie auf die horizontale Auslassungslinie mit den drei Punkten in der rechten Ecke des Inspektionsdocks.

2. Wählen Sie den Standort aus, den Sie aktivieren möchten, und das Inspektionsfeld wird entsprechend verschoben.

Häufig gestellte Fragen

Worin unterscheidet sich die Überprüfung von Elementen vom Anzeigen des Seitenquelltexts?

Inspect Elements ist ein in moderne Browser integriertes Entwicklertool zur Interaktion, Änderung und Fehlerbehebung einer Webseite hinsichtlich HTML, CSS und JavaScript. Wenn Sie die Seitenquelle einer Webseite prüfen, sehen Sie lediglich einen statischen HTML-Code, der vom Server an den Browser übermittelt wurde. Sie können die Gesamtstruktur, den Inhalt und die Tags, wie die Metadaten usw., analysieren, aber das Inspektionstool rendert die Webseite mit all ihren Elementen, korrigiert Fehler und mehr.

Welche anderen Datentypen kann ich durch die Verwendung des Tools „Elemente prüfen“ ermitteln?

Mit „Elemente untersuchen“ erhalten Sie einen umfassenden Überblick über den Aufbau einer Website. Sie erhalten Zugriff auf den eigentlichen HTML-Code mit Hierarchie und Verschachtelung. Sie können das CSS ändern und die Änderungen in Echtzeit sehen, einschließlich Elementen wie Farbe, Schriftgröße usw. Sie können auch den JavaScript-Code sehen, sodass Sie den Code debuggen und analysieren können. Die Funktion „Netzwerkanforderungen“ erleichtert Ihnen das Verständnis der Ressourcen, die extern geladen werden, wie z. B. die Schriftarten der Konsolenausgabe, DOM-Manipulation und mehr.

Können Websitebesitzer die Elementaktivität auf ihren Websites sehen?

Technisch gesehen ja. Zur Klarstellung: Auf allen modernen Websites sind Analyse- und andere Tracking-Tools installiert, die im Wesentlichen alles verfolgen, was Sie auf einer Website tun, von der Verweildauer auf der Website bis hin zu den Klicks. Sie werden von der Website jedoch nie persönlich identifiziert und sind lediglich ein Datenpunkt in einem Cluster von Benutzern, der Ihren demografischen Daten und Ihrem Verhalten entspricht. Diese Systeme dienen dazu, die Leistung der Website zu überwachen und das Benutzererlebnis zu verbessern.

Bist du neugierig auf weitere Artikel wie So überprüfen Sie Elemente in Safari, Chrome und Firefox auf dem Mac? Entdecke spannende Inhalte in der Kategorie Mac.