<!DOCTYPE html> <html> <head> <title>Debugging</title> <meta charset="utf-8" /> <link rel="stylesheet" type="text/css" href="style.css"/> <style> @import url(https://fonts.googleapis.com/css?family=Share+Tech+Mono&display=swap); @import url(https://fonts.googleapis.com/css?family=Roboto); body { font-family: 'Roboto'; font-size: large; } h1, h2, h3 { font-family: 'Share Tech Mono', monospace; margin-bottom: 0; } .small * { font-size: small !important; } code { font-family: monospace; border-radius: 5px; } .inverse { background: #272822; color: #777872; text-shadow: 0 0 20px #333; } .inverse h1, .inverse h2 { color: #f3f3f3; line-height: 0.8em; } .chapter { background: #000000; color: #f3f3f3; text-shadow: 0 0 20px #333; } .chapter h1, .inverse h2 { color: #f3f3f3; line-height: 0.8em; } .footnote { position: absolute; font-family: Roboto; font-size: small; bottom: 3em; right: 3em; } /* styling only necessary for displaying source */ #source { position: absolute; display: none; font-family: monospace; font-size: medium; background: #333333; color: white; padding: 10px; text-align: left; width: 65%; height: 70%; z-index: 1000; } #overlay { position: absolute; display: none; background: black; width: 100%; height: 100%; opacity: 0.2; z-index: 999; } </style> </head> <body> <textarea id="source"> class: center, middle, inverse # Debugging  13-03-2023 Fab Academy 2023 .footnote[ by: Henk & Nicolas ] ??? Press 'p' to enter presentation mode. Or even better: 1. press 'c' to clone the page 2. press 'p' to enter presentation mode 3. used cloned view for beam, share screen in zoom. --- class: middle <div class="my-footer"><span> <a rel="license" href="http://creativecommons.org/licenses/by/4.0/"><img alt="Creative Commons License" style="border-width:0" src="https://i.creativecommons.org/l/by/4.0/80x15.png" /></a>Fab Academy 2023 - recitation on debugging </span></div> .image_right[  ] <pre> 1-Attitude 2-General principles 3-Multimeter 4-Logical analyzers 5-Oscilloscope 6-How to debug almost anything kit 7-Flashing your board 8- Microcontroller debugging 9-Serial (or any) "Hello world!" 10-USB and computer detection 11 -Radio Communications </pre> --- class: center, middle, chapter <div class="my-footer"><span> <a rel="license" href="http://creativecommons.org/licenses/by/4.0/"><img alt="Creative Commons License" style="border-width:0" src="https://i.creativecommons.org/l/by/4.0/80x15.png" /></a>Fab Academy 2023 - recitation on debugging</span></div> # Attitude & General principles  .footnote[ Slides by Fran & Duaa ] --- class: middle, center ## ERROR .image_center[  ] --- <p> .image_right[ <img src="img/jump.jpg" height="500px"> ] ## Don't jump to conclusions <p> - Approach the problem objectively - Everyone (everything) is a suspect! --- <p> .image_right[ <img src="img/colombo1.jpg" height="600px"> ] ## Write <p> - what is happening - what is the environment - what are you doing - what are the results --- ## Read <img src="img/rtfm.jpg" height="450px"> Don't forget to undrestand what you just read! --- class: middle <div class="my-footer"><span> <a rel="license" href="http://creativecommons.org/licenses/by/4.0/"><img alt="Creative Commons License" style="border-width:0" src="https://i.creativecommons.org/l/by/4.0/80x15.png" /></a></a> Fab Academy 2023 - recitation on debugging </span></div> ## Narrowing down the problem <P> .image_right[ <img src="img/visual.jpg" height="400px"> ] <p> - Reproduce the problem - Always first do visual check - traces - solder - components - Keep in mind that the problem might not be visible without a microscope Everything looks good but... .footnote[ Image by Jonathan Blok - Waag ] --- <div class="my-footer"><span> <a rel="license" href="http://creativecommons.org/licenses/by/4.0/"><img alt="Creative Commons License" style="border-width:0" src="https://i.creativecommons.org/l/by/4.0/80x15.png" /></a></a> Fab Academy 2023 - recitation on debugging </span></div> <img src="img/p2.png" width="870"> --- <div class="my-footer"><span> <a rel="license" href="http://creativecommons.org/licenses/by/4.0/"><img alt="Creative Commons License" style="border-width:0" src="https://i.creativecommons.org/l/by/4.0/80x15.png" /></a></a> Fab Academy 2023 - recitation on debugging </span></div> ## It's not working  Concentrate only on the relevant parts. Isolate the problem. --- ## The microcontroller is not receiving voltage / the wrong voltage  Big chance the problem is located here. --- ## Can't program the microcontroller  Big chance the problem is located here. --- ## Programmed, unable to program other microcontrollers  Big chance the problem is located here. --- class: center, middle, chapter # Multimeter - "Continuous" phenomenons - Continuity check (+diodes orientation) : symbol - Voltage/Power check : parallel measurement - Resistance / current / ... --- <div class="my-footer"><span> <a rel="license" href="http://creativecommons.org/licenses/by/4.0/"><img alt="Creative Commons License" style="border-width:0" src="https://i.creativecommons.org/l/by/4.0/80x15.png" /></a></a> FabAcademy 2023 - recitation on debugging </span></div> ## Continuity - Test power supply to power pins continuity - Check fuses, diodes orientations, ... - Check short-circuits - Check traces  --- <div class="my-footer"><span> <a rel="license" href="http://creativecommons.org/licenses/by/4.0/"><img alt="Creative Commons License" style="border-width:0" src="https://i.creativecommons.org/l/by/4.0/80x15.png" /></a></a> FabAcademy 2023 - recitation on debugging </span></div> ## Voltage - Parallel measurement => check your cables! - ! absolute maximum ratings (may burn your component) - Power supply impedence / max power, badly selected - GND/VCC loop <img src="img/V_DC.jpg" width="350"><img src="img/parallel.png" width="350"> --- ## Power supply - Nothing : open circuit, short circuit, line break, blown fuse, ... - Voltage too low : power supply impedence, badly selected, ... - Voltage too high : above max. ratings, dead zener/reg., ... - GND/VCC loop --- <div class="my-footer"><span> <a rel="license" href="http://creativecommons.org/licenses/by/4.0/"><img alt="Creative Commons License" style="border-width:0" src="https://i.creativecommons.org/l/by/4.0/80x15.png" /></a></a> FabAcademy 2023 - recitation on debugging </span></div> ## How to check current, resistor, capacitor, ... - Learn more about you mulimeter capabilites! - Current : serie - Resistor : parallel - capacitor : parallel (+ polarity) <img src="img/multimeter-symbols.jpg" height="300"> --- <div class="my-footer"><span> <a rel="license" href="http://creativecommons.org/licenses/by/4.0/"><img alt="Creative Commons License" style="border-width:0" src="https://i.creativecommons.org/l/by/4.0/80x15.png" /></a></a> FabAcademy 2023 - recitation on debugging </span></div> ## MultiMeter <video id="sampleMovie" src="./img/multimeter.mp4" width="800" height="500" controls=""></video> --- <div class="my-footer"><span> <a rel="license" href="http://creativecommons.org/licenses/by/4.0/"><img alt="Creative Commons License" style="border-width:0" src="https://i.creativecommons.org/l/by/4.0/80x15.png" /></a></a> FabAcademy 2023 - recitation on debugging </span></div> ## Voltage Drop <video id="sampleMovie" src="./img/voltage_drop.mp4" width="800" height="500" controls=""></video> --- class: center, middle, chapter # Logical analyzer - Variable **digital** signals - Communications [UART, I²C, SPI, 1-Wire, ...] - PWM - Clock - ... --- <div class="my-footer"><span> <a rel="license" href="http://creativecommons.org/licenses/by/4.0/"><img alt="Creative Commons License" style="border-width:0" src="https://i.creativecommons.org/l/by/4.0/80x15.png" /></a></a> FabAcademy 2023 - recitation on debugging </span></div> ## Logical analyzers - High sampling rates (> 100MHz - 500 MHz) - Only "logical levels" (0 : <0.6V - 1 : > 1.2V => usually not CMOS logic!) - Multiple channels (8-16...) - "Unexpensive" (compared to oscilloscopes) - Allows you to read complex protocols easily [Saleae](https://www.saleae.com/), [Pulseview](https://sigrok.org/wiki/PulseView) with Cypress CY7C68013A, ... <img src="https://sigrok.org/wimg/e/ee/PulseView_I2C_DS1307_Decode.png" width="700"> --- <div class="my-footer"><span> <a rel="license" href="http://creativecommons.org/licenses/by/4.0/"><img alt="Creative Commons License" style="border-width:0" src="https://i.creativecommons.org/l/by/4.0/80x15.png" /></a></a> FabAcademy 2023 - recitation on debugging </span></div> # Logic Analayzer <video id="sampleMovie" src="./img/logicanalyzer.mp4" width="800" height="500" controls=""></video> --- <div class="my-footer"><span> <a rel="license" href="http://creativecommons.org/licenses/by/4.0/"><img alt="Creative Commons License" style="border-width:0" src="https://i.creativecommons.org/l/by/4.0/80x15.png" /></a></a> FabAcademy 2023 - recitation on debugging </span></div> # Logic Analayzer - ["logic analyzer 8 channel"](https://www.amazon.com/KeeYees-Analyzer-Device-Channel-Arduino/dp/B07K6HXDH1) - ["logic analyzer 16 channel"](https://nl.aliexpress.com/item/4000386048107.html) - ["Digikey 461-1010-ND: MICRO-HOOK RED 0.025" SQ PINS "](https://www.digikey.com/en/products/detail/e-z-hook/XKMRED/528231) - ["Digikey 461-1010-ND: MICRO-HOOK BLACK 0.025" SQ PINS "](https://www.digikey.com/en/products/detail/e-z-hook/XKMBLK/528230?s) --- <div class="my-footer"><span> <a rel="license" href="http://creativecommons.org/licenses/by/4.0/"><img alt="Creative Commons License" style="border-width:0" src="https://i.creativecommons.org/l/by/4.0/80x15.png" /></a></a> FabAcademy 2023 - recitation on debugging </span></div> # LA104 + DS213 <p> .image_right[ <img src="./img/24.jpg" height="400px"> ] - [LA104](http://www.miniware.com.cn/product/signal-analyzer/) - [DS213](http://www.miniware.com.cn/product/ds213-mini-oscilloscope/) --- class: center, middle, chapter # Oscilloscope - "Variable / random" phenomena - Variable signals (analog, communications, blink, sound, ...) --- <div class="my-footer"><span> <a rel="license" href="http://creativecommons.org/licenses/by/4.0/"><img alt="Creative Commons License" style="border-width:0" src="https://i.creativecommons.org/l/by/4.0/80x15.png" /></a></a> FabAcademy 2023 - recitation on debugging </span></div> ## Oscilloscope (main functions) - "Real" voltage levels, high sampling rate (> 10MHz - 1GHz) - Dynamic view - Triggers/Time/Level - Lots of analysis capabilities inside (play with menus : capture/ analyse / freq-time / intervals / Peak-peak / frequency / ...) - Few channels (~1-4) - Expensive tool. Poor human alternative : sound card mic/line input [< 44.1kS/sec] <img src="img/oscilloscope.jpg" width="500"> --- class: middle <div class="my-footer"><span> <a rel="license" href="http://creativecommons.org/licenses/by/4.0/"><img alt="Creative Commons License" style="border-width:0" src="https://i.creativecommons.org/l/by/4.0/80x15.png" /></a></a> FabAcademy 2023 - recitation on debugging </span></div> <img src="img/thies_no_conditionning.png" width="350"><img src="img/thies_conditionning.png" width="350"> "Random" behaviours : - Check proper signals - Check proper power (stable enough?) - DC decoupling capacitor? (same idea as toilet flush ;-) ) --- class: middle <div class="my-footer"><span> <a rel="license" href="http://creativecommons.org/licenses/by/4.0/"><img alt="Creative Commons License" style="border-width:0" src="https://i.creativecommons.org/l/by/4.0/80x15.png" /></a></a> FabAcademy 2023 - recitation on debugging </span></div> <center> <iframe width="672" height="378" src="https://www.youtube.com/embed/waXIuDSv9uY" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen ></iframe> </center> --- class: middle <div class="my-footer"><span> <a rel="license" href="http://creativecommons.org/licenses/by/4.0/"><img alt="Creative Commons License" style="border-width:0" src="https://i.creativecommons.org/l/by/4.0/80x15.png" /></a></a> FabAcademy 2023 - recitation on debugging </span></div> <center> <iframe width="672" height="378" src="https://www.youtube.com/embed/HJwMpVrwPUQ" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe> </center> --- class: middle <div class="my-footer"><span> <a rel="license" href="http://creativecommons.org/licenses/by/4.0/"><img alt="Creative Commons License" style="border-width:0" src="https://i.creativecommons.org/l/by/4.0/80x15.png" /></a></a> FabAcademy 2023 - recitation on debugging </span></div> <center> <iframe width="672" height="378" src="https://www.youtube.com/embed/6btUw8nLmuU" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe> </center> --- class: middle <div class="my-footer"><span> <a rel="license" href="http://creativecommons.org/licenses/by/4.0/"><img alt="Creative Commons License" style="border-width:0" src="https://i.creativecommons.org/l/by/4.0/80x15.png" /></a></a> FabAcademy 2023 - recitation on debugging </span></div> <center> <iframe width="672" height="378" src="https://www.youtube.com/embed/DHvR1r6aXpw" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe> </center> --- <div class="my-footer"><span> <a rel="license" href="http://creativecommons.org/licenses/by-nc/4.0/"><img alt="Creative Commons License" style="border-width:0" src="https://i.creativecommons.org/l/by-nc/4.0/80x15.png" /></a></a> FabAcademy 2023 - recitation on debugging </span></div> ## Pinecile <img src="https://images.ctfassets.net/2lpsze4g694w/7z8QIZm61leOIQQANsxu33/d826cb16b2e08da0b41f070a3bfe9768/main_on.jpg" width="800"> - [Pinecil](https://pine64.com/product/pinecil-smart-mini-portable-soldering-iron/) --- <div class="my-footer"><span> <a rel="license" href="http://creativecommons.org/licenses/by-nc/4.0/"><img alt="Creative Commons License" style="border-width:0" src="https://i.creativecommons.org/l/by-nc/4.0/80x15.png" /></a></a> FabAcademy 2023 - recitation on debugging </span></div> ## DPS3005 Bench Power Supply <p> <center> <img src="img/dps3005.jpg" width="600"> </center> </p> - [DPS3005/5005](https://nl.aliexpress.com/item/4001237790968.html) --- <div class="my-footer"><span> <a rel="license" href="http://creativecommons.org/licenses/by-nc/4.0/"><img alt="Creative Commons License" style="border-width:0" src="https://i.creativecommons.org/l/by-nc/4.0/80x15.png" /></a></a> FabAcademy 2023 - recitation on debugging </span></div> ## DPS3005 Bench Power Supply <p> <center> <img src="img/DPS5005_pyGUI.png" width="800"> </center> </p> - [PyGUI](https://github.com/lambcutlet/DPS5005_pyGUI) --- class: center, middle, chapter # Flashing your board And what can go wrong --- <div class="my-footer"><span> <a rel="license" href="http://creativecommons.org/licenses/by/4.0/"><img alt="Creative Commons License" style="border-width:0" src="https://i.creativecommons.org/l/by/4.0/80x15.png" /></a></a> FabAcademy 2023 - recitation on debugging </span></div> ## EDBG for flashing ARM (1) - Connect a CMSIS-DAP SWD adapter - 10-pin 1.27mm connectors are convenient, but triple check the orientation - If VCC pin is unused, power your target device separately - Make sure the programmer is on 3.3V if programming SAMD <center> <img src="img/programmer_jtag.jpg" width="700"> </center> --- <div class="my-footer"><span> <a rel="license" href="http://creativecommons.org/licenses/by/4.0/"><img alt="Creative Commons License" style="border-width:0" src="https://i.creativecommons.org/l/by/4.0/80x15.png" /></a></a> FabAcademy 2023 - recitation on debugging </span></div> ## EDBG for flashing ARM (2) - List programmers ```c edbg -b -l ``` - Erase first (!) and load program ```c edbg -ebpv -t <processor> -f <program.bin> ``` - flags: - -b: verbose (optional) - -e: erase - -p: program - -v: verify (optional) - -t: target type (e.g. samd11) - Common problems - Programmer not listed: check USB - Invalid response: check JTAG connection --- <div class="my-footer"><span> <a rel="license" href="http://creativecommons.org/licenses/by/4.0/"><img alt="Creative Commons License" style="border-width:0" src="https://i.creativecommons.org/l/by/4.0/80x15.png" /></a></a> FabAcademy 2023 - recitation on debugging </span></div> ## UPDI for Flashing AVR (1) - All you need is a serial adapter - RX and TX connected together with a 4.7k resistor - VCC is optional but ensures both chips talk at the same logic level - Programming is initiated with a break (LOW level for a long duration) <center> <img src="img/programmer_updi.png" width="500"> </center> --- <div class="my-footer"><span> <a rel="license" href="http://creativecommons.org/licenses/by/4.0/"><img alt="Creative Commons License" style="border-width:0" src="https://i.creativecommons.org/l/by/4.0/80x15.png" /></a></a> FabAcademy 2023 - recitation on debugging </span></div> ## UPDI for Flashing AVR (2) - pymcuprog.py ```c pymcuprog -d <processor> -t uart -u <port> -v info erase pymcuprog -d <processor> -t uart -u <port> -v info write -f <program.hex> ``` - Arduino IDE - install megaTinyCore (ATtiny 1-series) or DxCore (AVR DA/DB) - use "serial port and 4.7k (pyupdi style) SLOW" programmer - select correct serial port and click upload - Common problems - wrong serial settings: adapter needs 2 Stop bits and Even parity - "incorrect echo": are RX and TX connected together? - "UPDI initialisation failed": have you tried turning it off and on again? --- class: center, middle, chapter # In-circuit / On-Chip debugging Advanced debugging --- <div class="my-footer"><span> <a rel="license" href="http://creativecommons.org/licenses/by/4.0/"><img alt="Creative Commons License" style="border-width:0" src="https://i.creativecommons.org/l/by/4.0/80x15.png" /></a></a> FabAcademy 2023 - recitation on debugging </span></div> ## Atmel ICE <center> <img src="img/atmel_ice.jpg" width="500"> </center> - [Atmel-ICE](https://www.microchip.com/DevelopmentTools/ProductDetails/ATATMEL-ICE) - Allows you to pause execution (breakpoints / run-to-cursor) - Watch variables and registers - Tightly integrated within **Atmel Studio** --- <div class="my-footer"><span> <a rel="license" href="http://creativecommons.org/licenses/by/4.0/"><img alt="Creative Commons License" style="border-width:0" src="https://i.creativecommons.org/l/by/4.0/80x15.png" /></a></a> FabAcademy 2023 - recitation on debugging </span></div> ## OpenOCD+GDB for debugging SAMD - Open source alternative to Atmel Studio debugging - Install on windows: https://gnutoolchains.com/arm-eabi/openocd/ - Install on linux: ```bash apt get install openocd ``` - Create `openocd.cfg`: ```c source [find interface/cmsis-dap.cfg] set CHIPNAME at91samd11c14 source [find target/at91samdXX.cfg] ``` - Connect SWD programmer and launch: `openocd` - Connect to opencd with gdb: ```bash arm-none-eabi-gdb -iex "target extended-remote localhost:3333" ``` --- class: center, middle, chapter # Serial (or any) "Hello world!" Sending internal info through communication line --- <div class="my-footer"><span> <a rel="license" href="http://creativecommons.org/licenses/by/4.0/"><img alt="Creative Commons License" style="border-width:0" src="https://i.creativecommons.org/l/by/4.0/80x15.png" /></a></a> FabAcademy 2023 - recitation on debugging </span></div> ## Serial (or any) "Hello world!" - Show any external signal on code execution (eg : LED blinking) - Send register value or "hello world" message through communication lines (eg : serial/UART) - Very simple to implement but requires functional microcontroller - Allows you to follow execution steps Example: ```c #define DEBUG_MODE 1 ... #if DEBUG_MODE Serial.print("DEBUG -- MyVal value = "); Serial.println(MyVal, DEC); #endif ``` --- class: center, middle, chapter # USB Check your USB device can be found by the OS --- <div class="my-footer"><span> <a rel="license" href="http://creativecommons.org/licenses/by/4.0/"><img alt="Creative Commons License" style="border-width:0" src="https://i.creativecommons.org/l/by/4.0/80x15.png" /></a></a> Fab Academy 2020 - recitation on debugging </span></div> ## USB .small[ ```terminal $ lsusb Bus 002 Device 001: ID 1d6b:0003 Linux Foundation 3.0 root hub Bus 001 Device 003: ID 046d:c05a Logitech, Inc. M90/M100 Optical Mouse Bus 001 Device 004: ID 413c:2011 Dell Computer Corp. Multimedia Pro Keyboard ``` ] .small[ ```terminal $ lsusb Bus 002 Device 001: ID 1d6b:0003 Linux Foundation 3.0 root hub Bus 001 Device 003: ID 046d:c05a Logitech, Inc. M90/M100 Optical Mouse Bus 001 Device 004: ID 413c:2011 Dell Computer Corp. Multimedia Pro Keyboard <span style="color:#FF5555;">Bus 001 Device 029: ID 6666:6666 Prototype product Vendor ID </span> ``` ] If nothing : - Check you load **proper bootloader**! - Check lines, voltages ("5V" power BUT 3.3V communication D-/D+), zener orientations, ... If declared but doesn't work : - Check USB devices permissions - Check firmware (inject a tried-and-tested) --- <div class="my-footer"><span> <a rel="license" href="http://creativecommons.org/licenses/by/4.0/"><img alt="Creative Commons License" style="border-width:0" src="https://i.creativecommons.org/l/by/4.0/80x15.png" /></a></a> FabAcademy 2023 - recitation on debugging </span></div> ## USB .small[ ```terminal $ dmesg -w ``` ] .center[ <video width="720" height="480" controls> <source src="./img/dmesg.mp4" type="video/mp4"> Your browser does not support the video tag. </video> ] --- class: center, middle, chapter # Radio Communications How to see what you can't even touch? --- <div class="my-footer"><span> <a rel="license" href="http://creativecommons.org/licenses/by/4.0/"><img alt="Creative Commons License" style="border-width:0" src="https://i.creativecommons.org/l/by/4.0/80x15.png" /></a></a> FabAcademy 2023 - recitation on debugging </span></div> ## Radio communications - Frequency ranges (~kHz to ~GHz) - Use receiver modules - DVB-T receiver as radio tool : [GNU Radio (live), SDR environment](https://wiki.gnuradio.org/index.php/GNU_Radio_Live_SDR_Environment) <img src="img/dvb-t.jpg" width="100"> <img src="img/rtl_sdr.jpg" width="300"> <img src="img/scope_fft.jpg" width="300"> --- <div class="my-footer"><span> <a rel="license" href="http://creativecommons.org/licenses/by/4.0/"><img alt="Creative Commons License" style="border-width:0" src="https://i.creativecommons.org/l/by/4.0/80x15.png" /></a></a> FabAcademy 2023 - recitation on debugging </span></div> ## Radio communications .center[ <video width="720" height="480" controls> <source src="./img/sdr.mp4" type="video/mp4"> Your browser does not support the video tag. </video> ] --- <div class="my-footer"><span> <a rel="license" href="http://creativecommons.org/licenses/by-nc/4.0/"><img alt="Creative Commons License" style="border-width:0" src="https://i.creativecommons.org/l/by-nc/4.0/80x15.png" /></a></a> FabAcademy 2023 - recitation on debugging </span></div> ## Happy Debugging <p> <center> <img src="img/happy_debugging.jpg" width="800"> </center> </p> </textarea> <script src="https://remarkjs.com/downloads/remark-latest.min.js"></script> <script type="text/javascript"> var hljs = remark.highlighter.engine; </script> <script src="terminal.language.js" type="text/javascript"></script> <script type="text/javascript"> var slideshow = remark.create({ highlightStyle: 'monokai' }); // extract the embedded styling from ansi spans var highlighted = document.querySelectorAll("code.terminal span.hljs-ansi"); Array.prototype.forEach.call(highlighted, function(next) { next.insertAdjacentHTML("beforebegin", next.textContent); next.parentNode.removeChild(next); }); </script> </body> </html>