Tutorials

Anleitung: Elemente untersuchen auf dem Chromebook

Melden

Hier ist ein ausführliches Tutorial, wie du die Funktion „Untersuchen“ (Inspect Element) auf einem Chromebook nutzt.

Die Funktion „Element untersuchen“ ist Teil der Google Chrome Entwicklertools (DevTools). Sie erlaubt es dir, den HTML- und CSS-Code einer Website in Echtzeit anzusehen und sogar vorübergehend zu bearbeiten.

Methode 1: Die Tastenkombination (Der schnellste Weg)

Auf einem Chromebook ist die Tastatur etwas anders belegt als auf Windows-PCs oder Macs. Nutze diese Kombinationen:

  1. Öffne den Chrome-Browser und die gewünschte Webseite.
  2. Drücke gleichzeitig: Strg + Umschalt + I (Buchstabe I wie „Inspect“).
  3. Alternativ für den direkten Auswahl-Modus: Strg + Umschalt + C.

Methode 2: Das Kontextmenü (Rechtsklick)

Da Chromebook-Touchpads standardmäßig keine rechte Maustaste haben, funktioniert der „Rechtsklick“ so:

  1. Bewege den Cursor auf das Element (Text, Bild oder Button), das du untersuchen möchtest.
  2. Tippe mit zwei Fingern gleichzeitig auf das Touchpad.
  3. Wähle im erscheinenden Menü ganz unten den Punkt „Untersuchen“.

Methode 3: Über das Chrome-Menü

Falls du die Tastenkürzel nicht parat hast, kannst du die Tools auch über das Menü öffnen:

  1. Klicke auf die drei vertikalen Punkte in der oberen rechten Ecke des Browsers.
  2. Bewege die Maus auf „Weitere Tools“.
  3. Wähle „Entwicklertools“ aus.

Grundlegende Funktionen: Was kannst du tun?

Sobald sich das Fenster (meist rechts oder am unteren Rand) öffnet, hast du verschiedene Möglichkeiten:

  • HTML bearbeiten: Klicke im Bereich „Elements“ doppelt auf einen Text. Du kannst ihn nun umschreiben. Drücke Enter, und die Änderung wird sofort auf der Website angezeigt (nur für dich lokal, nicht dauerhaft).
  • CSS anpassen: Im Bereich „Styles“ (meist rechts neben dem HTML-Code) kannst du Farben, Schriftgrößen oder Abstände ändern. Klicke einfach auf einen Wert und gib einen neuen ein.
  • Mobile Ansicht: Klicke auf das kleine Symbol, das wie ein Smartphone/Tablet aussieht (oben links im Entwicklerfenster). Nun kannst du sehen, wie die Website auf verschiedenen Mobilgeräten aussieht.
  • Farben finden: Wenn du ein Element anklickst, zeigt dir der Bereich „Styles“ den exakten Hex-Code der verwendeten Farben an.

Wie schließe ich das Fenster wieder?

Du kannst die Entwicklertools auf zwei Arten schließen:

  • Klicke auf das kleine „X“ in der oberen rechten Ecke des Untersuchungs-Fensters.
  • Drücke erneut die Tastenkombination Strg + Umschalt + I.

Wichtiger Hinweis: Alle Änderungen, die du über „Element untersuchen“ vornimmst, sind nur temporär. Sobald du die Seite neu lädst (Aktualisieren), werden alle Änderungen zurückgesetzt und der Originalzustand der Website wird wiederhergestellt.

0