Wenn Sie den Quellcode einer Webseite in Apple Safari für macOS Sierra anzeigen möchten, müssen Sie das Safari Web Inspector-Tool mit den folgenden Methoden aktivieren.
Webbrowser-Entwickler wie Apple, Google usw. bieten ein direkt einsetzbares Tool zum Anzeigen der zugrunde liegenden Codes. Die Entwickler verwenden dies meist zum Debuggen und Visualisieren von Änderungen an einer Live-Website, ohne den tatsächlichen Code auf dem Server zu beeinträchtigen. Dieses Tool ist jedoch mittlerweile auch unter Content-Erstellern und technikaffinen Internetnutzern beliebt geworden, die eine Live-Website aus persönlichen oder professionellen Gründen bearbeiten möchten. Wenn Sie einer von ihnen sind, lesen Sie den Artikel bis zum Ende, um alles über den Safari Web Inspector und wie man Elemente inspiziert zu erfahren.
Inhalt
Was ist der Safari Web Inspector?
Der Web Inspector ist Teil des Bündels von Entwicklungstools, die Apple Website- und App-Entwicklern auf der ganzen Welt anbietet. Das Tool ist sowohl für macOS- als auch für iOS-Geräte verfügbar. Entwickler können Websites problemlos modifizieren, optimieren und debuggen, um die maximale Leistung ihrer Online-Properties zu erreichen.
Das Web Inspector-Tool auf Safari bringt die meisten Webseiten-Ressourcen unter einer einheitlichen Benutzeroberfläche zusammen. Das Tool trennt auch die Ressourcen und deren Parameter in speziellen Tabs, sodass Sie nicht von so vielen Codes und Optionen überwältigt werden. Der Web Inspector bietet Ihnen auch eine Zeitachsenansicht des Website-Speichers, sodass Sie den Speicher problemlos debuggen können. Darüber hinaus können Sie als Entwickler mehr als 150 beliebte CSS-Eigenschaften anpassen und optimieren, die Sie zur Entwicklung einer funktionalen Website benötigen.
Im Web Inspector-Tool erhalten Sie die folgenden Tabs für Webseiten-Ressourcen:
| Tabs |
|---|
| Elemente |
| Konsole |
| Quellen |
| Netzwerk |
| Zeitachsen |
| Speicher |
| Grafiken |
| Schichten |
| Audit |
Wie aktivieren Sie den Safari Web Inspector in Safari 10 und höher
Standardmäßig deaktiviert Apple Mac den Web Inspector in Safari. Dies soll unnötige Unordnung in der Benutzeroberfläche (UI) des Webbrowsers verhindern. Wenn Sie jedoch Entwickler, Content-Ersteller oder ein erfahrener Mac-Nutzer sind, möchten Sie möglicherweise die Funktion aktivieren, indem Sie die folgenden Schritte ausführen:
| Schritte |
|---|
| Öffnen Sie die Safari-App auf Ihrem MacBook oder iMac. |
| Stellen Sie sicher, dass Sie auf den Browser geklickt haben, um das Safari-Symbol in der Mac-Toolbar zu erhalten. |
| Schritte |
|---|
| Klicken Sie auf Safari in der oberen linken Ecke und wählen Sie Voreinstellungen. |
| Alternativ können Sie die Tastenkombination Befehl + , verwenden, um das Menü Voreinstellungen anzuzeigen. |
| Im Menü Voreinstellungen müssen Sie auf dem Tab Allgemein sein. |
| Schritte |
|---|
| Navigieren Sie zur Erweitert Karte. |
| Direkt unter der Proxy-Option sollten Sie das Kontrollkästchen für das Entwicklungsmenü in der Menüleiste anzeigen sehen. Aktivieren Sie das Kästchen. |
| Schritte |
|---|
| Jetzt wird das Safari Entwicklungsmenü in der Mac-Toolbar angezeigt. |
So können Sie die Web Inspector-Funktion in Ihrem Mac-Browser Safari aktivieren. Die Schritte sind ähnlich für die neueste macOS-Version Ventura sowie für frühere Versionen wie Monterey, Big Sur, Catalina usw., bis hin zu Jaguar.
Auch lesen: Html 4.01
Bis jetzt haben Sie gelernt, wie Sie die Web Inspector-Funktion in der Mac Safari-App erhalten. Lernen Sie im Folgenden, wie Sie sie auf Safari für Live-Websites verwenden:
Wie benutzen Sie den Safari Web Inspector auf macOS
Finden Sie im Folgenden die Schritte, um das Web Inspector-Tool für Webentwicklung, Content-Erstellung oder andere Zwecke zu nutzen. In diesem Artikel zeige ich die Schritte unter Verwendung des macOS Monterey-Betriebssystems. Die Schritte sind jedoch ziemlich ähnlich von macOS Jaguar bis Ventura.
| Schritte |
|---|
| Öffnen Sie Safari und besuchen Sie eine beliebige Website, die Sie inspizieren möchten. |
Es gibt zwei Möglichkeiten, die zugrunde liegenden HTML/CSS-Codes einer Website zu inspizieren oder Änderungen mit dem Apple-Entwicklungstool Web Inspector vorzunehmen. Diese sind:
|
| Schritte |
|---|
| Im Kontextmenü, das erscheint, klicken Sie auf Web Inspector anzeigen. Die Tastenkombination für diese Aktion ist Option + Befehl + I. |
| Schritte |
|---|
| Dies öffnet das Web Inspector-Tool in der unteren Hälfte des Webbrowsers. Die Codes, die Sie sehen, sind für die gesamte URL oder Webseite, die Sie aufgerufen haben. |
| Wenn Sie den zugrunde liegenden Code für ein bestimmtes Element auf der Webseite visualisieren möchten, ohne den Code für die gesamte Webseite zu öffnen, wählen Sie das Element aus, das Sie inspizieren möchten. |
| Schritte |
|---|
| Rechtsklick und wählen Sie Element inspizieren im Kontextmenü, das sich öffnet. |
| Der Web Inspector von Safari wird geöffnet. |
| Schritte |
|---|
| Aber dieses Mal führt Safari Sie direkt zum zugrunde liegenden HTML- oder CSS-Code des Elements, das Sie prüfen. |
| In diesem Tool erhalten Sie die HTML- und CSS-Codes des Webseitelements, das Sie inspizieren. |
Auch lesen: Technipages erklärt CSS
Wie öffne ich den Safari Web Inspector in älteren Versionen von macOS
Angenommen, Sie verwenden einen Mac, der älter ist als Jaguar, und müssen das Web Inspector-Tool verwenden. Wenn Sie die oben genannten Schritte auf diesem Mac nicht finden, können Sie einen einfachen Code ausführen, um den Web Inspector zu aktivieren. So wird es gemacht:
| Schritte |
|---|
| Öffnen Sie Programme und gehen Sie zum Dienstprogramme Ordner. |
| In den Dienstprogrammen sollten Sie Terminal finden. Es ist die Eingabeaufforderung von macOS-Computern. |
| Starten Sie nun die Terminal Befehlszeilenoberfläche und geben Sie den folgenden einfachen Befehl ein: |
defaults write com.apple.Safari WebKitDeveloperExtras -bool true
| Schritte |
|---|
| Drücken Sie Return, um den Befehl auszuführen. |
| Jetzt können Sie eine Webseite in Safari öffnen und mit der rechten Maustaste klicken oder die Maustaste gedrückt halten, bis das Kontextmenü erscheint. |
| Klicken Sie dort auf die Option Element inspizieren, um die zugrunde liegenden CSS- und HTML-Codes der Website anzuzeigen. |
Safari Web Inspector: Die letzten Worte
Dies sind also die Methoden, um den Web Inspector in Safari mühelos zu aktivieren. Sie können die Schritte selbst durchführen und in wenigen Minuten mit der Entwicklung oder Content-Erstellung beginnen. Sie haben die Methoden zum Aktivieren des Elementinspektors auf Safari für sowohl neue als auch ältere macOS-Editionen gelernt. Wenn ich eine Methode zur Aktivierung und Nutzung des Web Inspectors übersehen habe, zögern Sie nicht, mir im Kommentarbereich zu schreiben.
Als nächstes die besten Coding-Apps für iPad.
Erfahren Sie, wie Sie macOS auf einem Windows-PC installieren können, mit einer Schritt-für-Schritt-Anleitung, die Ihnen genau zeigt, wie Sie das Betriebssystem von Apple auf einem Microsoft-Gerät erhalten.
Windows 11 vs. MacOS – Entdecken Sie einige der wichtigsten Unterschiede zwischen diesen Betriebssystemen, um Ihnen bei der Geräteauswahl zu helfen.
Hier erfahren Sie, wie Sie den Quellcode einer Webseite in Apple Safari mit dem Safari Web Inspector-Tool anzeigen.
Möchten Sie Cookies, den Verlauf oder Passwortdaten aus dem Apple Safari-Webbrowser löschen? Lesen Sie diesen Leitfaden und lernen Sie jetzt!
Falls Sie ein Upgrade auf macOS Sonoma planen, erfahren Sie hier, wie es sich hinsichtlich der Funktionen von macOS Ventura unterscheidet.
Auf dem Mac speichern Umgebungsvariablen Informationen wie den aktuellen Benutzer, Standardpfade zu Befehlen und den Namen des Host-Computers. Wenn du
Wenn die Home-Schaltfläche in Outlook fehlt, deaktivieren und aktivieren Sie Home Mail im Menüband. Dieser schnelle Workaround hat vielen Benutzern geholfen.
Eine Liste möglicher Korrekturen für ein Problem, bei dem möglicherweise ein Anwendungsfenster in macOS vom Bildschirm verschwunden ist.
Möchten Sie eine E-Mail an viele Empfänger senden? Sie wissen nicht, wie Sie in Outlook eine Verteilerliste erstellen? Hier erfahren Sie, wie das mühelos gelingt!
Wenn Sie Dateneingabeaufgaben fehlerfrei und schnell erledigen möchten, müssen Sie lernen, wie Sie in Excel eine Dropdown-Liste erstellen.
