PDB Hilfe

So prüfen Sie Elemente auf Mac, Windows, iPhone und iPad: Eine vollständige Anleitung

📅
🕑 4 Minuten Lesezeit

Inspect Element ist im Grunde das Schweizer Taschenmesser eines Entwicklers, oder? Jeder, der schon einmal versucht hat, im Code einer Website herumzustöbern, ohne sich voll in den Entwicklermodus zu stürzen, hat wahrscheinlich festgestellt, wie nützlich (und ein wenig süchtig machend) es sein kann. Ob zum Bereinigen eines kniffligen Screenshots, zum Bearbeiten von Streichen, zum schnellen Optimieren von Stilen oder zum Ausspionieren der SEO-Tags der Konkurrenz – dieses kleine Tool ist ein Lebensretter. Aber ehrlich gesagt: Manche Leute möchten sich nicht jedes Mal unzählige Tastenkombinationen merken oder sich durch Menüs wühlen, wenn sie es brauchen. Hier also eine kurze Übersicht, wie man Inspect Element in verschiedenen Browsern und auf verschiedenen Geräten öffnet, ohne es unnötig kompliziert zu machen.

So überprüfen Sie Elemente unter Windows

Verwenden von Chrome, Edge oder Firefox mit einer Maus

  • Klicken Sie mit der rechten Maustaste irgendwo auf eine Webseite.
  • Das Kontextmenü wird angezeigt. Suchen Sie nach der Option „ Untersuchen“ oder „Element untersuchen“.
  • Klicken Sie darauf, und ein Entwicklerfenster wird angezeigt, normalerweise auf der rechten Seite.

Das funktioniert auf praktisch jeder Website einwandfrei. Warum ist es hilfreich? Weil es sofortigen Zugriff auf das HTML und CSS hinter dem bietet, was Sie sehen. Bei manchen Setups, insbesondere in Chrome oder Edge, fällt Ihnen möglicherweise das Panel unten auf, wenn Sie dieses Layout bevorzugen. Manchmal reicht es aus, das Panel zu verschieben oder das Layout-Symbol zu ändern.

Öffnen Sie das Prüfelement ohne Rechtsklick (Tastaturkürzel)

  • Strg + Umschalt + C : Dies ist eine universelle Tastenkombination in Chrome und Firefox und öffnet sofort den Elementinspektor, in dem Sie Dinge auswählen können.
  • Alternativ können Sie auch drücken F12: Dies ist der klassische Hotkey zum Aufrufen der Entwicklertools in praktisch jedem Browser.

Profi-Tipp: Wenn der Rechtsklick nicht funktioniert (z. B.weil eine Website ein Skript hat, das Kontextmenüs blockiert) oder Sie ein paar Sekunden sparen möchten, sind diese Tastenkombinationen Gold wert. Beachten Sie jedoch, dass einige Browser möglicherweise eine kleine Anpassung benötigen, wenn die Hotkeys nicht funktionieren, aber normalerweise funktionieren sie.

So prüfen Sie Elemente auf dem Mac

Chrome, Firefox oder Edge

Dasselbe Prinzip wie bei Windows: Klicken Sie mit der rechten Maustaste und wählen Sie „Untersuchen“ oder drücken Sie die Taste Cmd + Shift + C. Ganz einfach. In den meisten Fällen funktionieren diese Tastenkombinationen einwandfrei, mit Ausnahme einiger Sonderfälle, in denen Erweiterungen stören können.

Mit Safari (denn das ist natürlich der einzige Browser, bei dem es etwas schwieriger wird)

In Safari ist „Element untersuchen“ standardmäßig nicht aktiviert. Sie müssen zuerst die Entwicklertools aktivieren. Das ist zwar ein bisschen mühsam, aber nicht allzu schlimm:

  • Öffnen Sie Safari und gehen Sie dann zu Safari > Einstellungen > Erweitert.
  • Aktivieren Sie das Kontrollkästchen „Entwicklermenü in der Menüleiste anzeigen“.

