diff --git a/package-lock.json b/package-lock.json
index fed25a98..2e95d846 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -14,7 +14,6 @@
         "ace-builds": "^1.4.13",
         "ajv": "^8.8.2",
         "classnames": "^2.3.1",
-        "debug": "^4.3.2",
         "diff-sequences": "^27.0.6",
         "immutable-json-patch": "^1.1.2",
         "jmespath": "^0.15.0",
@@ -1860,6 +1859,7 @@
       "version": "4.3.2",
       "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.2.tgz",
       "integrity": "sha512-mOp8wKcvj7XxC78zLgw/ZA+6TSgkoE2C/ienthhRD298T7UNwAg9diBpLRxC0mOezLl4B0xV7M0cCO6P/O0Xhw==",
+      "dev": true,
       "dependencies": {
         "ms": "2.1.2"
       },
@@ -4045,7 +4045,8 @@
     "node_modules/ms": {
       "version": "2.1.2",
       "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",
-      "integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w=="
+      "integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==",
+      "dev": true
     },
     "node_modules/nanoid": {
       "version": "3.1.25",
@@ -7258,6 +7259,7 @@
       "version": "4.3.2",
       "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.2.tgz",
       "integrity": "sha512-mOp8wKcvj7XxC78zLgw/ZA+6TSgkoE2C/ienthhRD298T7UNwAg9diBpLRxC0mOezLl4B0xV7M0cCO6P/O0Xhw==",
+      "dev": true,
       "requires": {
         "ms": "2.1.2"
       }
@@ -8870,7 +8872,8 @@
     "ms": {
       "version": "2.1.2",
       "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",
-      "integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w=="
+      "integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==",
+      "dev": true
     },
     "nanoid": {
       "version": "3.1.25",
diff --git a/package.json b/package.json
index 48570f1f..b20a762e 100644
--- a/package.json
+++ b/package.json
@@ -32,7 +32,6 @@
     "ace-builds": "^1.4.13",
     "ajv": "^8.8.2",
     "classnames": "^2.3.1",
-    "debug": "^4.3.2",
     "diff-sequences": "^27.0.6",
     "immutable-json-patch": "^1.1.2",
     "jmespath": "^0.15.0",
diff --git a/src/lib/components/JSONEditor.svelte b/src/lib/components/JSONEditor.svelte
index 8744f4b4..b4f1e866 100644
--- a/src/lib/components/JSONEditor.svelte
+++ b/src/lib/components/JSONEditor.svelte
@@ -2,7 +2,7 @@
 
 <script>
   import { faCode } from '@fortawesome/free-solid-svg-icons'
-  import createDebug from 'debug'
+  import { createDebug } from '../utils/debug'
   import Modal from 'svelte-simple-modal'
   import { MODE } from '../constants.js'
   import { uniqueId } from '../utils/uniqueId.js'
diff --git a/src/lib/components/controls/createAutoScrollHandler.js b/src/lib/components/controls/createAutoScrollHandler.js
index 34a3134c..2411b750 100644
--- a/src/lib/components/controls/createAutoScrollHandler.js
+++ b/src/lib/components/controls/createAutoScrollHandler.js
@@ -1,4 +1,4 @@
-import createDebug from 'debug'
+import { createDebug } from '../../utils/debug'
 import {
   AUTO_SCROLL_INTERVAL,
   AUTO_SCROLL_SPEED_FAST,
diff --git a/src/lib/components/controls/createFocusTracker.js b/src/lib/components/controls/createFocusTracker.js
index f8467c6e..1baf58d7 100644
--- a/src/lib/components/controls/createFocusTracker.js
+++ b/src/lib/components/controls/createFocusTracker.js
@@ -1,4 +1,4 @@
-import createDebug from 'debug'
+import { createDebug } from '../../utils/debug'
 
 const debug = createDebug('jsoneditor:FocusTracker')
 
diff --git a/src/lib/components/controls/navigationBar/NavigationBar.svelte b/src/lib/components/controls/navigationBar/NavigationBar.svelte
index 2371d9fb..964ffb2a 100644
--- a/src/lib/components/controls/navigationBar/NavigationBar.svelte
+++ b/src/lib/components/controls/navigationBar/NavigationBar.svelte
@@ -6,7 +6,7 @@
   import { isObject, isObjectOrArray } from '../../../utils/typeUtils'
   import { STATE_KEYS } from '../../../constants'
   import { createSelection, SELECTION_TYPE } from '../../../logic/selection'
-  import createDebug from 'debug'
+  import { createDebug } from '../../../utils/debug'
   import NavigationBarItem from '../../../components/controls/navigationBar/NavigationBarItem.svelte'
   import { caseInsensitiveNaturalCompare } from '../../../logic/sort'
 
diff --git a/src/lib/components/modals/TransformModal.svelte b/src/lib/components/modals/TransformModal.svelte
index cad9ea8b..b94edc9c 100644
--- a/src/lib/components/modals/TransformModal.svelte
+++ b/src/lib/components/modals/TransformModal.svelte
@@ -14,7 +14,7 @@
   import TransformWizard from './TransformWizard.svelte'
   import TransformModalHeader from './TransformModalHeader.svelte'
   import AbsolutePopup from './popup/AbsolutePopup.svelte'
-  import createDebug from 'debug'
+  import { createDebug } from '../../utils/debug'
 
   const debug = createDebug('jsoneditor:TransformModal')
 
diff --git a/src/lib/components/modals/TransformWizard.svelte b/src/lib/components/modals/TransformWizard.svelte
index 834938b2..f76dbd22 100644
--- a/src/lib/components/modals/TransformWizard.svelte
+++ b/src/lib/components/modals/TransformWizard.svelte
@@ -4,9 +4,9 @@
   import Select from 'svelte-select'
   import { getNestedPaths } from '../../utils/arrayUtils.js'
   import { stringifyPath } from '../../utils/pathUtils.js'
+  import { createDebug } from '../../utils/debug.js'
   import { isEmpty, isEqual } from 'lodash-es'
   import { setIn } from 'immutable-json-patch'
-  import createDebug from 'debug'
 
   const debug = createDebug('jsoneditor:TransformWizard')
 
diff --git a/src/lib/components/modals/popup/AbsolutePopup.svelte b/src/lib/components/modals/popup/AbsolutePopup.svelte
index 2820c3f0..d4b58043 100644
--- a/src/lib/components/modals/popup/AbsolutePopup.svelte
+++ b/src/lib/components/modals/popup/AbsolutePopup.svelte
@@ -1,7 +1,7 @@
 <svelte:options immutable={true} />
 
 <script>
-  import createDebug from 'debug'
+  import { createDebug } from '../../../utils/debug'
   import { setContext, tick } from 'svelte'
   import { isChildOf } from '$lib/utils/domUtils'
   import { keyComboFromEvent } from '$lib/utils/keyBindings'
diff --git a/src/lib/components/modals/repair/JSONRepairComponent.svelte b/src/lib/components/modals/repair/JSONRepairComponent.svelte
index 963e3ec9..a48b584b 100644
--- a/src/lib/components/modals/repair/JSONRepairComponent.svelte
+++ b/src/lib/components/modals/repair/JSONRepairComponent.svelte
@@ -8,7 +8,7 @@
     faTimes,
     faWrench
   } from '@fortawesome/free-solid-svg-icons'
-  import createDebug from 'debug'
+  import { createDebug } from '../../../utils/debug'
   import Message from '../../controls/Message.svelte'
   import { onDestroy, onMount } from 'svelte'
   import { activeElementIsChildOf, getWindow } from '../../../utils/domUtils.js'
diff --git a/src/lib/components/modes/codemode/CodeMode.svelte b/src/lib/components/modes/codemode/CodeMode.svelte
index 82c45bbb..5207c3a4 100644
--- a/src/lib/components/modes/codemode/CodeMode.svelte
+++ b/src/lib/components/modes/codemode/CodeMode.svelte
@@ -2,7 +2,7 @@
 
 <script>
   import { faExclamationTriangle, faWrench } from '@fortawesome/free-solid-svg-icons'
-  import createDebug from 'debug'
+  import { createDebug } from '../../../utils/debug'
   import { immutableJSONPatch, revertJSONPatch } from 'immutable-json-patch'
   import jsonrepair from 'jsonrepair'
   import { debounce, uniqueId } from 'lodash-es'
diff --git a/src/lib/components/modes/treemode/TreeMode.svelte b/src/lib/components/modes/treemode/TreeMode.svelte
index 9847d092..2e4b212b 100644
--- a/src/lib/components/modes/treemode/TreeMode.svelte
+++ b/src/lib/components/modes/treemode/TreeMode.svelte
@@ -3,7 +3,7 @@
 <script>
   import { createAutoScrollHandler } from '$lib/components/controls/createAutoScrollHandler'
   import { faCheck, faCode, faWrench } from '@fortawesome/free-solid-svg-icons'
-  import createDebug from 'debug'
+  import { createDebug } from '../../../utils/debug.js'
   import {
     compileJSONPointer,
     existsIn,
diff --git a/src/lib/components/modes/treemode/value/EditableDiv.svelte b/src/lib/components/modes/treemode/value/EditableDiv.svelte
index 7e10b4df..dba57b38 100644
--- a/src/lib/components/modes/treemode/value/EditableDiv.svelte
+++ b/src/lib/components/modes/treemode/value/EditableDiv.svelte
@@ -4,7 +4,7 @@
   import { onDestroy, onMount } from 'svelte'
   import { getPlainText, setCursorToEnd, setPlainText } from '$lib/utils/domUtils'
   import { keyComboFromEvent } from '$lib/utils/keyBindings'
-  import createDebug from 'debug'
+  import { createDebug } from '../../../../utils/debug'
   import { noop } from 'lodash-es'
 
   const debug = createDebug('jsoneditor:ValueEditor')
diff --git a/src/lib/config.js b/src/lib/config.js
index a7c333cb..2a30944c 100644
--- a/src/lib/config.js
+++ b/src/lib/config.js
@@ -6,7 +6,6 @@ export const viteOptimizeDeps = [
   'ace-builds/src-noconflict/mode-json',
   'ajv',
   'classnames',
-  'debug',
   'diff-sequences',
   'jmespath', // TODO: double check whether jmespath dep is necessary here
   'json-source-map',
diff --git a/src/lib/utils/debug.js b/src/lib/utils/debug.js
new file mode 100644
index 00000000..68b2befb
--- /dev/null
+++ b/src/lib/utils/debug.js
@@ -0,0 +1,77 @@
+/**
+ * Create a lightweight debug function to log output into the browser console.
+ *
+ * Inspired by https://github.com/visionmedia/debug (some code is copied below)
+ *
+ * Usage:
+ *
+ *     import { createDebug } from './debug.js'
+ *
+ *     const debug = createDebug('my:namespace')
+ *
+ *     debug('testing:', 2 + 2)
+ *
+ * By default, logging is only enabled when a property DEBUG is set in the
+ * in the localStorage of your browser:
+ *
+ *     localStorage['debug'] = '*'
+ *
+ * The actual value of 'debug' is not used. You can choose other conditions to
+ * enable/disable debugging if you want, for example some flag determining
+ * whether in development or production.
+ *
+ *
+ * @param {string} namespace
+ * @param {boolean} [enabled]
+ * @returns {function (...args: any) : void}
+ */
+export function createDebug(
+  namespace,
+  enabled = typeof window !== 'undefined' && window.localStorage['debug']
+) {
+  if (enabled) {
+    const color = selectColor(namespace)
+
+    return function debug(...args) {
+      console.log(`%c${namespace}`, `color:${color}`, ...args)
+    }
+  } else {
+    return noop
+  }
+}
+
+function noop() {}
+
+/**
+ * Selects a color for a debug namespace
+ *
+ * Code is copied from the following source: https://github.com/visionmedia/debug
+ *
+ * @param {string} namespace The namespace string for the debug instance to be colored
+ * @return {string} An ANSI color code for the given namespace
+ */
+function selectColor(namespace) {
+  let hash = 0
+
+  for (let i = 0; i < namespace.length; i++) {
+    hash = (hash << 5) - hash + namespace.charCodeAt(i)
+    hash |= 0 // Convert to 32bit integer
+  }
+
+  return colors[Math.abs(hash) % colors.length]
+}
+
+const colors = [
+  '#0000CC',
+  '#0099FF',
+  '#009400',
+  '#8dd200',
+  '#CCCC00',
+  '#CC9933',
+  '#ae04e7',
+  '#ff35d7',
+  '#FF3333',
+  '#FF6600',
+  '#FF9933',
+  '#FFCC33'
+]