Unterschiede

Hier werden die Unterschiede zwischen zwei Versionen angezeigt.

--- de:modul:m291:learningunits:lu07:theorie:lu07a_debugging [2026/03/22 16:26] – gkoch
+++ de:modul:m291:learningunits:lu07:theorie:lu07a_debugging [2026/03/22 22:03] (aktuell) – ä gkoch
@@ Zeile 194: / 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 226: / Zeile 226: @@
 <WRAP round box 80% center>
 === Script im <head> - falsch! ===
-{{:de:modul:m291:learningunits:lu07:theorie:script_im_head.png?nolink&400| Script im Head}}
+{{:de:modul:m291:learningunits:lu07:theorie:script_im_head.png?nolink&700| Script im Head}}
 <code html>
@@ Zeile 241: / Zeile 241: @@
 === Script vor </body> - gut! ===
-{{:de:modul:m291:learningunits:lu07:theorie:script_before_body.png?nolink&400| Script im Body}}
+{{:de:modul:m291:learningunits:lu07:theorie:script_before_body.png?nolink&700| Script im Body}}
 </WRAP>
@@ Zeile 250: / 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 257: / 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 291: / 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>