31:[{"id":"32cf9bf0c4e0bfdeab3bc9429392a23b566a9e12cb9224584616d2492b019f7f27db3e04efe2d5eaa7d7ea409c2daad982da02148a8d0af7b0ed7e75057b6c61","href":"https://static.observableusercontent.com/files/32cf9bf0c4e0bfdeab3bc9429392a23b566a9e12cb9224584616d2492b019f7f27db3e04efe2d5eaa7d7ea409c2daad982da02148a8d0af7b0ed7e75057b6c61","name":"inspect_data.gif","type":"image/gif","lastModified":1650874059708.038,"size":161985}] 2f:{"title":"Debugging","cells":[{"id":0,"value":"# Debugging","pinned":false,"hidden":false,"mode":"md"},{"id":827,"value":"","pinned":false,"hidden":false,"mode":"html"},{"id":1391,"value":"Debugging im JavaScript lässt sich über die Entwickler-Tools im Browser machen. Dafür kann man rechts klicken und `Inspect` oder `Untersuchen` auswählen. Mit diesem Menü lässt sich der Programmcode untersuchen und man kann auf einzelne Elmente im DOM zugreifen. Weitere Optionen sind einen `console.log` Aufruf zu machen oder einen `debugger` zu setzen.\n\n### console.log()\nSchauen wir uns zuerst an, wie man mit einem console.log() arbeiten kann und was dann genau geschrieben wird.","pinned":false,"hidden":false,"mode":"md"},{"id":1623,"value":"{\n const a = 5;\n const b = 6;\n const c = a + b;\n console.log(c);\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":1626,"value":"Wir können dann in der Konsole den Wert von c ablesen. Wenn wir in der Konsole ein Objekt zurückgeben, haben wir zudem noch eine genauere Angabe, was wir gerade geloggt haben.","pinned":true,"hidden":false,"mode":"md"},{"id":1631,"value":"{\n const a = 5;\n const b = 6;\n const c = a + b;\n console.log({ c });\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":1633,"value":"Einen solchen Konsolen-Aufruf können wir einfach in unseren Code einbauen und dadurch nachvollziehen, was in einer gewissen Variable gerade für ein Wert gesetzt ist.\n\n### Debugger\nMit einem Debugger können wir den Programm-Code anhalten bzw. sogenannte Breakpoints setzen. Das kann bei einem komplexen Funktionsaufruf oder auch einer Schleife sinnvoll sein.","pinned":true,"hidden":false,"mode":"md"},{"id":1640,"value":"{\n const length = 5;\n let sum = 0;\n for (let index = 0; index < length; ++index) {\n sum += 5;\n debugger;\n }\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":1659,"value":"Dadurch können wir schrittweise nachvollziehen, wie der Programm-Code die Summe ausrechnet bzw. die Schleife abarbeitet.\n\n### Debugging in D3\nFür D3 gibt es noch eine spezielle Debugging-Option. Wir können über den Inspector ein Element auswählen und dann in der Konsole `$0.__data__` tippen, um herauszufinden, welche Daten an diesess Element gebunden wurden.","pinned":false,"hidden":false,"mode":"md"},{"id":1662,"value":"FileAttachment(\"inspect_data.gif\").image()","pinned":true,"hidden":false,"mode":"ojs"},{"id":1350,"value":"### Ressourcen\n- https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/dominant-baseline\n- https://developer.mozilla.org/de/docs/Web/SVG/Element/rect\n- https://developer.mozilla.org/de/docs/Web/SVG/Element/circle\n- https://github.com/d3/d3-scale\n- https://bl.ocks.org/clhenrick/da9301dc7f5304c6b2083ddcbc7e1baf","pinned":false,"hidden":false,"mode":"md"},{"id":809,"value":"

Appendix

","pinned":false,"hidden":false,"mode":"html"},{"id":245,"value":"import {style} from \"@cas-datenvisualisierung/style\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":251,"value":"style","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W31","stdlib":"1","titling":"auto"}

Lernziel

Appendix