js web and api code

app/MiscUnit.js

@@ -42,6 +42,17 @@ dbsetup({
 \tserver: "https://CHANGEME:8000/", // DevBug Server URL
 \tproject: "CHANGEME", // Project API Key
 })`,
+                api: `Send a multipart/form-data POST request to:
+http(s)://<devbug url>/api/v1/out/<project api key>
+
+The form should have a single field with the name "data".
+This field should contain a valid JSON string with the following structure:
+{
+    "brief": "Some preview text to be displayed. Whatever you want.",
+    "data": {
+        // the output data (key-pairs) goes here
+    }
+}`,
                 php: `<?php
 // ===========================================================
 // DEVBUG INLINE DEBUGGING HELPER - FOR USE WITH DEVBUG SERVER
@@ -96,6 +107,50 @@ function breakpoint($html = false, $name = null){
 
 \texit();
 }
+// ===========================================================`,
+                js: `// ===========================================================
+// DEVBUG INLINE DEBUGGING HELPER - FOR USE WITH DEVBUG SERVER
+// TODO: REMOVE BEFORE COMMITTING
+let outs = {}
+const devbug_url = 'http://CHANGEME:8000/'
+const project_api_key = 'CHANGEME'
+const out = (key, what, group=false) => {
+    if ( group ){
+        if ( Object.keys(outs).includes(group) ) outs[group][key] = what
+        else outs[group] = {}; outs[group][key] = where
+    }
+    else {
+        outs[key] = what
+    }
+}
+const breakpoint = (html = false, name = null) => {
+    var e = new Error();
+    (function() {
+        // Load the script
+        var script = document.createElement("SCRIPT");
+        script.src = 'https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js';
+        script.type = 'text/javascript';
+        script.onload = () => {
+            var $ = window.jQuery;
+          $(() => {
+                e = e.stack.split('at'); var caller = '';
+                if ( e.length < 3 ) e = e.stack.split('@')
+                if ( e.length > 2 ) caller = e[2].trim()
+                    else if ( e.length > 1 ) caller = e[1]
+                    else caller = 'Unable to determine stacktrace'
+                var data = new FormData();
+                data.append('data', JSON.stringify({brief: (name ? name : 'Breakpoint: ')+caller,data: outs}))
+                $.ajax({
+                    url: devbug_url+'api/v1/out/'+project_api_key,
+                    data: data, cache: false, contentType: false, processData: false, method: 'POST', type: 'POST',
+                    success: (res) => { console.log('DevBug POST Completed'); console.log(res) }
+                })
+            });
+        };
+        document.getElementsByTagName("head")[0].appendChild(script);
+    })();
+}
+if ( window ) window.out = out; window.breakpoint = breakpoint;
 // ===========================================================`
             }
         }

app/views/dash_v1/code.pug

@@ -5,7 +5,7 @@ block content
     code out()
     | function. Then, call the 
     code breakpoint()
-    | function to send those outputs to DevBug.
+    | function to send those outputs to DevBug. Currently, there are official clients for Node.js, PHP, and Javascript (Web). However, the clients make use of a generic exposed API endpoint which you can use from anywhere.
     h2 Node.js
     p To use DevBug in a Node.js app, install the "devbugjs" NPM package. Then, to initialize DevBug, use the following code snippet at any point in the application:
     pre
@@ -17,3 +17,12 @@ block content
     | function.
     pre
         code #{devbug.code.php}
+    h2 JavaScript (Web)
+    p
+    | This snippet works by loading jQuery via a script tag when a breakpoint is triggered.
+    pre
+        code #{devbug.code.js}
+    h2 Using the API
+    p You can post output to DevBug projects from anywhere using the DevBug API. Here's how:
+    pre
+        code #{devbug.code.api}