diff --git a/nodecg-io-debug/dashboard/debug-helper.html b/nodecg-io-debug/dashboard/debug-helper.html
index fd196e717..4965ae310 100644
--- a/nodecg-io-debug/dashboard/debug-helper.html
+++ b/nodecg-io-debug/dashboard/debug-helper.html
@@ -156,7 +156,7 @@
                     require(["vs/editor/editor.main"], onMonacoReady);
 
                     function onMonacoReady() {
-                        var jsonCode = ["{", '    "data": 42,', "}"].join("\n");
+                        var jsonCode = ["{", '    "data": 42', "}"].join("\n");
 
                         var model = monaco.editor.createModel(jsonCode, "json");
 
diff --git a/nodecg-io-debug/dashboard/debug-helper.js b/nodecg-io-debug/dashboard/debug-helper.js
deleted file mode 100644
index be09559a5..000000000
--- a/nodecg-io-debug/dashboard/debug-helper.js
+++ /dev/null
@@ -1,79 +0,0 @@
-/* eslint-disable no-undef */
-
-// Buttons
-for (let i = 1; i <= 5; i++) {
-    document.querySelector(`#click_button${i}`).onclick = () => {
-        nodecg.sendMessage("onClick", i);
-    };
-}
-
-// Numbers
-for (let i = 0; i < 5; i++) {
-    const num = 10 ** i;
-    document.querySelector(`#number_button${num}`).onclick = () => {
-        nodecg.sendMessage("onNumber", num);
-    };
-}
-document.querySelector(`#number_input1_send`).onclick = () => {
-    const num = document.querySelector('#number_input1').value;
-    nodecg.sendMessage("onNumber", num);
-};
-document.querySelector(`#number_input2`).onchange = () => {
-    const num = document.querySelector('#number_input2').value;
-    nodecg.sendMessage("onNumber", num);
-};
-
-// Ranges
-for (const range of ["0to100", "0to1", "M1to1"]) {
-    document.querySelector("#range_" + range).addEventListener("change", (e) => {
-        const num = e.target.value;
-        nodecg.sendMessage(`onRange${range}`, num);
-    });
-}
-
-// Color
-document.querySelector("#color_color").addEventListener("input", (e) => {
-    const color = e.target.value;
-    nodecg.sendMessage(`onColor`, color);
-});
-
-// Dates
-for (const element of ["#date_date", "#date_datetime"]) {
-    document.querySelector(element).addEventListener("change", (e) => {
-        const date = e.target.value;
-        nodecg.sendMessage(`onDate`, date);
-    });
-}
-
-// Booleans
-document.querySelector("#bool_false").onclick = () => {
-    nodecg.sendMessage("onBool", false);
-};
-document.querySelector("#bool_true").onclick = () => {
-    nodecg.sendMessage("onBool", true);
-};
-
-// Text
-for (const element of ["oneline", "multiline"]) {
-    document.querySelector(`#text_${element}_send`).onclick = () => {
-        const value = document.querySelector(`#text_${element}`).value;
-        nodecg.sendMessage("onText", value);
-    };
-}
-
-// Lists
-document.querySelector("#list_list_send").onclick = () => {
-    const value = document.querySelector("#list_list").value;
-    nodecg.sendMessage("onList", value);
-};
-
-// JSON
-document.querySelector("#json_send").onclick = () => {
-    const jsonString = window.debugMonacoEditor.getValue();
-    try {
-        const json = JSON.parse(jsonString);
-        nodecg.sendMessage("onJSON", json);
-    } catch (e) {
-        nodecg.log.error(`Cannot send invalid json: ${e}`)
-    }
-};
\ No newline at end of file
diff --git a/nodecg-io-debug/dashboard/debug-helper.ts b/nodecg-io-debug/dashboard/debug-helper.ts
new file mode 100644
index 000000000..3b213cb1e
--- /dev/null
+++ b/nodecg-io-debug/dashboard/debug-helper.ts
@@ -0,0 +1,95 @@
+/// <reference types="nodecg/types/browser" />
+/// <reference types="monaco-editor/monaco" />
+
+// Buttons
+for (let i = 1; i <= 5; i++) {
+    setHandler(`#click_button${i}`, "onclick", () => {
+        nodecg.sendMessage("onClick", i);
+    });
+}
+
+// Numbers
+for (let i = 0; i < 5; i++) {
+    const num = 10 ** i;
+    setHandler(`#number_button${num}`, "onclick", () => {
+        nodecg.sendMessage("onNumber", num);
+    });
+}
+
+setHandler("#number_input1_send", "onclick", () => {
+    const num = document.querySelector<HTMLInputElement>("#number_input1")?.value;
+    nodecg.sendMessage("onNumber", num);
+});
+setHandler("#number_input2", "onchange", () => {
+    const num = document.querySelector<HTMLInputElement>("#number_input2")?.value;
+    nodecg.sendMessage("onNumber", num);
+});
+
+// Ranges
+for (const range of ["0to100", "0to1", "M1to1"]) {
+    const selector = "#range_" + range;
+    document.querySelector(selector)?.addEventListener("change", () => {
+        const num = document.querySelector<HTMLInputElement>(selector)?.value;
+        nodecg.sendMessage(`onRange${range}`, num);
+    });
+}
+
+// Color
+document.querySelector("#color_color")?.addEventListener("input", () => {
+    const color = document.querySelector<HTMLInputElement>("#color_color")?.value;
+    nodecg.sendMessage(`onColor`, color);
+});
+
+// Dates
+for (const element of ["#date_date", "#date_datetime"]) {
+    document.querySelector(element)?.addEventListener("change", () => {
+        const date = document.querySelector<HTMLInputElement>(element)?.value;
+        nodecg.sendMessage(`onDate`, date);
+    });
+}
+
+// Booleans
+setHandler("#bool_false", "onclick", () => {
+    nodecg.sendMessage("onBool", false);
+});
+setHandler("#bool_true", "onclick", () => {
+    nodecg.sendMessage("onBool", true);
+});
+
+// Text
+for (const element of ["oneline", "multiline"]) {
+    setHandler(`#text_${element}_send`, "onclick", () => {
+        const value = document.querySelector<HTMLInputElement>(`#text_${element}`)?.value;
+        nodecg.sendMessage("onText", value);
+    });
+}
+
+// Lists
+setHandler("#list_list_send", "onclick", () => {
+    const value = document.querySelector<HTMLTextAreaElement>("#list_list")?.value;
+    nodecg.sendMessage("onList", value);
+});
+
+// JSON
+// defined in debug-helper.html
+declare const debugMonacoEditor: monaco.editor.IStandaloneCodeEditor;
+setHandler("#json_send", "onclick", () => {
+    const jsonString = debugMonacoEditor.getValue();
+    try {
+        const json = JSON.parse(jsonString);
+        nodecg.sendMessage("onJSON", json);
+    } catch (e) {
+        nodecg.log.error(`Cannot send invalid json: ${e}`);
+    }
+});
+
+// Util functions
+function setHandler(querySelector: string, type: "onclick" | "onchange", fn: () => void): void {
+    const element = document.querySelector<HTMLElement>(querySelector);
+    if (!element) {
+        nodecg.log.error(`Cannot set handler for element with this query selector: ${querySelector}`);
+        return;
+    }
+
+    element[type] = fn;
+}
diff --git a/samples/debug/extension/index.ts b/samples/debug/extension/index.ts
index 046e95114..6a8770a71 100644
--- a/samples/debug/extension/index.ts
+++ b/samples/debug/extension/index.ts
@@ -22,6 +22,14 @@ module.exports = function (nodecg: NodeCG) {
             nodecg.log.info(`Received in 'onRange0to100' with value: ${value}`);
         });
 
+        debug.onRange0to1((value) => {
+            nodecg.log.info(`Received in 'onRange0to1' with value: ${value}`);
+        });
+
+        debug.onRangeM1to1((value) => {
+            nodecg.log.info(`Received in 'onRangeM1to1' with value: ${value}`);
+        });
+
         debug.onColor((value) => {
             nodecg.log.info(`Received in 'onColor' with [red,green,blue]: [${value.red},${value.green},${value.blue}]`);
         });