Unterschiede

Hier werden die Unterschiede zwischen zwei Versionen angezeigt.

--- de:modul:m291:learningunits:lu07:theorie:lu07a_debugging [2026/03/22 15:08] – gkoch
+++ de:modul:m291:learningunits:lu07:theorie:lu07a_debugging [2026/03/22 22:03] (aktuell) – ä gkoch
@@ Zeile 1: / Zeile 1: @@
 ====== LU07: Debugging – Fehler finden und verstehen ======
-Debugging bedeutet, den Browser (oder den Editor) zu **befragen** – mit den richtigen Werkzeugen, in der richtigen Reihenfolge.
+{{:de:modul:m291:learningunits:lu07:theorie:debugging.png?nolink&400| Debugging: wie ein Detektiv nach Spuren sucht, müssen auch Entwickler:innen den Fehlern auf die Suche gehen.}}
+Debugging bedeutet, mit dem Browser oder dem Code-Editor zu **Spuren des Fehlers** nachzuforschen – mit den richtigen Werkzeugen, in der richtigen Reihenfolge.
 <WRAP center round tip 80%>
@@ Zeile 14: / Zeile 16: @@
 Eine gute Debugging-Gewohnheit folgt immer dieser Reihenfolge:
 <WRAP round box 80% center>
-^ Schritt ^ Frage ^
+^ Schritt ^ Was Sie tun ^  ^ Beispiel ^
-| **1. Read** | Lesen Sie die Fehlermeldung genau. Was steht da wirklich? |
+| 1. Read | Lesen Sie die Fehlermeldung genau. | Was steht da wirklich? Welche Zeile wird genannt? | ''ReferenceError: e is not defined (script.js:4)'' |
-| **2. Reproduce** | Können Sie den Fehler wiederholt auslösen? Unter welchen Bedingungen? |
+| 2. Reproduce | Lösen Sie den Fehler bewusst aus. | Passiert er immer, oder nur manchmal? Bei welcher Aktion genau? | „Fehler erscheint jedes Mal, wenn ich auf einen Button klicke" |
-| **3. Reduce** | Welches ist der kleinste mögliche Code, der das Problem zeigt? |
+| 3. Reduce | Grenzen Sie das Problem ein. | Welche Zeile, welche Variable, welches Element ist betroffen? | ''console.log(buttons.length)'' ergibt 0 → Problem liegt im Selector |
-| **4. Fix** | Ändern Sie **eine** Sache – dann testen Sie sofort. |
+| 4. Fix | Ändern Sie eine einzige Sache – nicht mehrere auf einmal. | Danach sofort testen: Hat diese Änderung den Fehler behoben? | Punkt vor Klassennamen ergänzt → ''buttons.length'' ergibt nun 4 |
 </WRAP>
@@ Zeile 34: / Zeile 35: @@
 ^ Schritt ^ Werkzeug ^ Hilft bei ^
 | 1 | Formatter / Linter | Syntaxfehler (fehlende Klammern, Tippfehler, falsch geschachteltes HTML) |
-| 2 | Console / Breakpoints | Laufzeitfehler (was passiert, während der Code läuft) |
+| 2 | Console | Laufzeitfehler (was passiert, während der Code läuft) |
 | 3 | Elements-Tab | Rendering-Fehler (was macht der Browser aus Ihrem CSS/HTML) |
 </WRAP>
 ===== Werkzeug 1: Formatter & Linter =====
@@ Zeile 47: / Zeile 47: @@
 {{:modul:m290_guko:leistungsbeurteilungen:03_lb:webstorm_4x.png?nolink&300| Webstorm Logo}}
-WebStorm prüft den Code automatisch im Hintergrund. Farbige Unterwellungen bedeuten:
+WebStorm prüft den Code automatisch im Hintergrund – ohne zusätzliche Extensions. Farbige Unterwellungen bedeuten:
   * **Rot** → Fehler (der Code wird nicht korrekt ausgeführt)
   * **Gelb** → Warnung (sollte behoben werden)
@@ Zeile 54: / Zeile 54: @@
 {{:de:modul:m291:learningunits:lu07:theorie:screenshot_2026-03-22_at_11.10.17.png?nolink&800| Webstorm Code mit Fehlern. }}
 \\
-//Webstorm Code mit Fehleranzeige.//
+//WebStorm Code mit Fehleranzeige.//
 {{:de:modul:m291:learningunits:lu07:theorie:screenshot_2026-03-22_at_11.15.00.png?direct&700| Webstorm Screenshot mit Fehlermeldung. }}
 \\
