So prüfen Sie auf dem Mac auf drei verschiedene Arten [2024]

• Mit dem Prüfmodus in Webbrowsern können Sie den Quellcode von Webseiten anzeigen und bearbeiten. Es ist nützlich zum Debuggen, zum Vornehmen von Änderungen an der Benutzeroberfläche und zum Erlernen der Webentwicklung.
• Aktivieren Sie in Safari die Funktion „Element prüfen“ über Safari > Einstellungen > Registerkarte „Erweitert“. Auf dem Mac können Sie auf dieses Tool zugreifen, indem Sie mit der rechten Maustaste klicken, die Menüleiste verwenden oder Tastaturkürzel verwenden.
• Vermeiden Sie versehentliche Änderungen, indem Sie die Seite aktualisieren, um Änderungen rückgängig zu machen. Stellen Sie die browserübergreifende Kompatibilität sicher, indem Sie Elemente in verschiedenen Browsern überprüfen, um zu verhindern, dass Layoutunterschiede übersehen werden.

Der Quellcode einer Webseite kann mit dem Inspect-Modus-Tool in allen Browsern angezeigt werden. Sie können damit vorübergehende Änderungen an der Benutzeroberfläche vornehmen oder Fehler beheben. Die Methode zum Zugriff auf dieses Tool unterscheidet sich jedoch geringfügig von Browser zu Browser, insbesondere bei Verwendung von Safari, dem nativen Browser auf dem Mac.

Dieser Leitfaden führt Sie durch die einzelnen Schritte, damit Sie das Inspect-Modus-Tool in jedem Browser auf Ihrer Codierungsreise verwenden können.

Auf dem Mac prüfen

Warum die Inspektionsfunktion verwenden?

Mit der Inspect-Funktion können Sie einen Blick hinter die Kulissen jeder Webseite werfen, um zu verstehen, wie sie aufgebaut ist. Obwohl es sich hauptsächlich an Web-Builder und Designer richtet, um den Quellcode zu bearbeiten und zeitweise sogar zu debuggen, kann es auch von normalen Benutzern verwendet werden.

Sie werden in zahlreichen Szenarien auf die Notwendigkeit stoßen, Elemente zu überprüfen und Änderungen an den HTML-, CSS- oder Java-Skripten einer Webseite vorzunehmen.

• Um das Layout oder die Webseite für ein angenehmeres Aussehen zu ändern.
• Um den Schriftstil und die Farbe zu ändern, um die Lesbarkeit zu verbessern.
• Um die Google Analytics-Details zu überprüfen.
• Um HTML, Medien, Stylesheets usw. anzuzeigen und zu erfahren, wie eine Website erstellt wird.
• Interagieren Sie mit dem Webseitencode und verbessern Sie Ihre Webentwicklungsfähigkeiten.
• Suchen Sie nach einem fehlerhaften Code.

LESEN SIE MEHR: So öffnen Sie die Browserkonsole in Chrome, Safari, Firefox und Edge ➜

Element prüfen: Mac vs. Windows

Die Funktion „Element prüfen“ ist in den meisten Browsern standardmäßig aktiviert, insbesondere in solchen, die mit mehreren Betriebssystemen kompatibel sind. Dazu gehören Google Chrome und Firefox. Unter Windows können Sie mit der rechten Maustaste auf eine beliebige Seite klicken, um auf deren Kontextmenü zuzugreifen, und dann die Option „Inspizieren“ auswählen.

Die Verwendung desselben Tools im Standardbrowser des Mac, Safari, unterscheidet sich jedoch geringfügig. Sie müssen zunächst zu den Safari-Entwicklertools gehen und die Funktion aktivieren. Hier ist wie:

1. Öffnen Sie den Safari-Browser auf dem Mac.
2. Klicken Sie in der Menüleiste auf Safari > Einstellungen.
   Safari-Einstellungen
3. Gehen Sie zur Registerkarte „Erweitert“.
4. Aktivieren Sie das Kontrollkästchen neben der Option „Funktionen für Webentwickler anzeigen“ und schließen Sie dann das Fenster.
   Erweiterte Safari-Einstellungen

   In früheren Versionen von macOS hieß diese Option möglicherweise „Entwicklermenü in der Menüleiste anzeigen“.

So prüfen Sie Elemente auf dem Mac

Es gibt einige Methoden, mit denen Sie Elemente auf Ihrem Mac überprüfen können. Da alle Methoden das gleiche Ziel haben, können Sie je nach Browser und Benutzerfreundlichkeit eine auswählen.

1. Klicken Sie mit der rechten Maustaste auf Inspektion

Die einfachste Methode zum Überprüfen von Elementen auf Ihrem Mac besteht darin, mit der rechten Maustaste irgendwo auf einer Webseite zu klicken und im Kontextmenü „Element prüfen“ auszuwählen.

Dadurch wird die Inspektoransicht der gesamten Seite geöffnet. Wenn Sie jedoch ein bestimmtes Element auf einer Seite untersuchen möchten, klicken Sie mit der rechten Maustaste gezielt auf dieses Element und wählen Sie „Inspizieren“ aus dem Kontextmenü.

Klicken Sie auf Element prüfen