Nach der Aktivierung wird in der oberen Menüleiste das Menü „Entwickeln“ angezeigt. Klicken Sie dort einfach mit der rechten Maustaste auf ein Seitenelement und wählen Sie „ Element prüfen“. Alternativ können Sie auch die Tastenkombination verwenden Cmd + Option + I, um direkt zu starten.

Und wenn Sie mit einem mobilen Gerät arbeiten, können Sie Ihr iPhone oder iPad mit aktiviertem Entwicklermodus an einen Mac anschließen und so mobile Webseiten im Safari-Debugger überprüfen. Aufgrund der Vorgehensweise von Apple ist der Einrichtungsaufwand etwas größer, aber machbar. Aktivieren Sie einfach den Web Inspector unter iOS, verbinden Sie ihn über USB und wählen Sie dann Ihr Gerät aus dem Menü „Entwickeln“ in Safari auf dem Mac aus.

Überprüfung auf Chromebooks oder Schulgeräten

Da Chromebooks grundsätzlich nativ mit Chrome-Technologie arbeiten, ist der Vorgang im Grunde derselbe: Rechtsklick > Untersuchen. Der Haken? Manche Schul- oder Arbeitsadministratorkonten blockieren Entwicklertools aus Sicherheitsgründen. Fehlt die Option „Untersuchen“, helfen keine Hotkeys, es sei denn, Sie verfügen über Administratorrechte oder der Administrator hat die Entwickleroptionen wieder aktiviert.

Auf dem Handy? Nicht so schnell…

Die Überprüfung von Elementen auf iOS oder Android ist nur mit einem Desktop-PC möglich. Auf iPhones und iPads benötigen Sie einen Mac und den Web Inspector von Safari oder eine Drittanbieter-App mit ähnlichen Funktionen – und selbst dann ist die Bedienung nicht so reibungslos wie auf dem Desktop. Wenn Sie also eine mobile Website optimieren möchten, ist es besser, dies zunächst auf dem Computer zu tun und dann eine Vorschau auf dem Mobilgerät anzuzeigen.

Abschluss

Das sollte eigentlich kein Hexenwerk sein, aber manchmal verstecken Browser oder Geräte die Funktion „Element untersuchen“ hinter ein paar zusätzlichen Klicks oder Tastenkombinationen. Unter Windows ist Strg+Umschalt+C oder F12 Ihr bester Freund. Mac-Benutzer können auf Cmd + Umschalt + C zurückgreifen und bei Bedarf den Entwicklermodus in Safari aktivieren. Und in Chrome, Edge oder Firefox genügt normalerweise ein Rechtsklick auf das jeweilige Element.

Hoffentlich hilft dies jemandem, den Lärm zu durchdringen und schneller auf die Website-Dateien zuzugreifen. Manchmal reicht es schon aus, die richtige Verknüpfung oder den richtigen Menüpfad zu kennen, um das frustrierende Herumfummeln zu vermeiden.

Zusammenfassung

  • Klicken Sie mit der rechten Maustaste und wählen Sie in Desktop-Browsern „Untersuchen“ oder „Element untersuchen“.
  • Verwenden Sie Hotkeys – Strg+Umschalt+C oder F12 für Windows, Cmd+Umschalt+C oder Cmd+Option+I für Mac.
  • Aktivieren Sie die Entwicklertools in Safari über die Einstellungen auf dem Mac, um mobile Websites zu überprüfen.
  • Auf Chromebooks funktioniert Inspect genauso, sofern es nicht durch Administratoreinschränkungen blockiert wird.
  • Die mobile Überprüfung ist kompliziert und erfordert häufig Desktop- oder Remote-Debugging-Setups.

Zusammenfassung

Inspect Element ist kein geheimes Tool mehr – es ist in allen gängigen Browsern integriert. Sobald Sie die Verknüpfung oder den Menüpfad kennen, können Sie es schnell öffnen und ausprobieren. Die meisten Benutzer können mit einem Rechtsklick oder einer Tastenkombination darin navigieren. Bedenken Sie jedoch, dass die Entwicklertools in manchen Setups möglicherweise deaktiviert oder hinter den Einstellungen versteckt sind. Viel Erfolg und ein reibungsloses Web-Debugging.