Unterschiede

Hier werden die Unterschiede zwischen zwei Versionen angezeigt.

--- de:modul:m291:learningunits:lu07:theorie:lu07a_debugging [2026/03/22 16:13] – gkoch
+++ de:modul:m291:learningunits:lu07:theorie:lu07a_debugging [2026/03/22 22:03] (aktuell) – ä gkoch
@@ Zeile 3: / Zeile 3: @@
 {{: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, den Browser (oder den Editor) zu **befragen** – mit den richtigen Werkzeugen, in der richtigen Reihenfolge.
+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 16: / 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 36: / 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>
@@ Zeile 108: / Zeile 107: @@
 <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 stillen Fehlern.\\
+**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>
@@ Zeile 195: / 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 221: / Zeile 220: @@
 ==== Script-Position: Ein stiller, häufiger Fehler ====
+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>
+=== Script im <head> - falsch! ===
+{{:de:modul:m291:learningunits:lu07:theorie:script_im_head.png?nolink&700| Script im Head}}
 <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 232: / 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 256: / 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 263: / 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;'')
@@ Zeile 297: / 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>