Alle Lehrpfade1. Wie das Internet funktioniert
beginner+50 XP
Die DevTools deines Browsers (Dein Röntgenblick für Webseiten)
💡 Die Kernidee im Alltag:
"Jeder moderne Webbrowser hat ein mächtiges Labor eingebaut: Die Entwicklertools (DevTools). Damit kannst du jede Webseite der Welt zerlegen, Texte manipulieren und Fehler finden."
Wie es wirklich funktioniert (Erklärt für 12-Jährige)
Drücke auf deiner Tastatur F12 oder Rechtsklick -> Element untersuchen.
Was du siehst, sind die 3 wichtigsten Tabs:
- Elements (Inspektor): Das HTML & CSS der Seite. Du kannst jeden Text auf jeder Webseite doppelt anklicken und live ändern!
- Console: Hier stehen Fehlermeldungen in roter Schrift.
- Network (Netzwerk): Zeigt jedes einzelne Bild und jede Datei, die geladen wird, inklusive Ladezeit in Millisekunden.
KI-Power-Tipp für Entwickler
Empfohlener Assistent: ChatGPT / Claude
Golden Prompt für deinen Editor:
Ich habe einen Fehler in der Konsole: 'Uncaught TypeError: Cannot read properties of undefined (reading 'map')'. Erkläre mir in 2 Sätzen, was das bedeutet und wie ich den Fehler in den DevTools eingrenze.
Qualitäts-Prüfung: Die Antwort muss hervorheben, dass eine Variable leer (`undefined`) war, anstatt eines erwarteten Arrays.
Interaktive Übung & lokaler Testlauf
Schreibe einen JavaScript-Befehl, der mit `console.log()` die Nachricht 'Röntgenblick aktiviert!' in die Konsole ausgibt.