From b2317a5db900b77644d992f2f14c97e1de31c3c5 Mon Sep 17 00:00:00 2001
From: Jos de Jong <wjosdejong@gmail.com>
Date: Tue, 13 Jun 2023 17:39:12 +0200
Subject: [PATCH] fix: #278 cannot filter debugging output

---
 src/lib/utils/debug.ts | 29 ++++++++++++++++++++---------
 1 file changed, 20 insertions(+), 9 deletions(-)

diff --git a/src/lib/utils/debug.ts b/src/lib/utils/debug.ts
index 4fe1c05f..ce073c1e 100644
--- a/src/lib/utils/debug.ts
+++ b/src/lib/utils/debug.ts
@@ -15,24 +15,35 @@
  * localStorage of your browser:
  *
  *     localStorage['debug'] = '*'
+ *     localStorage['debug'] = 'jsoneditor:*'
+ *     localStorage['debug'] = 'jsoneditor:TreeMode'
  *
- * The actual value of 'debug' is not used. You can choose other conditions to
+ * The actual value of 'debug' is used to filter the debug messages.
+ * The value can end with a '*' wild card to match any remaining text.
+ *
+ * By providing a value for `enabled`, you can choose conditions to
  * enable/disable debugging if you want, for example some flag determining
  * whether in development or production.
  */
 export function createDebug(
   namespace: string,
-  enabled = !!tryReadLocalStorage('debug')
+  enabled = enableDebug(namespace)
 ): (...args: unknown[]) => void {
-  if (enabled) {
-    const color = selectColor(namespace)
-
-    return function debug(...args) {
-      console.log(`%c${namespace}`, `color:${color}`, ...args)
-    }
-  } else {
+  if (!enabled) {
     return noop
   }
+
+  const color = selectColor(namespace)
+
+  return function debug(...args) {
+    console.log(`%c${namespace}`, `color:${color}`, ...args)
+  }
+}
+
+function enableDebug(namespace: string) {
+  const debug = tryReadLocalStorage('debug')
+
+  return debug?.endsWith('*') ? namespace.startsWith(debug.slice(0, -1)) : namespace === debug
 }
 
 function noop() {