Das Einarbeiten in Webseitenelemente auf einem Mac ist zwar kein Hexenwerk, aber es ist schon seltsam, wie viele kleine Schritte nötig sind, um alles richtig zum Laufen zu bringen – besonders, wenn man neu dabei ist. Ob Sie nun Layout-Probleme beheben, Design-Optimierungen ausprobieren oder einfach nur Ihre Neugierde zum Aufbau einer Website befriedigen möchten – zu wissen, wie man die Browser-Entwicklertools richtig nutzt, macht einen großen Unterschied. Und da Macs einige Eigenheiten im Umgang mit diesen Dingen haben – insbesondere mit Safari – lohnt es sich, den Prozess sorgfältig durchzugehen, um nichts zu übersehen. Nach ein paar Malen ist es überraschend einfach.
So überprüfen Sie Elemente auf einem Mac in Safari, Chrome oder Firefox
Methode 1: Aktivieren der Entwicklertools in Safari (da Safari dieses Menü standardmäßig nicht anzeigt)
Wenn Sie Safari als Browser verwenden, müssen Sie zunächst das Entwicklermenü aktivieren. Es ist von Haus aus etwas versteckt, was zwar bizarr, aber typisch Apple ist. So geht’s:
- Öffnen Sie Safari und gehen Sie dann zu Safari > Einstellungen (oder Präferenzen :: Sie können auch drücken Cmd +, )
- Klicken Sie ganz rechts auf die Registerkarte „Erweitert“
- Aktivieren Sie das Kontrollkästchen „ Entwicklermenü in der Menüleiste anzeigen“
Jetzt erscheint ganz oben ein Menü „Entwickeln“.Über dieses Menü haben Sie Zugriff auf alle nützlichen Funktionen, einschließlich der Funktion „Element prüfen“.Manchmal funktioniert dies nicht sofort, und bei manchen Setups kann es sein, dass das Menü erst nach einem Neuladen oder Neustart von Safari angezeigt wird. Schalten Sie es bei Bedarf einfach ein und aus.
Navigieren Sie zu Ihrer Seite
Sobald das erledigt ist, öffnen Sie einfach die Webseite, auf der Sie herumstöbern möchten. Es ist schon komisch: Die Datenschutzeinstellungen von Safari machen es manchmal etwas schwieriger, bestimmte Seiten zu überprüfen, aber im Allgemeinen ist alles gut, sobald Sie dort sind. Chrome und Firefox sind anfangs einfacher, aber Safari bietet diesen zusätzlichen Schritt für Entwickler.
Zum Überprüfen des Elements
- In Safari: Klicken Sie mit der rechten Maustaste (oder bei gedrückter Strg-Taste) auf das Element und wählen Sie dann „ Element untersuchen“.
- In Chrome/Firefox: dasselbe – klicken Sie mit der rechten Maustaste und wählen Sie „Untersuchen“ oder „Element untersuchen“.
Dadurch wird das Entwicklerfenster geöffnet, das normalerweise unten oder seitlich angedockt ist. Ehrlich gesagt ist es bei manchen Setups etwas träge oder öffnet sich nicht richtig – natürlich müssen Macs und Browser die Dinge immer ein wenig frustrierender machen.
Schnüffeln Sie im HTML und in den Stilen herum
Der Reiter „Elemente“ zeigt die Markup-Struktur an. Wenn Sie mit der Maus über HTML fahren, wird der relevante Teil der Seite hervorgehoben. Der rechte Bereich „Stile “ zeigt, welche CSS-Regeln angewendet werden. Sie können diese Stile sogar live anpassen, um zu sehen, wie die Änderungen aussehen – fast magisch, oder? Das ist besonders praktisch, wenn ein Modal oder Overlay die Interaktion blockiert oder Sie mit Farben und Schriftarten experimentieren möchten, ohne die eigentlichen Codedateien zu verändern.
Weitere Registerkarten für ausführlichere Informationen
- Konsole : Fehler anzeigen oder schnelle JavaScript-Befehle ausführen.
- Netzwerk : Verfolgen Sie Anfragen, sehen Sie, was langsam ist, und diagnostizieren Sie Ladeprobleme.
- Quellen : Tauchen Sie ein in Skripte und Assets.
- Zugänglichkeit : Überprüfen Sie die Kontrastverhältnisse oder ARIA-Beschriftungen.
Manchmal werden Layoutfehler durch Skripte oder blockierte Ressourcen verursacht. Daher empfiehlt es sich, die Registerkarte „Netzwerk“ zu durchsuchen, wenn Probleme auftreten. Auch das Aktivieren von Popup-Berechtigungen auf dem Mac kann manchmal hilfreich sein, wenn Overlays sich seltsam verhalten oder nicht reagieren.
Ja, wenn Sie diesen Weg gehen möchten, schließen Sie einfach Ihr iPhone oder iPad über USB an, gehen Sie dann in Safari auf Ihrem Mac zu „Entwickeln“ und wählen Sie Ihr Gerät aus. Es ist überraschend praktisch, auch wenn die Einrichtung anfangs etwas fummelig ist.
Irgendwie seltsam, aber … nein.Änderungen sind nur vorübergehend. Ein Neuladen der Seite setzt alles zurück. Hängen Sie also nicht zu sehr an Ihren Änderungen, aber sie eignen sich perfekt zum Testen, bevor Sie die eigentlichen Codedateien bearbeiten.
In Chrome/Firefox funktioniert Befehl + Wahl + I hervorragend. Safari verwendet dieselbe Tastenkombination, aber Sie müssen zuerst das Menü „Entwickeln“ aktivieren.
Nicht wirklich. Die Prüftools sind browserspezifisch. Für native macOS-Apps benötigen Sie Xcode oder andere Entwicklertools. Erwarten Sie also nicht, dass Sie Mac-Apps einfach per Rechtsklick debuggen können, wie dies bei Websites möglich ist.
Das liegt wahrscheinlich daran, dass das Entwicklermenü nicht aktiviert ist (hauptsächlich in Safari).Bei Chrome oder Firefox sollte ein Rechtsklick immer die Option „Überprüfen“ anzeigen, es sei denn, die Seite selbst blockiert sie oder es ist etwas Seltsames im Gange.
Das Beste aus der Inspektion herausholen
Ehrlich gesagt ist das Herumstöbern mit Entwicklertools auf einem Mac nur eine Möglichkeit, einen Blick hinter die Kulissen des Webs zu werfen. Es ist nicht nur für Entwickler gedacht – wenn Sie neugierig sind, wie Websites erstellt werden, oder Layoutprobleme schnell beheben möchten, ist es Gold wert. Sobald Sie den Dreh raus haben, Menüs umzuschalten, CSS live zu bearbeiten und Netzwerkanfragen zu prüfen, werden Sie Muster erkennen und vielleicht sogar mit dem Programmieren beginnen. Das Mac-Setup selbst ist in allen Browsern ziemlich einheitlich, sobald Sie wissen, wo Sie suchen müssen. Es lohnt sich also, sich damit vertraut zu machen. Oh, und wenn Sie aufs Ganze gehen wollen, können Sie sogar den Safari-Hintergrund auf Ihrem Mac ändern, um Ihren Arbeitsbereich während des Inspizierens und Lernens zu personalisieren.