Improved debugging window.squiggleOutput path, added documentation

packages/components/src/lib/hooks/useSquiggle.ts

@@ -101,20 +101,30 @@ export function useSquiggle(args: SquiggleArgs): UseSquiggleOutput {
         project.setContinues(sourceId, continues);
         await project.run(sourceId);
         const output = project.getOutput(sourceId);
-
-        //Set the output to the window so that it can be accessed by users/developers there
-        //This is useful for debugging
-        if (typeof window !== "undefined") {
-          window[WINDOW_VARIABLE_NAME] = output;
-        }
+        const executionTime = Date.now() - startTime;
 
         setSquiggleOutput({
           output,
           code: args.code,
           executionId,
-          executionTime: Date.now() - startTime,
+          executionTime,
         });
         setIsRunning(false);
+
+        //Set the output to the window so that it can be accessed by users/developers there
+        //This is useful for debugging
+        if (typeof window !== "undefined") {
+          if (!window[WINDOW_VARIABLE_NAME]) {
+            window[WINDOW_VARIABLE_NAME] = {};
+          }
+          window[WINDOW_VARIABLE_NAME][sourceId] = {
+            output,
+            code: args.code,
+            executionId,
+            executionTime,
+            startTime,
+          };
+        }
       };
 
       if (typeof MessageChannel === "undefined") {

packages/website/src/pages/docs/Api/BuiltIn.mdx

@@ -4,14 +4,27 @@ description: Builtin functions that work on many types.
 
 ### typeOf 
 
-Returns the type of the value passed in as a string.
+Returns the type of the value passed in as a string. This is useful when you want to treat a value differently depending on its type.
+
 ```
 typeOf: (any) => string
 ```
 
+```squiggle
+fn(v) = if typeOf(v) == "String" then v else if typeOf(v) ==
+  "Number" then "the number: " + v else "other"
+```
+
 ### inspect 
 
-Runs Console.log() in the Javascript console and returns the value passed in.
+Runs Console.log() in the [Javascript developer console](https://www.digitalocean.com/community/tutorials/how-to-use-the-javascript-developer-console) and returns the value passed in.
+
 ```
 inspect: (`a) => `a
+inspect: (`a, string) => `a
+```
+
+```squiggle
+foo = inspect(5 to 10) // sets foo to (5 to 10) and logs it to the console
+foo = inspect(5 to 10, "my range")
 ```

packages/website/src/pages/docs/Guides/Debugging.md

@@ -0,0 +1,14 @@
+---
+description: Tips for debugging Squiggle code
+---
+
+# Debugging
+
+Interactive visualizations are a primary tool for understanding Squiggle code, but there are some additional techniques that can improve the debugging process. Here are some tips and tricks:
+
+## Basic Console Logging
+  - **Built-in Inspection:** Utilize the [``inspect()``](/docs/Api/BuiltIn#inspect) function to log any variable to the console. This function provides a detailed view of the variable's current state and is useful for tracking values throughout your code.  
+  - **Variable Settings Toggle:** Click on the variable menu in the Squiggle interface and select "Log to JS Console". 
+
+## ``Window.squiggleOutput``
+Squiggle pushes its output to ``window.squiggleOutput``. Like with the outputs of ``inspect``, you can see this in the [JS developer console](https://www.digitalocean.com/community/tutorials/how-to-use-the-javascript-developer-console).

packages/website/src/pages/docs/Guides/_meta.json

@@ -7,5 +7,6 @@
   "ControlFlow": "Control Flow",
   "Bugs": "Known Bugs",
   "Gotchas": "Gotchas",
+  "Debugging": "Debugging",
   "Roadmap": "Roadmap"
 }