Debugger (#167)

Author: urfdvw

README.md

@@ -1,44 +1,53 @@
 # CircuitPython Online IDE
+
 > The easiest way to code CircuitPython. **No installation** required. Perfect for **Education** and **Hobbyists**. Supports **Chromebooks**.
 
-[![Launch IDE](https://img.shields.io/badge/🚀_Launch-Open_Web_Editor-green?style=for-the-badge&logo=google-chrome)](https://urfdvw.github.io/circuitpython-online-ide-2)
----
+## [![Launch IDE](https://img.shields.io/badge/🚀_Launch-Open_Web_Editor-green?style=for-the-badge&logo=google-chrome)](https://urfdvw.github.io/circuitpython-online-ide-2)
 
 ![CircuitPython Online IDE Demo](/docs/media/main.png)
 
 ---
 
 ## Why use this IDE?
 
-* **Instant Setup:** This IDE runs entirely in your browser. Just plug in your board and start coding. 
-* **Powerful tools:** Comes with a built-in **Library Manager** and **Serial Plotter**.
-* **Education Ready:** Works flawlessly on school **Chromebooks** where installing software is blocked.
+-   **Instant Setup:** This IDE runs entirely in your browser. Just plug in your board and start coding.
+-   **Powerful tools:** Comes with a built-in **Library Manager** and **Serial Plotter**.
+-   **Education Ready:** Works flawlessly on school **Chromebooks** where installing software is blocked.
 
 ---
 
 ## Key Features
 
+### 🐞 Debugger
+
+The first-ever visual debugger for CircuitPython is here! Step through your code, set breakpoints or conditional breakpoints, track variables, and rewind time to catch bugs before they happen.
+
+![Debugger](/docs/media/debugger.png)
+
 ### 📦 One-Click Library Manager
+
 Never worry about dependencies again! Just write your code, and the IDE will analyze your imports and install all required libraries with a single click. You can also search and browse the entire Adafruit and Community Bundle to discover available libraries.
 
 ![Library Manager Screenshot](/docs/media/library_management.png)
 
 ### 📈 Built-in Serial Plotter
+
 Visualizing sensor data? You don't need external tools. Plots numeric data from the serial output in real-time. Perfect for STEM experiments.
 
 ![Serial Plotter Screenshot](/docs/media/plotter.png)
 
 ### 📂 Visual File Management
+
 Manage files on your microcontroller just like on your computer. Create, edit, and organize without leaving the browser.
 
 ![Folder View Screenshot](/docs/media/folder_view.png)
 
 ### 📷 Camera View
+
 Showcase your microcontroller to others during streaming, remote learning or collaboration. Share your camera feed directly through the IDE.
 
 ![Camera View Screenshot](/docs/media/camera.png)
 
-
 ---
 
 ## Quick Start
@@ -53,19 +62,19 @@ Showcase your microcontroller to others during streaming, remote learning or col
 
 ## Compatibility
 
-* **Hardware:** Supports all CircuitPython boards.
-* **OS:** All desktop OSes including Chromebooks.
-* **Browsers:** Google Chrome, or Chromium-based browsers such as Microsoft Edge, Opera.
+-   **Hardware:** Supports all CircuitPython boards.
+-   **OS:** All desktop OSes including Chromebooks.
+-   **Browsers:** Google Chrome, or Chromium-based browsers such as Microsoft Edge, Opera.
 
 ---
 
 ## Feedback & Community
 
-* **Tell me your story!** [Fill out the Survey](https://docs.google.com/forms/d/e/1FAIpQLSdupiJIRViFwPpuQC1hMp8gRvhxACLoAjgepm_-IRZumwK7Cg/viewform)
-* **Found a bug?** [Check out this guide](https://github.com/urfdvw/circuitpython-online-ide-2/blob/main/src/docs/Feedback%20and%20Code%20Contribution.md)
-* **Follow Me:**
-    * YouTube: [@Riverwang](https://www.youtube.com/channel/UCeunCRTBkjHWynMl4I4le_A)
-    * Twitter: [@River___Wang](https://twitter.com/River___Wang)
-    * Mastodon: [@Riverwang](https://fosstodon.org/@Riverwang)
+-   **Tell me your story!** [Fill out the Survey](https://docs.google.com/forms/d/e/1FAIpQLSdupiJIRViFwPpuQC1hMp8gRvhxACLoAjgepm_-IRZumwK7Cg/viewform)
+-   **Found a bug?** [Check out this guide](https://github.com/urfdvw/circuitpython-online-ide-2/blob/main/src/docs/Feedback%20and%20Code%20Contribution.md)
+-   **Follow Me:**
+    -   YouTube: [@Riverwang](https://www.youtube.com/channel/UCeunCRTBkjHWynMl4I4le_A)
+    -   Twitter: [@River\_\_\_Wang](https://twitter.com/River___Wang)
+    -   Mastodon: [@Riverwang](https://fosstodon.org/@Riverwang)
 
 **If this project helped you, please give it a Star ⭐️ on GitHub!**

dev logs/debugger review.md

@@ -0,0 +1,12 @@
+- [x] start/end indicator
+    - [x] stop/restart button
+- [x] step running indicator
+    - [x] UI differentiate step running or waiting on user step or continue
+- [x] auto start on debugger page
+    - [x] need hint on when preparing
+- [x] auto re-instrumentation
+- UI refine into better workflow
+    - [x] only one button left in toolbar to reduce confusion
+        - I wanted to keep the button on the top instead of at the button, so that always visible and no need to scroll to see the button
+    - [x] select 'code.py' by default and will alert when the last file is deselected.
+    - [x] the first page is moved to backup if CIRCUITPY is not connected

docs/index.html

@@ -48,10 +48,19 @@ self.addEventListener("fetch", (event) => {
             return cache.match(event.request).then((cachedResponse) => {
                 const fetchPromise = fetch(event.request)
                     .then((networkResponse) => {
-                        // Update the cache with the fresh resource
-                        cache.put(event.request, networkResponse.clone());
-                        return networkResponse;
-                    })
+                            // Only cache GET requests and successful responses.
+                            // The Cache API only supports caching GET requests; attempting to
+                            // cache other methods (e.g. HEAD) will throw a TypeError.
+                            try {
+                                if (event.request.method === 'GET' && networkResponse && networkResponse.ok) {
+                                    cache.put(event.request, networkResponse.clone());
+                                }
+                            } catch (cacheErr) {
+                                // Log and continue; do not let caching errors break responses.
+                                console.warn('Service worker cache.put failed:', cacheErr);
+                            }
+                            return networkResponse;
+                        })
                     .catch(() => {
                         // Network request failed; if there's a cache, serve it
                         console.log("Serving cached response for " + event.request.url);