Mit dem Web Inspector von Safari können Sie Webseiten unter macOS untersuchen. Es ist ein praktisches Tool für Webentwickler und neugierige Benutzer gleichermaßen.Um Web Inspector verwenden zu können, müssen Sie ihn in den Safari-Einstellungen aktivieren.
Nach der Aktivierung eröffnet Web Inspector eine Welt voller Webseitendetails. Sie können den HTML-, CSS- und JavaScript-Code sehen, aus dem eine Seite besteht. Dieses Tool hilft Ihnen, Fehler zu finden, Designs zu testen und zu lernen, wie Websites funktionieren.
Web Inspector ist einfach zu verwenden. Klicken Sie mit der rechten Maustaste auf einen beliebigen Teil einer Webseite und wählen Sie „Element prüfen“. Es öffnet sich ein neues Fenster mit dem gesamten Code der Seite. Sie können Dinge ändern und die Ergebnisse sofort auf der Seite sehen.
Safaris Arsenal an Inspektionswerkzeugen
Öffnen des Entwicklungsmenüs
Um die Entwicklertools von Safari nutzen zu können, müssen Sie zunächst das Menü „Entwickeln“ aktivieren. Navigieren Sie zuSafari>Präferenzen>Fortschrittlichund aktivieren Sie das Kontrollkästchen neben „Entwicklermenü in der Menüleiste anzeigen“. Dadurch wird eine Reihe von Tools freigeschaltet, die Ihren Webentwicklungs-Workflow verbessern.
1. Klicken Sie im Safari-Menü auf „Einstellungen“.
2. Klicken Sie auf die Registerkarte „Erweitert“.
3. Aktivieren Sie „Funktionen für Webentwickler anzeigen“.
4. Das Entwicklungsmenü wird angezeigt
Elemente präzise prüfen
Das Tool „Inspect Element“ ist Ihr Einstieg zum Verständnis der Struktur einer Webseite. Klicken Sie mit der rechten Maustaste auf ein beliebiges Element und wählen Sie „Element prüfen“. Es erscheint ein Bereich, in dem der HTML-, CSS- und JavaScript-Code angezeigt wird, der für das Erscheinungsbild und Verhalten dieses Elements verantwortlich ist.
Debuggen von JavaScript-Code
Die JavaScript-Konsole von Safari ist für die Identifizierung und Behebung von Fehlern in Ihrem Code unerlässlich. Verwenden Sie die Konsole, um Nachrichten zu protokollieren, Variablen zu überprüfen und die Ausführung Ihres Codes schrittweise zu steuern. Sie können über das Menü „Entwickeln“ oder durch Drücken von auf die Konsole zugreifenOption + Befehl + C.
Überwachung der Netzwerkaktivität
Die Registerkarte „Netzwerk“ in den Entwicklertools von Safari bietet eine detaillierte Ansicht aller Netzwerkanfragen einer Webseite. Dies kann Ihnen dabei helfen, Leistungsengpässe zu diagnostizieren, langsam ladende Ressourcen zu identifizieren und die Ladegeschwindigkeit Ihrer Website zu optimieren.
Responsive Design-Tests
Mit dem responsiven Designmodus von Safari können Sie verschiedene Bildschirmgrößen und Geräte simulieren, um sicherzustellen, dass Ihre Website auf einer Vielzahl von Plattformen korrekt aussieht und funktioniert. Diese Funktion ist von unschätzbarem Wert für die Erstellung responsiver Websites, die sich an verschiedene Bildschirmauflösungen anpassen.
Zusätzliche Entwicklertools
| Werkzeug | Beschreibung |
|---|---|
| Lagerung | Überprüfen und verwalten Sie Website-Daten, die in Cookies, lokalem Speicher und Sitzungsspeicher gespeichert sind. |
| Zeitleisten | Analysieren Sie die Leistung der Rendering-, Skripterstellungs- und Layoutprozesse einer Website. |
| Schichten | Visualisieren Sie die Ebenen einer Webseite und identifizieren Sie Rendering-Probleme. |
| Ressourcen | Sehen Sie sich die von einer Webseite verwendeten Ressourcen (Bilder, Schriftarten usw.) an und bearbeiten Sie sie. |
| Konsole | Zeigen Sie JavaScript-Protokolle, Warnungen und Fehler an. |
| Suchen | Durchsuchen Sie den HTML-, CSS- und JavaScript-Code einer Webseite. |
| Debugger | Gehen Sie den JavaScript-Code schrittweise durch, legen Sie Haltepunkte fest und prüfen Sie Variablen. |
| Netzwerk | Überwachen Sie die Netzwerkaktivität, einschließlich Anfragen und Antworten. |
| Elemente | HTML und CSS einer Webseite anzeigen und bearbeiten. |
| Responsives Design | Simulieren Sie verschiedene Bildschirmgrößen und Geräte. |
| Leistung | Analysieren Sie die Website-Leistung und identifizieren Sie Verbesserungsmöglichkeiten. |
| Erinnerung | Überwachen Sie die Speichernutzung und erkennen Sie Speicherlecks. |
| Sicherheit | Sehen Sie sich Sicherheitsdetails einer Website an, einschließlich Zertifikaten und Verbindungsinformationen. |
| Audits | Erhalten Sie Vorschläge zur Verbesserung der Barrierefreiheit, Leistung und SEO Ihrer Website. |
| Web Inspector-Erweiterungen | Erweitern Sie die Funktionalität der Safari-Entwicklertools mit benutzerdefinierten Erweiterungen. |
Wichtige Erkenntnisse
- Der Web Inspector von Safari muss in den Einstellungen aktiviert sein
- Web Inspector zeigt den Code hinter Webseiten
- Mit Web Inspector können Sie Websites testen und mehr über sie erfahren
Web Inspector in Safari aktivieren
Web Inspector ist ein leistungsstarkes Tool zum Untersuchen von Webseiten in Safari. Damit können Sie Code anzeigen und Probleme debuggen.
Die Tastenbelegung ist:⌘⌥i
Siehe auch:Gelöst: Webseiten sehen in Safari seltsam aus
Entwicklungsmenü in der Menüleiste anzeigen
Um Web Inspector verwenden zu können, müssen Sie zunächst das Menü „Entwickeln“ aktivieren. Öffnen Sie Safari und klicken Sie in der oberen Menüleiste auf Safari > Einstellungen. Klicken Sie auf die Registerkarte Erweitert. Aktivieren Sie das Kontrollkästchen neben „Entwicklermenü in der Menüleiste anzeigen“.
Das Menü „Entwickeln“ wird nun in der Menüleiste von Safari angezeigt. Dieses Menü bietet viele nützliche Optionen für Webentwickler.
Zugreifen auf Web Inspector-Funktionen
Sobald das Menü „Entwickeln“ sichtbar ist, können Sie Web Inspector öffnen. Gehen Sie zu der Webseite, die Sie überprüfen möchten. Klicken Sie in der Menüleiste auf „Entwickeln“ > „Web-Inspektor anzeigen“. Sie können auch die Tastenkombination Option + Befehl + I verwenden.
Eine andere Möglichkeit, Web Inspector zu öffnen, besteht darin, mit der rechten Maustaste auf einen beliebigen Teil einer Webseite zu klicken und „Element prüfen“ auszuwählen. Dadurch wird der Inspektor geöffnet und der Fokus auf dieses bestimmte Element gelegt.
Web Inspector verfügt über mehrere Registerkarten mit unterschiedlichen Tools. Auf der Registerkarte „Elemente“ wird die HTML-Struktur der Seite angezeigt. Auf der Registerkarte „Konsole“ werden JavaScript-Ausgaben und -Fehler angezeigt. Andere Registerkarten helfen Ihnen, Netzwerkaktivität, Speicher und mehr zu überprüfen.
Verwendung von Web Inspector für die Entwicklung
Web Inspector ist ein leistungsstarkes Tool für Entwickler, die mit Safari unter macOS arbeiten. Damit können Sie den Webseitencode direkt im Browser anzeigen und ändern.
Überprüfen und Ändern von HTML und CSS
Web Inspector zeigt den HTML- und CSS-Code einer Seite an. Sie können sehen, wie Elemente verschachtelt und gestaltet sind. Klicken Sie auf ein Element, um dessen Details anzuzeigen. Sie können CSS-Eigenschaften live bearbeiten, um Änderungen zu testen. Dies hilft, Layoutprobleme schnell zu beheben.
Auf der Registerkarte „Elemente“ wird die Seitenstruktur angezeigt. Es zeigt HTML-Tags und -Attribute. Sie können Abschnitte erweitern und reduzieren, um sich auf bestimmte Teile zu konzentrieren. Doppelklicken Sie auf den Text, um den Inhalt direkt zu bearbeiten.
Im Bereich „Stile“ werden CSS-Regeln für das ausgewählte Element angezeigt. Sie können Regeln aktivieren und deaktivieren oder Werte ändern. Neue Stile können hinzugefügt werden, um Ideen schnell zu testen. Diese Änderungen sind vorübergehend und werden zurückgesetzt, wenn Sie die Seite neu laden.
Debuggen und Fehlerbehebung
Web Inspector hilft beim Finden und Beheben von Codeproblemen. Auf der Registerkarte „Konsole“ werden Fehler, Warnungen und Protokolle angezeigt. Sie können hier JavaScript-Befehle ausführen, um Ideen zu testen.
Auf der Registerkarte „Quellen“ können Sie Haltepunkte in Ihrem Code festlegen. Dadurch wird die Ausführung angehalten, sodass Sie Zeile für Zeile durchgehen können. Sie können Variablen beobachten und sehen, wie sich Werte ändern, während der Code ausgeführt wird.
Auf der Registerkarte „Netzwerk“ werden alle von der Seite geladenen Ressourcen angezeigt. Dazu gehören Bildskripte und Datendateien. Sie können Ladezeiten und Dateigrößen sehen. Dies hilft, Leistungsprobleme zu erkennen.
Erweiterte Web-Inspektor-Tools
Web Inspector verfügt über Tools für eine tiefergehende Analyse. Auf der Registerkarte „Speicher“ werden von der Website gespeicherte Daten wie Cookies und lokaler Speicher angezeigt. Sie können diese Daten einsehen und bearbeiten.
Auf der Registerkarte „Zeitleisten“ wird die Seitenaktivität im Laufe der Zeit aufgezeichnet. Es zeigt an, wann Skripte ausgeführt und Layouts aktualisiert werden. Dies hilft dabei, langsame Teile Ihres Codes zu finden.
Auf der Registerkarte „Ebenen“ werden die zusammengesetzten Ebenen der Seite angezeigt. Dies ist nützlich, um Rendering-Probleme zu erkennen. Sie können sehen, wie Elemente gestapelt und neu bemalt werden.
Diese Tools bieten Entwicklern einen vollständigen Überblick über ihre Webseiten. Sie erleichtern die Erstellung schneller und fehlerfreier Websites.
Safari enthält integrierte Entwicklertools – Sie müssen nichts installieren, um Probleme im Browser zu beheben.