LESEN SIE MEHR: So sehen Sie den Verlauf der Zwischenablage auf Ihrem Mac in 3 einfachen Schritten ➜

Die zweite Methode besteht darin, eine der Definitionen von macOS zu nutzen Elemente (kein Wortspiel beabsichtigt) – die Menüleiste.

1. Schauen Sie auf die Menüleiste von Safari in der oberen linken Ecke und klicken Sie auf „Entwickeln“.
2. Wählen Sie in der Liste einfach „Web Inspector verbinden/anzeigen“ aus.
   Klicken Sie auf Web Inspector verbinden

3. Tastaturkürzel

Bevorzugen Sie Tastaturkürzel gegenüber dem Trackpad Ihres Mac? Sie können Inspect Element sofort über die Tastatur Ihres Mac öffnen.

1. Drücken Sie einfach gleichzeitig die Tasten „Befehl“ + „Wahl“ + „i“.
   Mac-Tastaturkürzel | Unsplash

Sobald das Inspect Element geöffnet ist, verwenden Sie die Symbole in der oberen linken Ecke, um das Tool an der Seite oder am unteren Rand der Webseite anzudocken oder es je nach Bedarf schwebend und über den Bildschirm verschiebbar zu machen. Passen Sie die Größe des Werkzeugs an, indem Sie den Rand nach Ihren Wünschen ziehen.

Element prüfen

Die erkannten Fehler und Warnungen auf dieser bestimmten Webseite werden auf der entsprechenden Registerkarte angezeigt. Klicken Sie auf die entsprechenden Symbole, um eine detaillierte Ansicht zu erhalten.

Fehler prüfen

Standardmäßig stehen Ihnen neun Registerkarten zur Verfügung. Wenn Sie jedoch diejenigen ausblenden möchten, die Sie nicht benötigen, klicken Sie mit der rechten Maustaste und deaktivieren Sie sie. Wenn Sie das Inspect-Element schließen möchten, klicken Sie einfach auf X oben.

LESEN SIE MEHR: So starten Sie Ihren Mac im abgesicherten Modus [Step-by-Step Guide] ➜

Vermeiden Sie diese Fehler

Im Folgenden werden einige häufige Fehler aufgeführt, die Menschen bei der Überprüfung von Elementen auf dem Mac machen. Auch wenn es sich hierbei um geringfügige Fehltritte handelt, ist es von Vorteil, vorsichtig zu bleiben, um potenzielle Probleme in der Zukunft zu vermeiden.

• Beim Überprüfen von Elementen einer Webseite kann es passieren, dass versehentlich Änderungen am Code vorgenommen werden. Seien Sie daher bei Änderungen äußerst vorsichtig oder aktualisieren Sie die Seite einfach, um sie wieder in den ursprünglichen Zustand zu versetzen.
• Für Front-End-Entwickler ist es am besten, verschiedene Browser zu prüfen, um beim Testen von Webanwendungen nicht deren Kompatibilität zu übersehen. Dies liegt daran, dass jeder Browser Elemente anders darstellt. Stellen Sie daher die Effizienz und Konsistenz der Elemente sicher, indem Sie prüfen, wie sie in verschiedenen Browsern angezeigt werden, bevor Sie Änderungen abschließen.

LESEN SIE MEHR: So kopieren und fügen Sie auf einem Mac auf drei verschiedene Arten ein [2024] ➜

Abschluss

Zusammenfassend lässt sich sagen, dass Inspect Element auf dem Mac ein nützliches Tool zum Anzeigen und Ändern von Website-Elementen ist. Sie haben gelernt, wie Sie in Safari auf diese Funktion zugreifen und einige häufige Fallstricke vermeiden. Jetzt können Sie diese Fähigkeit nutzen, um Websites effizienter zu erkunden und zu verbessern.

Auf dem Mac prüfen

Warum kann ich auf Inspect auf dem Mac nicht zugreifen?

Wenn Sie auf Ihrem Mac keine Elemente überprüfen können, muss das Entwicklermenü in Safari deaktiviert sein. Wenn diese Option nicht aktiviert ist, können Sie die Webseite oder ihre Elemente nicht in der Inspektoransicht öffnen.

Wie läuft die Bearbeitung in Inspect Element auf dem Mac ab?

Klicken Sie mit der rechten Maustaste auf die Seite und wählen Sie im Kontextmenü „Inspizieren“. Navigieren Sie dann zur Registerkarte „Elemente“, wo Sie eine Vorschau des auf dieser bestimmten Webseite verwendeten Codes finden. Sie können auf jeden Abschnitt klicken, um dessen Details zu erweitern. Durch Doppelklicken können Sie das Feld bearbeiten oder die URL ändern, wenn es sich um ein Bild handelt.

Wie verstecke ich ein Element einer Webseite auf einem Mac?

Um ein bestimmtes Element auszublenden, klicken Sie mit der rechten Maustaste darauf und wählen Sie „Inspizieren“. Das ausgewählte Element wird im Inspect-Tool hervorgehoben. Klicken Sie erneut mit der rechten Maustaste darauf und wählen Sie Element ausblenden. Sie können die Option „Element ausblenden“ deaktivieren, um das ausgeblendete Element wieder anzuzeigen.