diff --git a/app.js b/app.js
index 1c664b0372ed844e0470654611579d86736ab30b..a97304a26bb507644dc16a26a663be3c9ac03e0c 100644
--- a/app.js
+++ b/app.js
@@ -32,7 +32,7 @@ var canvas = canvasElement.getContext("2d", { willReadFrequently: true });
 var loadingMessage = document.getElementById("loadingMessage");
 var outputContainer = document.getElementById("output");
 var outputData = document.getElementById("outputData");
-
+var debugCheckbox = document.getElementById("debug");
 const latencyDiv = document.getElementById("latency");
 const latencyScan = document.getElementById("scan");
 
@@ -412,18 +412,20 @@ let datas = {};
 recordedData = new Array(recordingButtons.length).fill({});
 
 function renderData() {
-  let html = "<table><tr><th>Data</th><th>Count</th><th>Buttons</th></tr>";
-  const keys = Object.keys(datas);
-  for (let i = 0; i < keys.length; i++) {
-    const key = keys[i];
-    const val = datas[key];
-    const evaluatedButtons = Object.keys(getButtonReadouts(key));
-    html += `<tr><td>${key}</td><td>${val.count}</td><td>${evaluatedButtons}</td></tr>`;
-  }
+  if (debugCheckbox?.checked) {
+    let html = "<table><tr><th>Data</th><th>Count</th><th>Buttons</th></tr>";
+    const keys = Object.keys(datas);
+    for (let i = 0; i < keys.length; i++) {
+      const key = keys[i];
+      const val = datas[key];
+      const evaluatedButtons = Object.keys(getButtonReadouts(key));
+      html += `<tr><td>${key}</td><td>${val.count}</td><td>${evaluatedButtons}</td></tr>`;
+    }
 
-  html += "</table>";
+    html += "</table>";
 
-  outputData.innerHTML = html;
+    outputData.innerHTML = html;
+  }
 }
 
 function drawLine(begin, end, color) {
@@ -512,14 +514,17 @@ function tick() {
     const end = window.performance.now();
     const delta = end - start;
 
-    latencyDiv.innerText = `Frame latency: ${delta}ms`;
+    if (debugCheckbox?.checked) {
+      latencyDiv.innerText = `Frame latency: ${delta}ms`;
+    }
 
     if (code?.data.length > 0) {
       // reset
       qr = getButtonReadouts(code.data);
 
-      latencyScan.innerText = `Scan latency: ${delta}ms`;
-
+      if (debugCheckbox?.checked) {
+        latencyScan.innerText = `Scan latency: ${delta}ms`;
+      }
       drawLine(
         code.location.topLeftCorner,
         code.location.topRightCorner,
@@ -557,14 +562,6 @@ function tick() {
         }
       }
 
-      // console.log(recordingButtonIsHeldArr);
-      // console.log(recordedData[0]);
-      // Log sorted recordedData[0] to the console
-      // console.log(
-      //   Object.entries(recordedData[0]).sort((a, b) => b[1].count - a[1].count),
-      // );
-
-
       if (!datas[code.data]) {
         let buttons = [];
         for (let i = 0; i < Object.keys(qr).length; i++) {
diff --git a/index.html b/index.html
index 701b0e07412b4feac94a5489db220dd36297827f..6b05681deb7153abb16f32ab6dcc9359eeea04c0 100644
--- a/index.html
+++ b/index.html
@@ -48,6 +48,11 @@
       </div>
     </div>
   </div>
+  <!-- Add debug checkbox -->
+  <div>
+    <label for="debug">Debug</label>
+    <input type="checkbox" id="debug" />
+  </div>
   <div id="output" hidden>
     <div id="latency"></div>
     <div id="scan"></div>