diff --git a/Public/css/common.css b/Public/css/common.css
index f90a3ed..bc25d91 100644
--- a/Public/css/common.css
+++ b/Public/css/common.css
@@ -85,10 +85,14 @@
   font-size: 90%;
   font-weight: 600;
 }
-
 #debugger-button:hover {
   background-color: #2222221a;
 }
+#debugger-button:disabled {
+  background-color: #e9ecef;
+  color: #6c757d;
+  cursor: not-allowed;
+}
 
 #debugger-regex {
   font-family: Consolas, Monaco, "Andale Mono", "Ubuntu Mono", monospace;
diff --git a/Public/index.html b/Public/index.html
index 3f50ea4..13110c6 100644
--- a/Public/index.html
+++ b/Public/index.html
@@ -145,7 +145,8 @@ <h1 class="h5 my-2">
               </div>
               <div class="col align-self-center">
                 <div class="text-end mt-2">
-                  <button id="debugger-button" class="px-3" data-bs-toggle="modal" data-bs-target="#debugger-modal">
+                  <button id="debugger-button" class="px-3" data-bs-toggle="modal" data-bs-target="#debugger-modal"
+                    disabled>
                     <div data-bs-toggle="tooltip" data-bs-placement="bottom" data-bs-container="#debugger-button"
                       title="Debugger" aria-label="Debugger" style="display: inline-block;">
                       <span class="fa-solid fa-stethoscope"></span>
diff --git a/Public/js/app.js b/Public/js/app.js
index 5552f27..cadd551 100644
--- a/Public/js/app.js
+++ b/Public/js/app.js
@@ -384,15 +384,23 @@ export class App {
         }
         break;
       case "match":
+        const debuggerButton = document.getElementById("debugger-button");
+
         if (response.result) {
           const matches = JSON.parse(response.result);
           this.patternTestEditor.matches = matches;
           this.updateMatchCount(matches.length, "match-count");
+
+          debuggerButton.disabled = response.result.length === "";
         } else {
           this.patternTestEditor.matches = [];
           this.updateMatchCount(0, "match-count");
+
+          debuggerButton.disabled = true;
         }
+
         this.patternTestEditor.error = response.error;
+
         break;
       case "debug":
         if (response.result) {
diff --git a/Public/js/views/dsl_view.js b/Public/js/views/dsl_view.js
index d3ff030..e90bc7a 100644
--- a/Public/js/views/dsl_view.js
+++ b/Public/js/views/dsl_view.js
@@ -32,7 +32,7 @@ export class DSLView extends EventDispatcher {
       if (!error) {
         return;
       }
-      if (typeof error === "string" && error instanceof String) {
+      if (typeof error === "string" || error instanceof String) {
         widgets.push(
           editor.addLineWidget(0, ErrorMessage.create(error), {
             coverGutter: false,
diff --git a/Public/js/views/expression_field.js b/Public/js/views/expression_field.js
index 0b7a054..f08a2a7 100644
--- a/Public/js/views/expression_field.js
+++ b/Public/js/views/expression_field.js
@@ -31,7 +31,7 @@ export class ExpressionField extends EventDispatcher {
   set error(error) {
     if (error) {
       let message = "";
-      if (typeof error === "string" && error instanceof String) {
+      if (typeof error === "string" || error instanceof String) {
         const errorMessage = Utils.htmlSafe(error);
         message = `<span class="fw-bolder text-danger">Parse Error:</span> ${errorMessage}`;
       } else {