-//Bei Fehlern in Webstorm, fahren Sie mit der Maus über die Markierung – Sie sehen eine Erklärung des Problems.//\\
+//Fahren Sie mit der Maus über die Markierung – Sie sehen eine Erklärung des Problems.//\\
+WebStorm erkennt unter anderem:
+  * Fehlende Dateiendungen: ''<link href="style">'' → //Cannot resolve file 'style'//
+  * Falsche Anführungszeichen: ''<link href=„style.css">'' → //Cannot resolve file '„style.css"'//
+  * Tippfehler in CSS-Eigenschaften: ''heihgt'' → unbekannte Eigenschaft
 === Formatieren ===
 Mit **Ctrl+Alt+L** (Windows) / **Cmd+Alt+L** (Mac) formatieren Sie die ganze Datei (alles wird schön ausgerichtet).
-==== VS Code + Prettier ====
+==== VS Code: Prettier + HTMLHint ====
 {{:de:modul:m291:learningunits:lu07:theorie:visual-studio-code-4096.png?nolink&200| VS Code Logo}}
 {{:de:modul:m291:learningunits:lu07:theorie:prettier-logo.png?nolink&400| Prettier Logo}}
+{{:de:modul:m291:learningunits:lu07:theorie:htmlhint.dircoa_t_z1cgbhd.webp?nolink&200 | HTMLHint Logo}}
-Prettier ist eine Extension, die den Code beim Speichern automatisch formatiert.
+Für VS Code brauchen Sie zwei separate Extensions, um dasselbe Niveau wie WebStorm zu erreichen:
-**Einmalige Einrichtung:**
+**Prettier** formatiert den Code automatisch beim Speichern (Einrückung, Strukturierung):
   - Extensions-Tab öffnen (Ctrl+Shift+X / Cmd+Shift+X)
-  - Suchen: **Prettier – Code formatter**
+  - Suchen: **Prettier – Code formatter**, installieren
-  - Installieren
   - Settings öffnen (Ctrl+, / Cmd+,), suchen nach ''format on save'', Checkbox aktivieren
 Ab jetzt: **Ctrl+S / Cmd+S** → Code wird automatisch aufgeräumt und eingerückt.
