So inspizieren Sie Elemente in Safari, Chrome und Firefox auf dem Mac

Das Inspizieren von Elementen ist eine wesentliche Fähigkeit, die es jedem ermöglicht, zu verstehen, wie eine Website aufgebaut ist, und notwendige Anpassungen vorzunehmen. Sie müssen kein Webentwickler sein, um von der Inspektion von Elementen auf einem Mac mit jedem modernen Browser mit nur wenigen einfachen Klicks zu profitieren. Glücklicherweise ist das Inspizieren von Elementen ein integriertes Tool in allen modernen Browsern, und Sie benötigen keine spezielle Software, um es zu nutzen. Dieses Tutorial bietet Schritt-für-Schritt-Anleitungen, wie Sie Elemente in Safari, Chrome und Firefox auf dem Mac inspizieren können.

Tipp: Möchten Sie von Chrome zu Firefox als Ihrem Standardbrowser wechseln? Wir bieten alles, was Sie benötigen, um einen reibungslosen Übergang zu gewährleisten.

Inhaltsverzeichnis

• Was sind Inspektionselemente?
• So inspizieren Sie Elemente in Google Chrome auf dem Mac
• So inspizieren Sie Elemente in Safari auf dem Mac
• So inspizieren Sie Elemente in Firefox auf dem Mac
• Häufig gestellte Fragen

Was sind Inspektionselemente?

Inspektionselemente ist eine leistungsstarke Funktion, die in allen modernen Webbrowsern verfügbar ist und es Ihnen ermöglicht, mehr über eine Webseite zu erfahren, wie ihre Struktur, ihr Layout und ihr Styling. Entwickler und Online-Inhaltsdesigner verwenden diese Tools häufig, um ein Webprojekt zu debuggen, zu experimentieren und Probleme zu beheben. Sie können ganz einfach ein Element einer Website auswählen, und das Inspektionswerkzeug gibt alle Informationen unter einem bestimmten Element an, wie Farbe, Schriftart, Größe und andere Elemente.

Das Inspektionswerkzeug ermöglicht es Ihnen auch, den Code vorübergehend zu ändern und die Änderungen in Echtzeit auf der Webseite zu sehen. 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 sind, wie eine bestimmte Website aufgebaut ist.

Sind Sie auf das Firefox Relay-Popup gestoßen? Wir zeigen Ihnen, wie Sie das Firefox Relay-Dropdown aus E-Mail-Feldern entfernen.

So inspizieren Sie Elemente in Google Chrome auf dem Mac

Lassen Sie uns mit der Inspektion von Elementen in Chrome beginnen, da es der beliebteste Browser ist. Die Schritte sind ziemlich einfach, sodass Sie in kürzester Zeit loslegen können.

So öffnen Sie das Inspektionspanel in Google Chrome

1. Öffnen Sie den Chrome-Browser und besuchen Sie eine beliebige Website, die Sie inspizieren möchten.

1. Klicken Sie mit der rechten Maustaste auf einen leeren Bereich und wählen Sie “Untersuchen”.

1. Sie sehen das Inspektionspanel auf Ihrem Bildschirm.

Gut zu wissen: Verwenden Sie Chrome nicht für Mac? Entdecken Sie, wie Sie das “Untersuchen”-Tool von Google Chrome für Website-Diagnosen auf einem Windows-PC verwenden.

So inspizieren Sie ein bestimmtes Element einer Webseite in Google Chrome

Jetzt, da Sie das Inspektionspanel erfolgreich geöffnet haben, lernen wir, wie Sie mit einem Element interagieren.

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

1. Wählen Sie ein beliebiges Element aus. In diesem Beispiel inspizieren wir ein Bild auf der Webseite. Sie können dies mit jedem Element tun, das Sie möchten. Sie sehen ein weißes Feld mit einigen grundlegenden Informationen, wie dem Typ des Elements, dem Namen der Datei usw. Auf der rechten Seite sehen Sie den Code, der mit dem bestimmten Element verbunden ist.

So sehen Sie die mobile Version einer Website in Google Chrome

1. Klicken Sie auf der linken Seite des Inspektionspanels auf die Option “Gerätetoolleiste umschalten”.

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

1. Wenn Sie auf das Dropdown-Menü “Responsive” oben klicken, können Sie ein Gerät Ihrer Wahl aus der Liste auswählen. Wenn Sie dies tun, sehen Sie, wie die Webseite auf ein bestimmtes Smartphone-Modell reagiert.

So ändern Sie den Standort des Inspektionspanels in Google Chrome

1. Klicken Sie auf die vertikale drei-Punkte-Ellipse in der rechten Ecke des Inspektionspanels.

1. Wählen Sie den Standort für das Inspektionsdock: links, unten oder in einem Popup-Fenster.

So inspizieren Sie Elemente in Safari auf dem Mac

Die Funktion “Elemente inspizieren” ist standardmäßig in Safari deaktiviert, da sie Teil der Entwickleroption ist. Zuerst müssen wir also das “Entwickeln-Menü” aktivieren.

Tipp: Wechseln Sie von Chrome zu Safari als Ihrem Standardbrowser auf Ihrem Mac? Wir haben alle Schritte, um Ihnen zu helfen, ohne Ihre Lieblings-Lesezeichen, Erweiterungen und mehr zu verlieren.

