JavaScript-Konsole und Debuggen: Tutorial für CPSC1520

Einführung: Die JavaScript-Konsole – dein bester Freund beim Debuggen

Stell dir vor, du entwickelst eine neue Funktion für eine App wie ChatGPT oder Spotify – plötzlich lädt die Seite nicht richtig oder ein Button reagiert nicht. Genau hier kommt die Browser-Konsole ins Spiel. Sie ist das Schweizer Taschenmesser für Webentwickler: Mit ihr kannst du JavaScript in Echtzeit ausführen, Fehler aufspüren und direkt sehen, was im Hintergrund passiert. Im CPSC1520-Kurs ist die Konsole der erste Schritt, um deine JavaScript-Übungen erfolgreich zu meistern. Dieser JavaScript-Tutorial führt dich durch die wichtigsten Techniken – von der Fehlerbehebung bis zum Git-Workflow.

Was ist die Entwicklerkonsole und wie öffnest du sie?

Die Entwicklerkonsole (auch DevTools-Konsole genannt) ist ein Teil der Chrome Developer Tools. Du kannst sie auf verschiedenen Wegen öffnen:

Rechtsklick auf ein Element → „Untersuchen“ wählen
Tastenkürzel: Strg+Umschalt+J (Windows) oder Cmd+Wahl+J (Mac)
Taste F12 drücken
Im Chrome-Menü: „Weitere Tools“ → „Entwicklertools“

Die Konsole zeigt dir console.log-Ausgaben, Fehlermeldungen und Warnungen an. Du kannst dort auch direkt JavaScript-Befehle eintippen und sofort das Ergebnis sehen – perfekt zum Experimentieren!

Schritt 1: HTML-Elemente mit querySelector auswählen und Texte korrigieren

Im ersten Teil des Labs geht es darum, Tippfehler auf einer Webseite zu korrigieren. Dazu wählst du mit document.querySelector ein Element aus und änderst dessen Inhalt. Angenommen, deine Seite hat eine Überschrift mit der ID app-title und einen Absatz mit der Klasse app-description. So wählst du sie aus:

const title = document.querySelector('#app-title');
const description = document.querySelector('.app-description');

Dann änderst du den Text mit innerText oder innerHTML:

title.innerText = 'Willkommen bei CPSC1520';
description.innerText = 'Hier lernst du JavaScript von Grund auf.';

Probier es direkt in der Konsole aus! Wenn du die Änderungen siehst, weißt du, dass deine Selektion funktioniert. Das ist wie beim Debuggen in der Spieleentwicklung: Ein falscher Text in einem UI-Element kann die ganze Spielerfahrung ruinieren – mit der Konsole findest und fixst du solche Fehler schnell.

Schritt 2: JavaScript-Datei einbinden und console.log nutzen

Nachdem du die Tippfehler in der Konsole behoben hast, überträgst du den Code in deine main.js-Datei. Zuerst fügst du eine console.log-Anweisung ein, um zu prüfen, ob die Datei richtig geladen wird:

console.log('JS file successfully linked.');

Dann verlinkst du die Datei in deiner HTML-Datei mit dem script-Tag – am besten am Ende des <body>-Tags:

<script src="main.js"></script>

Wenn du die Seite neu lädst, siehst du die Meldung in der Konsole. Jetzt kopierst du den Code aus Schritt 1 in die main.js und entfernst die manuelle Eingabe in der Konsole. Beim nächsten Seitenaufruf wird der Text automatisch korrigiert – genau wie eine automatische Korrekturfunktion in einer KI-gestützten Schreib-App.

Schritt 3: Code auf GitHub pushen – der Workflow für Einsteiger

GitHub ist das soziale Netzwerk für Code. Um deine Arbeit abzugeben, folgst du diesen Schritten:

Assignment annehmen: Klicke auf den Link in Moodle und akzeptiere das Assignment. Es wird ein Repository für dich erstellt.
Repository klonen: Kopiere die HTTPS-URL (z. B. https://github.com/.../...git) und führe im Terminal aus: git clone REPO_URL. Wechsle dann in das Verzeichnis: cd REPO_NAME.
Änderungen vornehmen: Bearbeite die Dateien (z. B. main.js) und speichere sie.
Staging und Commit: Füge alle Änderungen hinzu: git add . und erstelle einen Commit: git commit -m "Tippfehler korrigiert und JS-Datei verlinkt".
Pushen: Lade die Änderungen hoch: git push.
Feedback prüfen: Gehe auf GitHub, klicke auf „Pull Requests“ und dann auf „Feedback“. Dort siehst du deinen Commit.

Dieser Workflow ist Standard in der modernen Softwareentwicklung – egal ob du an einer Fintech-App oder einem KI-Projekt arbeitest.

Häufige Fehler und wie du sie vermeidest

Beim ersten Mal passieren leicht Tippfehler. Hier die häufigsten:

Falsche ID/ Klasse: Achte auf Groß-/Kleinschreibung – #App-Title ist nicht #app-title.
Vergessenes Semikolon: JavaScript ist tolerant, aber setze Semikolons am Ende jeder Anweisung.
Script-Tag falsch platziert: Wenn das Script vor dem HTML geladen wird, existieren die Elemente noch nicht – verwende defer oder platziere das Script am Ende des Body.

Trend-Beispiel: Debuggen wie bei einer TikTok-Filter-App

Stell dir vor, ein TikTok-Filter zeigt einen falschen Text an. Der Entwickler öffnet die Konsole, wählt das Textelement aus und korrigiert den Inhalt – genau wie du es hier lernst. Oder bei einer KI-Chatbot-Oberfläche: Wenn die Antwort nicht richtig formatiert ist, hilft die Konsole, den Fehler zu finden. Diese Fähigkeiten sind in der App-Entwicklung und Webentwicklung unverzichtbar.

Zusammenfassung und nächste Schritte

Du hast gelernt, wie du die Konsole öffnest, HTML-Elemente auswählst, Texte änderst, eine JavaScript-Datei einbindest und deinen Code auf GitHub pushst. Das sind die Grundlagen für jede JavaScript-Übung im Studium und in der Praxis. Übe diese Schritte, bis sie dir in Fleisch und Blut übergehen – dann bist du bereit für komplexere Themen wie Ereignisbehandlung und AJAX.

Viel Erfolg bei deinem Lab! Denk dran: Jeder Profi hat mal klein angefangen – mit der Konsole.