-==== Typische Fehler, die der Formatter findet ====
+**HTMLHint** prüft die HTML-Struktur und meldet typische Fehler wie falsche Anführungszeichen:
+  - Suchen: **HTMLHint**, installieren
+  - Keine weitere Konfiguration nötig – funktioniert sofort
+  - Website mit Dokumentation aller Regeln: [[https://htmlhint.com|htmlhint.com]]
-Diese Fehler erzeugen **keinen Fehler in der Console** – der Browser versucht sie stillschweigend zu korrigieren oder ignoriert die Zeile einfach.
+<WRAP center round info 80%>
+**Hinweis:** Für CSS gibt es [[https://stylelint.io|Stylelint]] – ein Linter, der ähnlich wie HTMLHint funktioniert, aber für CSS-Dateien.
+</WRAP>
-**Falscher Dateiname (kein Fehler, aber Datei wird nicht geladen):**
+==== Typische Fehler, die diese Tools erkennen ====
-<WRAP round box 80% center>
+**Falsche Anführungszeichen** (WebStorm & HTMLHint):
-<code html>
-<!-- ❌ Dateiendung fehlt (.css / .js) – Browser findet die Datei nicht -->
-<link href="style" rel="stylesheet">
-<script src="script"></script>
-<!-- ✅ Korrekt -->
-<link href="style.css" rel="stylesheet">
-<script src="script.js"></script>
-</code>
-</WRAP>
-**Falsche Anführungszeichen (aus Word oder Moodle kopiert):**
 <WRAP round box 80% center>
 <code html>
-<!-- ❌ Typografische Anführungszeichen – Browser erkennt den Pfad nicht -->
+<!-- ❌ Typografische Anführungszeichen aus Word oder Moodle – Browser lädt die Datei nicht -->
-<link href=„style.css” rel=„stylesheet”>
+<link href=„style.css" rel=„stylesheet">
 <!-- ✅ Gerade Anführungszeichen -->
@@ Zeile 108: / Zeile 106: @@
 </WRAP>
+<WRAP center round important 80%>
+**Vorsicht beim Kopieren aus Moodle oder Word:** Textverarbeitungsprogramme ersetzen gerade Anführungszeichen ('' " '') durch typografische („ "). Im Browser-Code führt das zu versteckten Fehlern.\\
+Fügen Sie kopierten Code immer als **Plain Text** ein: **Cmd+Shift+V** (Mac) / **Ctrl+Shift+V** (Windows).
+</WRAP>
-**Tippfehler in CSS-Eigenschaften:**
+**Tippfehler in CSS-Eigenschaften** (WebStorm & VS Code):
 <WRAP round box 80% center>
 <code css>
-/* ❌ 'heihgt' statt 'height' – Browser ignoriert diese Zeile einfach */
+/* ❌ 'heihgt' statt 'height' – Browser ignoriert diese Zeile einfach, kein Console-Fehler */
 .panel.open {
   heihgt: auto;
@@ Zeile 125: / Zeile 127: @@
 }
 </code>
+{{:de:modul:m291:learningunits:lu07:theorie:screenshot_2026-03-22_at_15.11.10.png?nolink&800|}}
+//Fehlermeldung in VS Code: CSS-Eigenschaft falsch geschrieben.//
 </WRAP>
-Dieser Fehler ist besonders tückisch: das Accordion-Panel öffnet sich visuell nicht, obwohl das JavaScript korrekt funktioniert. Die Console zeigt keinen Fehler. Nur der Editor markiert ''heihgt'' als unbekannte Eigenschaft.
+Dieser Fehler ist besonders tückisch: das Accordion-Panel öffnet sich visuell nicht, obwohl das JavaScript korrekt funktioniert. Die Console zeigt keinen Fehler.
@@ Zeile 180: / Zeile 185: @@
 <WRAP round box 80% center>
 <code js>
-// ❌ Fehler: 'e' wurde im Callback nicht deklariert
+// ❌ Fehler: 'e' wurde im EventListener nicht deklariert
 buttons.forEach((button) => {
   button.addEventListener('click', () => {   // ← 'e' fehlt als Parameter
@@ Zeile 189: / Zeile 194: @@
 </code>
-{{:de:modul:m291:learningunits:lu07:theorie:screenshot_2026-03-22_at_14.49.40.png?nolink&800| Screenshot mit Fehlermeldung in Entwicklertools}}
+{{:de:modul:m291:learningunits:lu07:theorie:screenshot_2026-03-22_at_14.49.40.png?direct&900| Screenshot mit Fehlermeldung in Entwicklertools}}
 **Was passiert:**
@@ Zeile 214: / Zeile 219: @@
 </WRAP>
-==== Häufige JS-Bugs aus dem Accordion-Projekt ====
+==== Script-Position: Ein stiller, häufiger Fehler ====
-**Bug: querySelector statt querySelectorAll**
+Wird die Verlinkung zum JavaScript-File im ''<head>'' Teil des HTML angegeben, dann wird der JS-Code schon ausgeführt, ohne dass die Elemente im HTML durch den Browser erstellt (geparst) wurden. Das kann dazu führen, dass ''querySelector()'' null zurückgibt, obwohl im HTML-Code das Element vorhanden ist.
 <WRAP round box 80% center>
-<code js>
+=== Script im <head> - falsch! ===
-// ❌ Wählt nur den ersten Button – forEach funktioniert, aber nur 1 Element reagiert
+{{:de:modul:m291:learningunits:lu07:theorie:script_im_head.png?nolink&700| Script im Head}}
-const buttons = document.querySelector('.accordion-btn');
-// ✅ Wählt alle Buttons
-const buttons = document.querySelectorAll('.accordion-btn');
-</code>
-</WRAP>
-**Bug: Fehlender Punkt vor dem Klassennamen**
-<WRAP round box 80% center>
-<code js>
-// ❌ Sucht nach einem HTML-Tag <accordion-btn> – findet nichts, gibt leere NodeList zurück
-const buttons = document.querySelectorAll('accordion-btn');
-// ✅ Punkt vor Klassennamen nicht vergessen
-const buttons = document.querySelectorAll('.accordion-btn');
-</code>
-</WRAP>
-Dieser Fehler erzeugt **keinen roten Fehler** in der Console. Prüfen Sie mit:
-<WRAP round box 80% center>
-<code js>
-console.log('Gefundene Buttons:', buttons.length); // → 0 zeigt das Problem
-</code>
-</WRAP>
-**Bug: Variablenname-Konflikt in forEach**
-<WRAP round box 80% center>
-<code js>
-// ❌ Aussen heisst die Variable 'button' (singular) – innen im forEach auch 'button'
-// → der äussere 'button' wird überschrieben, setAttribute betrifft immer den letzten
-button.forEach((button) => {
-  button.addEventListener('click', (e) => {
-    // ...
-    if (!panelIsOpen) {
-      panelElement.classList.add('open');
-      button.setAttribute('aria-expanded', 'true'); // ← welches 'button' ist das jetzt?
-    }
-  });
-});
-// ✅ Klare, unterschiedliche Namen
-buttons.forEach((button) => {
-  button.addEventListener('click', (e) => {
-    // ...
-    if (!panelIsOpen) {
-      panelElement.classList.add('open');
-      button.setAttribute('aria-expanded', 'true'); // ← eindeutig: der geklickte Button
-    }
-  });
-});
-</code>
-</WRAP>
-**Bug: Doppeltes classList.add – Panel lässt sich nicht schliessen**
-<WRAP round box 80% center>
-<code js>
-// ❌ classList.add('open') steht doppelt – einmal ausserhalb, einmal im if-Block
-// → Panel wird immer geöffnet, nie geschlossen
-buttons.forEach((button) => {
-  button.addEventListener('click', (e) => {
-    const panelElement = e.target.nextElementSibling;
-    const panelIsOpen = panelElement.classList.contains('open');
-    buttons.forEach((andererButton) => {
-      andererButton.nextElementSibling.classList.remove('open');
-      andererButton.setAttribute('aria-expanded', 'false');
-    });
-    panelElement.classList.add('open'); // ← diese Zeile wurde vergessen zu löschen
-    if (!panelIsOpen) {
-      panelElement.classList.add('open');
-      button.setAttribute('aria-expanded', 'true');
-    }
-  });
-});
-// ✅ Nur innerhalb des if-Blocks
-buttons.forEach((button) => {
-  button.addEventListener('click', (e) => {
-    const panelElement = e.target.nextElementSibling;
-    const panelIsOpen = panelElement.classList.contains('open');
-    buttons.forEach((andererButton) => {
-      andererButton.nextElementSibling.classList.remove('open');
-      andererButton.setAttribute('aria-expanded', 'false');
-    });
-    if (!panelIsOpen) {
-      panelElement.classList.add('open');
-      button.setAttribute('aria-expanded', 'true');
-    }
-  });
-});
-</code>
-</WRAP>
-**Bug: Syntaxfehler in forEach – fehlende öffnende Klammer**
-<WRAP round box 80% center>
-<code js>
-// ❌ Syntaxfehler: '(' fehlt vor 'andererButton'
-// → Console: Uncaught SyntaxError: Unexpected token '=>'
-buttons.forEach(andererButton) => {
-  andererButton.nextElementSibling.classList.remove('open');
-});
-// ✅ Korrekt
-buttons.forEach((andererButton) => {
-  andererButton.nextElementSibling.classList.remove('open');
-});
-</code>
-</WRAP>
-==== Script-Position: Ein stiller, häufiger Fehler ====
-<WRAP round box 80% center>
 <code html>
-<!-- ❌ Script im <head> – HTML ist noch nicht geladen wenn JS läuft -->
-<!-- → document.querySelectorAll('.accordion-btn') gibt null zurück -->
 <!DOCTYPE html>
 <html>
@@ Zeile 350: / Zeile 235: @@
 </head>
 <body>
-  <button class="accordion-btn">Frage 1</button>
 </body>
 </html>
-<!-- ✅ Script am Ende von <body> – HTML ist vollständig geladen -->
+=== Script vor </body> - gut! ===
-<!DOCTYPE html>
-<html>
+{{:de:modul:m291:learningunits:lu07:theorie:script_before_body.png?nolink&700| Script im Body}}
-<head>
-  <link href="style.css" rel="stylesheet">
-</head>
-<body>
-  <button class="accordion-btn">Frage 1</button>
-  <script src="script.js"></script>  <!-- ← hier -->
-</body>
-</html>
-</code>
 </WRAP>
@@ Zeile 374: / Zeile 250: @@
 Der Elements-Tab zeigt, was der Browser **tatsächlich** aus Ihrem Code gemacht hat – nicht was Sie geschrieben haben, sondern was nach dem Parsen und Rendern übrig bleibt.
+{{:de:modul:m291:learningunits:lu07:theorie:screenshot_2026-03-22_at_21.53.20.png?nolink&800| Elements-Tab im Browser}}
 ==== CSS live ausprobieren ====
@@ Zeile 381: / Zeile 259: @@
   - Rechts: Styles-Panel
   - Eigenschaft anklicken und Wert ändern
-  - **Sofortiges Feedback** – ohne die Datei zu speichern
+  - Änderung wird direkt im Browser gerendert und sichtbar
 Wenn der Look stimmt: dann erst in die CSS-Datei übertragen.
 <WRAP center round tip 80%>
-Deaktivierte CSS-Regeln (durchgestrichen) bedeuten: eine andere Regel mit höherer Spezifität gewinnt. Der **Computed-Tab** zeigt den tatsächlich angewendeten Wert.
+Deaktivierte CSS-Regeln (durchgestrichen) bedeuten: eine andere Regel mit höherer Spezifität (s. CSS Kaskade LU02) gewinnt oder es gibt ein Syntax-Fehler.
-</WRAP>
-==== Der Computed-Tab ====
-Wenn ''height: auto'' im CSS steht, aber die Transition nicht funktioniert:\\
-→ Computed-Tab öffnen → dort steht der **berechnete Pixelwert**.
-Das erklärt, warum ''transition: height'' auf ''auto'' nicht direkt funktioniert – der Browser kennt den Zielwert nicht. (Lösung: ''interpolate-size: allow-keywords;'')
-===== Breakpoints setzen =====
-Manchmal reicht ''console.log'' nicht aus. Breakpoints stoppen den Code an einer bestimmten Stelle und ermöglichen es, den Zustand genau zu untersuchen.
-**So geht's:**
-  - DevTools öffnen → Tab **Sources**
-  - Die JS-Datei links in der Dateiliste anklicken
-  - Zeilennummer links anklicken → blauer Punkt = Breakpoint gesetzt
-  - Seite neu laden oder Aktion ausführen → Code stoppt an dieser Stelle
-  - Rechts sehen Sie alle aktuellen Variablenwerte
-**Navigieren:**
-  * **Step over** (F10): Nächste Zeile ausführen
-  * **Step into** (F11): In eine Funktion hineinsteigen
-  * **Resume** (F8): Weiter bis zum nächsten Breakpoint
-<WRAP center round info 80%>
-Für den Anfang reicht: Breakpoint setzen, einmal F10 drücken, Variablenwert rechts ablesen.\\
-Den Rest lernen Sie automatisch, wenn Sie ihn brauchen.
 </WRAP>
@@ Zeile 431: / Zeile 280: @@
 </WRAP>
-===== Übungsaufgabe: Bugs im Accordion finden =====
-Der folgende Code enthält **4 absichtliche Bugs** – alle stammen aus echten Fehlern aus dem Unterricht. Öffnen Sie DevTools und finden Sie die Fehler, ohne den Code anzustarren. Benutzen Sie Console, Elements-Tab oder Breakpoints.
-**HTML-Datei:**
-<WRAP round box 80% center>
-<code html>
-<!DOCTYPE html>
-<html>
-<head>
-  <script src="script.js"></script>
-  <link href="style" rel="stylesheet">
-</head>
-<body>
-  <div class="accordion">
-    <button class="accordion-btn">Frage 1</button>
-    <div class="panel">Antwort 1</div>
-    <button class="accordion-btn">Frage 2</button>
-    <div class="panel">Antwort 2</div>
-  </div>
-</body>
-</html>
-</code>
-</WRAP>
-**JavaScript-Datei:**
-<WRAP round box 80% center>
-<code js>
-const buttons = document.querySelectorAll('accordion-btn');
-buttons.forEach((button) => {
-  button.addEventListener('click', () => {
-    const panelElement = e.target.nextElementSibling;
-    panelElement.classList.toggle('open');
-  });
-});
-</code>
-</WRAP>
-**Tipps:**
-  * Bug 1: Erzeugt keinen Fehler – aber die Styles werden nicht geladen
-  * Bug 2: Erzeugt keinen Fehler – aber ''buttons.length'' verrät ihn
-  * Bug 3: ''TypeError: Cannot read properties of null'' – Zusammenhang mit der Script-Position
-  * Bug 4: ''ReferenceError: e is not defined''
-<WRAP center round info 80%>
-Schreiben Sie für jeden gefundenen Bug das **Debugging-Protokoll** aus: Was haben Sie beobachtet? Was war Ihre Hypothese? Wie haben Sie es geprüft?
-</WRAP>
 ===== Zusammenfassung =====
@@ Zeile 488: / Zeile 286: @@
 ^ Werkzeug ^ Wann einsetzen ^
 | **Formatter / Prettier** | Zuerst immer – Syntaxfehler, Tippfehler in CSS-Eigenschaften, falsche Anführungszeichen |
-| **Console** | Wenn etwas passiert oder nicht passiert – Fehlermeldung lesen, ''console.log()'' einsetzen |
+| **Console** | Wenn etwas passiert oder nicht passiert – Fehlermeldung lesen, ''console.log()'' einsetzen, Variablenwerte prüfen  |
 | **Elements-Tab** | Wenn das Layout falsch aussieht – CSS live anpassen, Computed-Tab prüfen |
-| **Breakpoints** | Wenn ''console.log'' nicht ausreicht – Code anhalten, Variablenwerte prüfen |
 </WRAP>