So untersuchen Sie Elemente auf einem Chromebook

Die Elementuntersuchung auf einem Chromebook ist ein praktisches Werkzeug, um den Frontend-Code einer Website – HTML, CSS und sogar etwas JavaScript – genauer zu untersuchen. Sie eignet sich vor allem zum Debuggen oder für neugierige Anpassungen. Beachten Sie jedoch, dass diese Änderungen nur temporär sind. Nach dem Neuladen der Seite ist alles wieder wie vorher. Probieren Sie es aus, wenn Sie Webdesign bearbeiten oder Layoutfehler beheben möchten. Da Chromebooks mit Chrome OS laufen, ist der Vorgang im Prinzip derselbe wie im normalen Chrome. Manchmal stoßen Nutzer jedoch auf unerwartete Probleme – insbesondere auf Geräten in der Schule oder im Büro, wo Administratorbeschränkungen gelten. Daher kann es sehr hilfreich sein zu wissen, wie man auf diese Beschränkungen zugreift oder sie sogar umgeht. Falls die normale Rechtsklick-Methode nicht funktioniert – beispielsweise weil sie deaktiviert oder blockiert ist – gibt es alternative Wege. Hier sind einige Optionen, um die Entwicklertools auf Ihrem Chromebook zu nutzen, egal ob Sie die lästigen Beschränkungen einfach nur satt haben oder aus Spaß einen Blick in den Quellcode einer Website werfen möchten.

So untersuchen Sie Elemente auf einem Chromebook

Rechtsklick verwenden

Das ist die einfachste Methode: Klicken Sie mit der rechten Maustaste (oder tippen Sie mit zwei Fingern auf einem Trackpad) auf das gewünschte Element und wählen Sie dann „Untersuchen“ . In den meisten Fällen öffnet sich dadurch sofort das Entwicklertools-Fenster und der Code des Elements wird hervorgehoben. Ganz einfach, oder? Manchmal blockieren Websites jedoch den Rechtsklick, insbesondere wenn die Inhaber ihre Inhalte schützen möchten. In diesem Fall sollten Sie die unten beschriebenen erweiterten Optionen ausprobieren. Bei mir funktioniert der Rechtsklick auf manchen Websites zunächst nicht, aber nach einem kurzen Neuladen der Seite oder dem Deaktivieren des Skriptblockers geht es plötzlich. Seltsam, wie uneinheitlich diese Schutzmechanismen sein können.

Verwendung von Tastenkombinationen

Wenn der Rechtsklick deaktiviert ist oder Sie einfach nur faul sind, ist Strg + Umschalt + C die Lösung. Damit öffnen Sie sofort die Entwicklertools. Sobald diese angezeigt werden, sehen Sie oben links im Werkzeugfenster einen kleinen Pfeil. Klicken Sie darauf, erscheint ein Fadenkreuz – klicken Sie auf ein beliebiges Element auf der Seite, um genau diesen Bereich zu untersuchen. Eine schnelle Möglichkeit, ohne langes Navigieren durch Menüs loszulegen. Auf manchen Websites funktioniert diese Tastenkombination sofort einwandfrei, auf anderen, insbesondere stark geschützten Seiten, bewirkt sie möglicherweise nichts, solange Sie keine zusätzlichen Berechtigungen erteilt haben. Denn Chrome macht es einem natürlich unnötig schwer.

Verwendung des Chrome-Menüs

Wenn Sie Menüs bevorzugen, öffnen Sie das Chrome-Menü, indem Sie auf die drei Punkte ( vertikale Auslassungspunkte ) oben rechts klicken. Navigieren Sie dann zu „Weitere Tools“ > „Entwicklertools“. Dadurch öffnet sich das Entwickler-Panel rechts oder unten. Klicken Sie dort auf den Tab „Elemente“, und schon kann es losgehen. Um bestimmte Elemente zu untersuchen, klicken Sie auf den Pfeil im Panel und wählen Sie den gewünschten Bereich der Seite aus. Ganz einfach, aber falls die Entwicklertools blockiert sind, funktioniert es möglicherweise nicht. Manchmal hilft es, Chrome neu zu starten oder den Cache zu leeren, um die Berechtigungen zu aktualisieren. Auf Schulgeräten kann dies jedoch unbemerkt fehlschlagen.

Entsperren von Entwicklertools oder fortgeschrittenere Tricks

Wenn du ein eingeschränktes Chromebook benutzt – zum Beispiel ein Schulgerät – sind diese Optionen wahrscheinlich gesperrt. Es gibt aber einen Trick, falls du etwas Grundlegendes untersuchen musst. Ich habe gesehen, dass das funktioniert, indem man ein Bookmarklet hinzufügt, das ein kleines Skript in die Seite einfügt: etwa dieses hier. Ich musste es in die URL eines Lesezeichens kopieren und einfügen:

javascript:document.body.contentEditable='true'; document.designMode='on'; void 0

Im Prinzip wird die Seite dadurch in eine Art bearbeitbares Dokument verwandelt, sodass Sie deren Darstellung anpassen können. Es ist nicht genau dasselbe wie die Entwicklertools, aber wenn Sie sehen möchten, wie verschiedene Elemente angeordnet sind oder statische Inhalte bearbeiten möchten, ist es eine schnelle Lösung. Erstellen Sie dazu ein neues Lesezeichen (über das Menü „ Lesezeichen“ > „Lesezeichen hinzufügen“ ) und fügen Sie den Code in das URL-Feld ein. Wenn Sie nun auf einer beliebigen Seite auf dieses Lesezeichen klicken, können Sie die Seite bearbeiten. Sie haben zwar nicht den vollen Zugriff auf CSS und HTML wie in den Entwicklertools, aber für kleinere Anpassungen reicht es aus. Beachten Sie jedoch, dass diese Methode auf gesperrten Geräten deaktiviert oder fehlerhaft sein kann, wenn der Administrator die Einschränkungen weiter verschärft hat.

Ehrlich gesagt ist es ziemlich frustrierend, wie manche Umgebungen grundlegende Funktionen für Webentwickler blockieren, aber es gibt Umgehungsmöglichkeiten. Man muss sich nur ein wenig mit den Optionen auseinandersetzen und manchmal ein bisschen herumprobieren. Wenn man versucht, Einschränkungen zu umgehen, sollte man immer Vorsicht walten lassen, insbesondere in verwalteten Umgebungen. Für den privaten Gebrauch können diese Tricks jedoch viel Ärger ersparen, wenn man einfach mal einen Blick hinter die Kulissen werfen möchte.