So öffnen Sie das Inspektionspanel in Safari

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

1. Dies bringt Sie zum Tab “Allgemein”. Wählen Sie den Tab “Erweitert” ganz rechts.

1. Aktivieren Sie das Kontrollkästchen neben “Entwickeln-Menü in der Menüleiste anzeigen”, um Zugriff auf alle erweiterten Funktionen von Safari zu erhalten.

1. Klicken Sie mit der rechten Maustaste irgendwo auf der Website und wählen Sie “Element inspizieren”. Dies öffnet das Inspektionspanel in Safari.

1. Für erweiterte Optionen klicken Sie auf den Tab “Entwickeln” in der Menüleiste.

So inspizieren Sie ein bestimmtes Element einer Webseite in Safari

1. Klicken Sie auf das “inspektieren”-Symbol, das wie ein Fadenkreuz in der linken Ecke des Inspektionsfensters aussieht.

1. Verwenden Sie den Cursor und wählen Sie das Element aus, das Sie inspizieren möchten. Wir inspizieren das Titel-Tag in diesem Beispiel, aber Sie können jedes Element inspizieren, das Sie möchten.

So sehen Sie die mobile Version einer Website in Safari

1. Klicken Sie in der oberen Menüleiste auf die Option “Entwickeln” und wählen Sie “In den responsiven Designmodus wechseln”.

1. Wählen Sie ein beliebiges Gerätemodell aus, das Sie verwenden möchten, um die Webseite zu inspizieren.

So ändern Sie den Standort des Inspektionspanels in Safari

Wählen Sie auf der linken Seite des Inspektionspanels den Standort aus, den Sie möchten, und das Inspektionsfenster wird entsprechend verschoben.

So inspizieren Sie Elemente in Firefox auf dem Mac

Firefox ist eine beliebte Wahl unter erfahrenen Entwicklern und Designern, wenn sie an Webprojekten arbeiten. Lassen Sie uns sehen, wie wir Elemente in Firefox auf dem Mac inspizieren können.

So öffnen Sie das Inspektionspanel in Firefox

1. Sobald Sie sich auf der Webseite befinden, die Sie im Firefox-Browser inspizieren möchten, klicken Sie mit der rechten Maustaste und wählen Sie “Untersuchen”.

1. Dies öffnet das Inspektionspanel im Firefox-Browser.

So inspizieren Sie ein bestimmtes Element einer Webseite in Firefox

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

1. Bewegen Sie den Cursor zu dem Element, das Sie inspizieren möchten. In diesem Beispiel inspizieren wir ein Überschrift-Tag, aber Sie können dies mit jedem Element tun, das Sie möchten.

So sehen Sie die mobile Version einer Website in Firefox

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

1. Dies konvertiert und lädt die Website in einen smartphoneförmigen Viewer. Sie können auf den “Responsive”-Schalter klicken, um ein mobiles Gerät Ihrer Wahl auszuwählen.

So ändern Sie den Standort des Inspektionspanels in Firefox

1. Klicken Sie auf die horizontale drei-Punkte-Ellipse in der rechten Ecke des Inspektionsdocks.

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

Häufig gestellte Fragen

Wie unterscheidet sich das Inspizieren von Elementen vom Anzeigen des Seitenquellcodes?

Das Inspizieren von Elementen ist ein Entwickler-Tool, das in modernen Browsern integriert ist, um mit einer Webseite zu interagieren, sie zu modifizieren und Probleme mit ihrem HTML, CSS und JavaScript zu beheben. Wenn Sie den Seitenquellcode einer Webseite überprüfen, sehen Sie einfach einen statischen HTML-Code, der vom Server an den Browser geliefert wurde. Sie können die gesamte Struktur, den Inhalt und die Tags, wie die Metadaten usw., analysieren, aber das Inspektionswerkzeug rendert die Webseite mit all ihren Elementen, korrigiert Fehler und mehr.

Welche anderen Arten von Daten kann ich durch die Verwendung des Inspektionswerkzeugs entdecken?

Mit dem Inspektionswerkzeug erhalten Sie einen umfassenden Überblick darüber, wie eine Website aufgebaut ist. Sie erhalten Zugriff auf den tatsächlichen 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, der es Ihnen ermöglicht, den Code zu debuggen und zu analysieren. Die Funktion “Netzwerkanfragen” erleichtert es Ihnen, die Ressourcen zu verstehen, die extern geladen werden, wie die Schriftarten der Konsolenausgabe, DOM-Manipulation und mehr.

Können Website-Besitzer die Aktivitäten des Inspektionswerkzeugs auf ihren Websites sehen?

Technisch gesehen ja. Um es klarzustellen: Alle modernen Websites haben Analytik- und andere Tracking-Tools installiert, die im Wesentlichen alles verfolgen, was Sie auf einer Website tun, von der Dauer Ihres Aufenthalts auf der Seite bis zu den Klicks. Sie werden jedoch niemals persönlich von der Website identifiziert, und Sie sind einfach ein Datenpunkt in einem Cluster von Benutzern, der Ihremografischen und Verhaltensdaten entspricht. Diese Systeme sind eingerichtet, um die Leistung der Website zu überwachen und die Benutzererfahrung zu verbessern.

Bildnachweis: Unsplash. Alle Screenshots von Abbaz Uddin.