29:null 2a:["$","title",null,{"children":"Debugging | CAS Datenvisualisierung | Observable"}] 2f:[{"id":"32cf9bf0c4e0bfdeab3bc9429392a23b566a9e12cb9224584616d2492b019f7f27db3e04efe2d5eaa7d7ea409c2daad982da02148a8d0af7b0ed7e75057b6c61","href":"https://static.observableusercontent.com/files/32cf9bf0c4e0bfdeab3bc9429392a23b566a9e12cb9224584616d2492b019f7f27db3e04efe2d5eaa7d7ea409c2daad982da02148a8d0af7b0ed7e75057b6c61","name":"inspect_data.gif","type":"image/gif","lastModified":1650874059708.038,"size":161985}] 2d:{"id":"a4fa90b35ae7fe7e","slug":"debugging","title":"Debugging","thumbnail":"f0ae45a2c5ae7a119cc9a3665bd7a4536df9c6ced6e11717466e3c5e399f7e10","access_level":"public","create_time":"$D2022-04-25T07:38:37.928Z","update_time":"$D2022-04-27T14:19:52.259Z","view_time":null,"first_public_time":"$D2022-04-26T14:44:52.764Z","has_unpublished_edits":null,"fork":true,"stars":0,"starred":false,"owner":{"type":"team","id":"f6ac14d015cd81f5","login":"cas-datenvisualisierung","name":"CAS Datenvisualisierung","avatar_url":"https://avatars-next.observableusercontent.com/4797d88ca1d2799854ec174eb3b8719bdc3acd9dfdf473bd9105d591ef7440a8","tier":"pro_2024"},"version":1664,"publish_version":1664,"role":null,"authored":false,"authors":[{"type":"individual","id":"1398cb39f3ba00bf","login":"felixmichel","name":"Felix Michel","avatar_url":"https://avatars-next.observableusercontent.com/4b9f6f61d9c7481c763892b1fd34b3686fc68bf0d5bfe1c8e4068123a2a8ac5e","tier":null}],"members":[{"type":"team","id":"f6ac14d015cd81f5","login":"cas-datenvisualisierung","name":"CAS Datenvisualisierung","avatar_url":"https://avatars-next.observableusercontent.com/4797d88ca1d2799854ec174eb3b8719bdc3acd9dfdf473bd9105d591ef7440a8","tier":"pro_2024","role":"editor"},{"type":"individual","id":"1398cb39f3ba00bf","login":"felixmichel","name":"Felix Michel","avatar_url":"https://avatars-next.observableusercontent.com/4b9f6f61d9c7481c763892b1fd34b3686fc68bf0d5bfe1c8e4068123a2a8ac5e","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":10,"collection":{"id":"841439741e443d5a","slug":"5c-animierte-grafiken","title":"5b Animierte Grafiken","owner":{"id":"f6ac14d015cd81f5","login":"cas-datenvisualisierung","name":"CAS Datenvisualisierung"}},"type":"notebook","body":{"title":"Debugging","cells":[{"id":0,"value":"# Debugging","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":827,"value":"","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1662,"value":"FileAttachment(\"inspect_data.gif\").image()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":809,"value":"

Appendix

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":245,"value":"import {style} from \"@cas-datenvisualisierung/style\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":251,"value":"style","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W2f","stdlib":"1","titling":"auto"}} 2e:"$2d:body"

Lernziel

Appendix