diff --git a/CHANGELOG.md b/CHANGELOG.md
index 2b450b3df..b0da67b92 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -17,6 +17,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Add shortcut to search scenes when in world mode by pressing `/`
 - Add support from adding sound effects to a project by dragging files into project window (to match how this works for other asset types)
 - Add native Mac ARM support for M1/M2/M3+ devices
+- Add script debugger pane to World view, when game is run while this is open allows inspecting currently running scripts, setting breakpoints and updating live variable values
 
 ### Changed
 
diff --git a/appData/wasm/binjgb/binjgb.wasm b/appData/wasm/binjgb/binjgb.wasm
index 81fe205a4..aa40412c5 100755
Binary files a/appData/wasm/binjgb/binjgb.wasm and b/appData/wasm/binjgb/binjgb.wasm differ
diff --git a/appData/wasm/binjgb/css/style.css b/appData/wasm/binjgb/css/style.css
index 7eb9aa659..70843a6d6 100644
--- a/appData/wasm/binjgb/css/style.css
+++ b/appData/wasm/binjgb/css/style.css
@@ -319,3 +319,49 @@ body {
     opacity: 0.5;
   }
 }
+
+#debug {
+  display:flex;
+  flex-direction:column;
+  align-items:center;
+  padding:10px;
+  position:fixed;
+  top:0px;
+  left:0px;
+  right:0px;
+  bottom:0px;
+  background:rgba(0,0,0,0.5);
+}
+
+#debug div {
+  background: white;
+  color: black;
+  border: 1px solid #ddd;
+  border-radius: 4px;
+  transform: position;
+  font-size: 11px;
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
+  display: flex;
+  align-items: center;
+}
+
+#debug span {
+  padding: 5px 8px;
+}
+
+#debug button {
+  background: transparent;
+  border: none;
+  border-left: 1px solid #ddd;
+  display: flex;
+  align-items: center;
+  height: 100%;
+}
+
+#debug button:hover {
+  background: #eee;
+}
+
+#debug button:active {
+  background: #ddd;
+}
\ No newline at end of file
diff --git a/appData/wasm/binjgb/index.html b/appData/wasm/binjgb/index.html
index 7d76babc7..1eae2f11a 100644
--- a/appData/wasm/binjgb/index.html
+++ b/appData/wasm/binjgb/index.html
@@ -31,4 +31,5 @@
     </script>
     <script src="binjgb.js"></script>
     <script src="js/script.js"></script>
+    <script src="js/debugger.js"></script>
 </body>
\ No newline at end of file
diff --git a/appData/wasm/binjgb/js/debugger.js b/appData/wasm/binjgb/js/debugger.js
new file mode 100644
index 000000000..1062f2638
--- /dev/null
+++ b/appData/wasm/binjgb/js/debugger.js
@@ -0,0 +1,551 @@
+/* global EVENT_NEW_FRAME, EVENT_AUDIO_BUFFER_FULL, EVENT_UNTIL_TICKS, vm, emulator, API */
+
+let debug;
+
+// Consts
+
+const EVENT_BREAKPOINT = 8;
+const EXECUTING_CTX_SYMBOL = "_executing_ctx";
+const FIRST_CTX_SYMBOL = "_first_ctx";
+const SCRIPT_MEMORY_SYMBOL = "_script_memory";
+const CURRENT_SCENE_SYMBOL = "_current_scene";
+const MAX_GLOBAL_VARS = "MAX_GLOBAL_VARS";
+
+// Helpers
+
+const parseDebuggerSymbol = (input) => {
+  const match = input.match(
+    /GBVM\$([^$]+)\$([^$]+)\$([^$]+)\$([^$]+)\$([^$]+)\$([^$]+)/
+  );
+  if (!match) {
+    return undefined;
+  }
+  return {
+    scriptSymbol: match[1],
+    scriptEventId: match[2].replace(/_/g, "-"),
+    sceneId: match[3].replace(/_/g, "-"),
+    entityType: match[4],
+    entityId: match[5].replace(/_/g, "-"),
+    scriptKey: match[6],
+  };
+};
+
+const parseDebuggerEndSymbol = (input) => {
+  const match = input.match(/GBVM_END\$([^$]+)\$([^$]+)/);
+  if (!match) {
+    return undefined;
+  }
+  return {
+    scriptSymbol: match[1],
+  };
+};
+
+// Debugger
+
+class Debug {
+  constructor(emulator) {
+    this.emulator = emulator;
+    this.module = emulator.module;
+    this.e = emulator.e;
+
+    this.vramCanvas = document.createElement("canvas");
+    this.vramCanvas.width = 256;
+    this.vramCanvas.height = 256;
+
+    this.memoryMap = {};
+    this.globalVariables = {};
+    this.variableMap = {};
+    this.memoryDict = new Map();
+
+    this.breakpoints = [];
+    this.pauseOnScriptChanged = false;
+    this.pauseOnWatchedVariableChanged = true;
+    this.pauseOnVMStep = false;
+    this.currentScriptSymbol = "";
+    this.scriptContexts = [];
+    this.pausedUI = null;
+    this.prevGlobals = [];
+    this.watchedVariables = [];
+
+    this.debugRunUntil = (ticks) => {
+      while (true) {
+        const event = this.module._emulator_run_until_f64(this.e, ticks);
+        if (event & EVENT_NEW_FRAME) {
+          this.emulator.rewind.pushBuffer();
+          this.emulator.video.uploadTexture();
+        }
+        if (event & EVENT_BREAKPOINT) {
+          // Breakpoint hit
+          const firstCtxAddr = this.memoryMap[FIRST_CTX_SYMBOL];
+          const executingCtxAddr = this.memoryMap[EXECUTING_CTX_SYMBOL];
+
+          const currentCtx = this.readMemInt16(executingCtxAddr);
+          let firstCtx = debug.readMemInt16(firstCtxAddr);
+          let scriptContexts = [];
+          let currentCtxData = undefined;
+          const prevCtxs = this.scriptContexts;
+
+          while (firstCtx !== 0) {
+            const ctxAddr = debug.readMemInt16(firstCtx);
+            const ctxBank = debug.readMem(firstCtx + 2);
+            const closestAddr = debug.getClosestAddress(ctxBank, ctxAddr);
+            const closestSymbol = debug.getSymbol(ctxBank, closestAddr);
+            const closestGBVMSymbol = parseDebuggerSymbol(closestSymbol);
+            const prevCtx = prevCtxs[scriptContexts.length];
+
+            const ctxData = {
+              address: ctxAddr,
+              bank: ctxBank,
+              current: currentCtx === firstCtx,
+              closestAddr,
+              closestSymbol,
+              closestGBVMSymbol,
+              prevClosestSymbol: prevCtx?.closestSymbol,
+              prevClosestGBVMSymbol: prevCtx?.closestGBVMSymbol,
+            };
+
+            scriptContexts.push(ctxData);
+            if (ctxData.current) {
+              currentCtxData = ctxData;
+            }
+
+            firstCtx = debug.readMemInt16(firstCtx + 3);
+          }
+          this.scriptContexts = scriptContexts;
+
+          if (currentCtxData) {
+            // If pausing on VM Step and current script block changed
+            if (
+              this.pauseOnVMStep &&
+              currentCtxData.closestGBVMSymbol &&
+              currentCtxData.closestGBVMSymbol.scriptEventId !== "end" &&
+              currentCtxData.closestSymbol !== currentCtxData.prevClosestSymbol
+            ) {
+              emulator.pause();
+              this.pauseOnVMStep = false;
+              break;
+            }
+            // If manual breakpoint is hit
+            if (
+              currentCtxData.closestGBVMSymbol &&
+              currentCtxData.address === currentCtxData.closestAddr &&
+              this.breakpoints.includes(
+                currentCtxData.closestGBVMSymbol.scriptEventId
+              )
+            ) {
+              this.pauseOnVMStep = true;
+              emulator.pause();
+              break;
+            }
+
+            if (
+              this.pauseOnScriptChanged &&
+              // Found matching GBVM event
+              currentCtxData.closestGBVMSymbol &&
+              // GBVM event has changed since last pause
+              (!currentCtxData.prevClosestGBVMSymbol ||
+                currentCtxData.closestGBVMSymbol.scriptSymbol !==
+                  currentCtxData.prevClosestGBVMSymbol.scriptSymbol)
+            ) {
+              this.pauseOnVMStep = true;
+              emulator.pause();
+              break;
+            }
+
+            if (this.pauseOnWatchedVariableChanged) {
+              const globals = this.getGlobals();
+              if (this.prevGlobals.length > 0) {
+                // Check if watched has change
+                const modified = !this.prevGlobals.every(
+                  (v, i) => v === globals[i]
+                );
+                if (modified) {
+                  const changedVariable = this.watchedVariables.find(
+                    (variableId) => {
+                      const variableData = this.variableMap[variableId];
+                      const symbol = variableData?.symbol;
+                      const variableIndex = this.globalVariables[symbol];
+                      if (variableIndex !== undefined) {
+                        return (
+                          this.prevGlobals[variableIndex] !== undefined &&
+                          globals[variableIndex] !==
+                            this.prevGlobals[variableIndex]
+                        );
+                      }
+                      return false;
+                    }
+                  );
+                  if (changedVariable) {
+                    this.pauseOnVMStep = true;
+                    emulator.pause();
+                  }
+                }
+              }
+              this.prevGlobals = globals;
+            }
+          }
+        }
+        if (event & EVENT_AUDIO_BUFFER_FULL && !this.emulator.isRewinding) {
+          this.emulator.audio.pushBuffer();
+        }
+        if (event & EVENT_UNTIL_TICKS) {
+          break;
+        }
+      }
+      if (this.module._emulator_was_ext_ram_updated(this.e)) {
+        vm.extRamUpdated = true;
+      }
+    };
+
+    // replace the emulator run method with the debug one
+    this.emulator.runUntil = this.debugRunUntil;
+  }
+
+  initialize(
+    memoryMap,
+    globalVariables,
+    variableMap,
+    pauseOnScriptChanged,
+    pauseOnWatchedVarChanged,
+    breakpoints,
+    watchedVariables
+  ) {
+    this.memoryMap = memoryMap;
+    this.globalVariables = globalVariables;
+    this.variableMap = variableMap;
+    this.pauseOnScriptChanged = pauseOnScriptChanged;
+    this.pauseOnWatchedVariableChanged = pauseOnWatchedVarChanged;
+    this.breakpoints = breakpoints;
+    this.watchedVariables = watchedVariables;
+
+    const memoryDict = new Map();
+    Object.keys(memoryMap).forEach((k) => {
+      // Banked resources
+      const match = k.match(/___bank_(.*)/);
+      if (match) {
+        const label = `_${match[1]}`;
+        const bank = memoryMap[k];
+        if (memoryMap[label]) {
+          const n = memoryDict.get(bank) ?? new Map();
+          const ptr = memoryMap[label] & 0x0ffff;
+          n.set(ptr, label);
+          memoryDict.set(bank, n);
+        }
+      }
+      // Script debug symbols
+      // const matchGBVM = k.match(/GBVM\$([^$]*)\$([^$]*)/);
+      const matchGBVM = parseDebuggerSymbol(k);
+      if (matchGBVM) {
+        const bankLabel = `___bank_${matchGBVM.scriptSymbol}`;
+        const label = k;
+        const bank = memoryMap[bankLabel];
+        if (memoryMap[label]) {
+          const n = memoryDict.get(bank) ?? new Map();
+          const ptr = memoryMap[label] & 0x0ffff;
+          n.set(ptr, label);
+          memoryDict.set(bank, n);
+        }
+      }
+
+      const matchEnd = parseDebuggerEndSymbol(k);
+      if (matchEnd) {
+        const bankLabel = `___bank_${matchEnd.scriptSymbol}`;
+        const label = k;
+        const bank = memoryMap[bankLabel];
+        if (memoryMap[label]) {
+          const n = memoryDict.get(bank) ?? new Map();
+          const ptr = memoryMap[label] & 0x0ffff;
+          if (!n.get(ptr)) {
+            n.set(ptr, label);
+            memoryDict.set(bank, n);
+          }
+        }
+      }
+    });
+
+    this.memoryDict = memoryDict;
+
+    // Break on VM_STEP
+    this.module._emulator_set_breakpoint(this.e, memoryMap["_VM_STEP"]);
+
+    // Add paused UI
+
+    this.initializeUI();
+    this.initializeKeyboardShortcuts();
+  }
+
+  initializeUI() {
+    const pausedUI = document.createElement("div");
+    const pausedUIContainer = document.createElement("div");
+    const pausedUILabel = document.createElement("span");
+    const pausedUIResumeBtn = document.createElement("button");
+    const pausedUIStepBtn = document.createElement("button");
+    const pausedUIStepFrameBtn = document.createElement("button");
+
+    document.body.appendChild(pausedUI);
+    pausedUI.appendChild(pausedUIContainer);
+    pausedUIContainer.appendChild(pausedUILabel);
+    pausedUIContainer.appendChild(pausedUIResumeBtn);
+    pausedUIContainer.appendChild(pausedUIStepBtn);
+    pausedUIContainer.appendChild(pausedUIStepFrameBtn);
+
+    pausedUI.id = "debug";
+    pausedUILabel.innerHTML = "Paused in debugger";
+
+    pausedUIResumeBtn.innerHTML = `<svg width="15" height="15" viewBox="0 0 24 24"><path d="M2 3H6V21H2V3Z" /><path d="M22 12L7 21L7 3L22 12Z" /></svg>`;
+    pausedUIResumeBtn.title = "Resume execution - F8";
+    pausedUIResumeBtn.addEventListener("click", this.resume.bind(this));
+
+    pausedUIStepBtn.innerHTML = `<svg width="15" height="15" viewBox="0 0 24 24"><path d="M16 8v-4l8 8-8 8v-4h-5v-8h5zm-7 0h-2v8h2v-8zm-4.014 0h-1.986v8h1.986v-8zm-3.986 0h-1v8h1v-8z" /></svg>`;
+    pausedUIStepBtn.title = "Step - F9";
+    pausedUIStepBtn.addEventListener("click", this.step.bind(this));
+
+    pausedUIStepFrameBtn.innerHTML = `<svg width="15" height="15" viewBox="0 0 24 24"><path d="M19 12l-18 12v-24l18 12zm4-11h-4v22h4v-22z" /></svg>`;
+    pausedUIStepFrameBtn.title = "Step Frame - F10";
+    pausedUIStepFrameBtn.addEventListener("click", this.stepFrame.bind(this));
+
+    this.pausedUI = pausedUI;
+  }
+
+  initializeKeyboardShortcuts() {
+    window.addEventListener("keydown", (e) => {
+      if (e.key === "F8") {
+        this.togglePlayPause();
+      } else if (e.key === "F9") {
+        this.step();
+      } else if (e.key === "F10") {
+        this.stepFrame();
+      }
+    });
+  }
+
+  getClosestAddress(bank, address) {
+    const bankScripts = this.memoryDict.get(bank);
+    const currentAddress = address;
+    let closestAddress = -1;
+    if (bankScripts) {
+      const addresses = Array.from(bankScripts.keys()).sort();
+      for (let i = 0; i < addresses.length; i++) {
+        if (addresses[i] > currentAddress) {
+          break;
+        } else {
+          closestAddress = addresses[i];
+        }
+      }
+    }
+    return closestAddress;
+  }
+
+  getSymbol(bank, address) {
+    const symbol = this.memoryDict.get(bank)?.get(address) ?? "";
+    return symbol.replace(/^_/, "");
+  }
+
+  readMem(addr) {
+    return this.module._emulator_read_mem(this.e, addr);
+  }
+
+  readMemInt16(addr) {
+    return (
+      (this.module._emulator_read_mem(this.e, addr + 1) << 8) |
+      this.module._emulator_read_mem(this.e, addr)
+    );
+  }
+
+  writeMem(addr, value) {
+    this.module._emulator_write_mem(this.e, addr, value & 0xff);
+  }
+
+  writeMemInt16(addr, value) {
+    this.module._emulator_write_mem(this.e, addr, value & 0xff);
+    this.module._emulator_write_mem(this.e, addr + 1, value >> 8);
+  }
+
+  readVariables(addr, size) {
+    const ptr = this.module._emulator_get_wram_ptr(this.e) - 0xc000;
+    return new Int16Array(
+      this.module.HEAP8.buffer.slice(ptr + addr, ptr + addr + size * 2)
+    );
+  }
+
+  renderVRam() {
+    var ctx = this.vramCanvas.getContext("2d");
+    var imgData = ctx.createImageData(256, 256);
+    var ptr = this.module._malloc(4 * 256 * 256);
+    this.module._emulator_render_vram(this.e, ptr);
+    var buffer = new Uint8Array(this.module.HEAP8.buffer, ptr, 4 * 256 * 256);
+    imgData.data.set(buffer);
+    ctx.putImageData(imgData, 0, 0);
+    this.module._free(ptr);
+    return this.vramCanvas.toDataURL("image/png");
+  }
+
+  setBreakPoints(breakpoints) {
+    this.breakpoints = breakpoints;
+  }
+
+  setWatchedVariables(watchedVariables) {
+    this.watchedVariables = watchedVariables;
+  }
+
+  pause() {
+    this.pauseOnVMStep = true;
+    this.emulator.pause();
+  }
+
+  resume() {
+    this.pauseOnVMStep = false;
+    this.emulator.resume();
+  }
+
+  togglePlayPause() {
+    if (this.isPaused()) {
+      this.resume();
+    } else {
+      this.pause();
+    }
+  }
+
+  step() {
+    if (this.isPaused()) {
+      this.resume();
+      this.pauseOnVMStep = true;
+    }
+  }
+
+  stepFrame() {
+    if (this.isPaused()) {
+      const ticks = this.module._emulator_get_ticks_f64(this.e) + 70224;
+      this.emulator.runUntil(ticks);
+      this.emulator.video.renderTexture();
+    }
+  }
+
+  isPaused() {
+    return this.emulator.isPaused || this.pauseOnVMStep;
+  }
+
+  getGlobals() {
+    const variablesStartAddr = this.memoryMap[SCRIPT_MEMORY_SYMBOL];
+    const variablesLength = this.globalVariables[MAX_GLOBAL_VARS];
+    return this.readVariables(variablesStartAddr, variablesLength);
+  }
+
+  setGlobal(symbol, value) {
+    const offset = (this.globalVariables[symbol] ?? 0) * 2;
+    const variablesStartAddr = this.memoryMap[SCRIPT_MEMORY_SYMBOL];
+    this.writeMemInt16(variablesStartAddr + offset, value);
+    this.prevGlobals = this.getGlobals();
+  }
+
+  getCurrentSceneSymbol() {
+    const currentSceneAddr = this.memoryMap[CURRENT_SCENE_SYMBOL];
+    return this.getSymbol(
+      this.readMem(currentSceneAddr),
+      this.readMemInt16(currentSceneAddr + 1)
+    );
+  }
+
+  getNumScriptCtxs() {
+    const firstCtxAddr = this.memoryMap[FIRST_CTX_SYMBOL];
+    let firstCtx = debug.readMemInt16(firstCtxAddr);
+    let numCtxs = 0;
+    while (firstCtx !== 0) {
+      numCtxs++;
+      firstCtx = debug.readMemInt16(firstCtx + 3);
+    }
+    return numCtxs;
+  }
+}
+
+// Debugger Initialisation
+
+let ready = setInterval(() => {
+  const debugEnabled = window.location.href.includes("debug=true");
+  if (!debugEnabled) {
+    // Debugging not enabled
+    clearInterval(ready);
+    return;
+  }
+
+  console.log("Waiting for emulator...", emulator);
+  if (emulator !== null) {
+    debug = new Debug(emulator);
+    clearInterval(ready);
+
+    API.debugger.sendToProjectWindow({
+      action: "initialized",
+    });
+
+    API.events.debugger.data.subscribe((_, packet) => {
+      const { action, data } = packet;
+
+      switch (action) {
+        case "listener-ready":
+          debug.initialize(
+            data.memoryMap,
+            data.globalVariables,
+            data.variableMap,
+            data.pauseOnScriptChanged,
+            data.pauseOnWatchedVariableChanged,
+            data.breakpoints,
+            data.watchedVariables
+          );
+
+          setInterval(() => {
+            if (debug.pausedUI) {
+              debug.pausedUI.style.visibility = debug.isPaused()
+                ? "visible"
+                : "hidden";
+            }
+
+            const scriptContexts =
+              debug.getNumScriptCtxs() > 0 ? debug.scriptContexts : [];
+
+            if (scriptContexts.length === 0) {
+              debug.pauseOnVMStep = false;
+            }
+
+            API.debugger.sendToProjectWindow({
+              action: "update-globals",
+              data: debug.getGlobals(),
+              vram: debug.renderVRam(),
+              isPaused: debug.isPaused(),
+              scriptContexts,
+              currentSceneSymbol: debug.getCurrentSceneSymbol(),
+            });
+          }, 100);
+          break;
+        case "set-breakpoints":
+          debug.setBreakPoints(data);
+          break;
+        case "pause":
+          debug.pause();
+          break;
+        case "resume":
+          debug.resume();
+          break;
+        case "step":
+          debug.step();
+          break;
+        case "step-frame":
+          debug.stepFrame();
+          break;
+        case "pause-on-script":
+          debug.pauseOnScriptChanged = data;
+          break;
+        case "pause-on-var":
+          debug.pauseOnWatchedVariableChanged = data;
+          break;
+        case "set-global":
+          debug.setGlobal(data.symbol, data.value);
+          break;
+        case "set-watched":
+          debug.setWatchedVariables(data);
+          break;
+        default:
+        // console.warn(event);
+      }
+    });
+  }
+}, 200);
diff --git a/appData/wasm/binjgb/js/script.js b/appData/wasm/binjgb/js/script.js
index 22c4e8a06..2c69ad02f 100644
--- a/appData/wasm/binjgb/js/script.js
+++ b/appData/wasm/binjgb/js/script.js
@@ -113,7 +113,7 @@ class VM {
     let oldPaused = this.paused_;
     this.paused_ = newPaused;
     if (!emulator) return;
-    if (newPaused == oldPaused) return;
+    if (newPaused === oldPaused) return;
     if (newPaused) {
       emulator.pause();
       this.ticks = emulator.ticks;
diff --git a/forge.config.js b/forge.config.js
index 2a3fcbb31..38d3bc957 100644
--- a/forge.config.js
+++ b/forge.config.js
@@ -114,6 +114,12 @@ module.exports = async () => {
                   "vendor-lodash",
                 ],
               },
+              {
+                name: "game_window",
+                preload: {
+                  js: "./src/app/game/preload.ts",
+                },
+              },
             ],
           },
         },
diff --git a/src/app/game/preload.ts b/src/app/game/preload.ts
new file mode 100644
index 000000000..089bbd9bd
--- /dev/null
+++ b/src/app/game/preload.ts
@@ -0,0 +1,6 @@
+import { contextBridge } from "electron";
+import APISetup from "renderer/lib/api/setup";
+
+contextBridge.exposeInMainWorld("API", APISetup);
+
+export default contextBridge;
diff --git a/src/app/project/initProject.ts b/src/app/project/initProject.ts
index 8f6f6deb3..ca21e90a5 100644
--- a/src/app/project/initProject.ts
+++ b/src/app/project/initProject.ts
@@ -12,6 +12,7 @@ import engineActions from "store/features/engine/engineActions";
 import scriptEventDefsActions from "store/features/scriptEventDefs/scriptEventDefsActions";
 import errorActions from "store/features/error/errorActions";
 import consoleActions from "store/features/console/consoleActions";
+import debuggerActions from "store/features/debugger/debuggerActions";
 import { clampSidebarWidth } from "renderer/lib/window/sidebar";
 import { initKeyBindings } from "renderer/lib/keybindings/keyBindings";
 import { TRACKER_REDO, TRACKER_UNDO } from "consts";
@@ -287,8 +288,14 @@ API.events.menu.zoom.subscribe((_, zoomType) => {
   }
 });
 
-API.events.menu.run.subscribe(() => {
-  store.dispatch(buildGameActions.buildGame());
+API.events.menu.run.subscribe((_, debugEnabled) => {
+  store.dispatch(
+    buildGameActions.buildGame({
+      buildType: "web",
+      exportBuild: false,
+      debugEnabled,
+    })
+  );
 });
 
 API.events.menu.build.subscribe((_, buildType) => {
@@ -333,3 +340,41 @@ API.events.settings.settingChanged.subscribe((_, key, value) => {
     })
   );
 });
+
+// Debugger
+
+API.events.debugger.data.subscribe((_, packet) => {
+  switch (packet.action) {
+    case "initialized": {
+      break;
+    }
+    case "update-globals": {
+      store.dispatch(
+        debuggerActions.setRAMData({
+          vramPreview: packet.vram,
+          variablesData: packet.data,
+          scriptContexts: packet.scriptContexts,
+          currentSceneSymbol: packet.currentSceneSymbol,
+          isPaused: packet.isPaused,
+        })
+      );
+      break;
+    }
+  }
+});
+
+API.events.debugger.symbols.subscribe(
+  (_, { variableMap, sceneMap, gbvmScripts }) => {
+    store.dispatch(
+      debuggerActions.setSymbols({
+        variableDataBySymbol: variableMap,
+        sceneMap,
+        gbvmScripts,
+      })
+    );
+  }
+);
+
+API.events.debugger.disconnected.subscribe(() => {
+  store.dispatch(debuggerActions.disconnect());
+});
diff --git a/src/components/debugger/DebuggerActorLink.tsx b/src/components/debugger/DebuggerActorLink.tsx
new file mode 100644
index 000000000..cbcf15fe4
--- /dev/null
+++ b/src/components/debugger/DebuggerActorLink.tsx
@@ -0,0 +1,40 @@
+import React, { useCallback } from "react";
+import { actorSelectors } from "store/features/entities/entitiesState";
+import editorActions from "store/features/editor/editorActions";
+import { useAppDispatch, useAppSelector } from "store/hooks";
+import { actorName } from "shared/lib/entities/entitiesHelpers";
+import { LinkButton } from "ui/debugger/LinkButton";
+
+interface DebuggerActorLinkProps {
+  id: string;
+  sceneId: string;
+}
+
+const DebuggerActorLink = ({ id, sceneId }: DebuggerActorLinkProps) => {
+  const dispatch = useAppDispatch();
+  const actor = useAppSelector((state) => actorSelectors.selectById(state, id));
+  const actorIndex = useAppSelector((state) =>
+    actorSelectors.selectIds(state).indexOf(id)
+  );
+
+  const onSelect = useCallback(() => {
+    dispatch(
+      editorActions.selectActor({
+        sceneId,
+        actorId: id,
+      })
+    );
+    dispatch(editorActions.editSearchTerm(""));
+    dispatch(editorActions.editSearchTerm(sceneId));
+  }, [dispatch, id, sceneId]);
+
+  if (!actor) {
+    return null;
+  }
+
+  return (
+    <LinkButton onClick={onSelect}>{actorName(actor, actorIndex)}</LinkButton>
+  );
+};
+
+export default DebuggerActorLink;
diff --git a/src/components/debugger/DebuggerBreakpointItem.tsx b/src/components/debugger/DebuggerBreakpointItem.tsx
new file mode 100644
index 000000000..6771d32b3
--- /dev/null
+++ b/src/components/debugger/DebuggerBreakpointItem.tsx
@@ -0,0 +1,103 @@
+import React, { useCallback, useRef } from "react";
+import { useAppDispatch, useAppSelector } from "store/hooks";
+import l10n, { L10NKey } from "shared/lib/lang/l10n";
+import { scriptEventSelectors } from "store/features/entities/entitiesState";
+import { selectScriptEventDefs } from "store/features/scriptEventDefs/scriptEventDefsState";
+import settingsActions from "store/features/settings/settingsActions";
+import { BreakpointData } from "store/features/settings/settingsState";
+import DebuggerScriptCtxBreadcrumb from "components/debugger/DebuggerScriptCtxBreadcrumb";
+import styled from "styled-components";
+import { Button } from "ui/buttons/Button";
+import { BreakpointIcon, CloseIcon } from "ui/icons/Icons";
+import useHover from "ui/hooks/use-hover";
+
+interface DebuggerBreakpointItemProps {
+  breakpoint: BreakpointData;
+}
+
+const Wrapper = styled.div`
+  display: flex;
+  padding: 5px 10px;
+  padding-left: 7px;
+
+  font-size: 11px;
+  border-bottom: 1px solid ${(props) => props.theme.colors.sidebar.border};
+  background: ${(props) => props.theme.colors.scripting.form.background};
+  display: flex;
+  align-items: center;
+
+  ${Button} {
+    margin-right: 3px;
+    svg {
+      width: 15px;
+      height: 15px;
+      min-width: 15px;
+      min-height: 15px;
+      opacity: 0.3;
+    }
+  }
+
+  :hover ${Button} {
+    svg {
+      opacity: 1;
+      width: 10px;
+      height: 10px;
+      min-width: 10px;
+      min-height: 10px;
+    }
+  }
+`;
+
+const BreakpointLabel = styled.div`
+  display: flex;
+  flex-direction: column;
+  flex-grow: 1;
+`;
+
+const BreakpointName = styled.div`
+  font-weight: bold;
+`;
+
+const BreakpointPath = styled.div``;
+
+const DebuggerBreakpointItem = ({
+  breakpoint,
+}: DebuggerBreakpointItemProps) => {
+  const dispatch = useAppDispatch();
+  const ref = useRef<HTMLDivElement>(null);
+  const isHovered = useHover(ref);
+  const scriptEventId = breakpoint.scriptEventId;
+
+  const scriptEvent = useAppSelector((state) =>
+    scriptEventSelectors.selectById(state, scriptEventId)
+  );
+  const scriptEventDefs = useAppSelector((state) =>
+    selectScriptEventDefs(state)
+  );
+  const command = scriptEvent?.command ?? "";
+  const localisedCommand = l10n(command as L10NKey);
+  const eventName =
+    localisedCommand !== command
+      ? localisedCommand
+      : (scriptEventDefs[command] && scriptEventDefs[command]?.name) || command;
+
+  const onToggle = useCallback(() => {
+    dispatch(settingsActions.toggleBreakpoint(breakpoint));
+  }, [breakpoint, dispatch]);
+
+  return (
+    <Wrapper ref={ref}>
+      <Button variant="transparent" size="small" onClick={onToggle}>
+        {isHovered ? <CloseIcon /> : <BreakpointIcon />}
+      </Button>
+      <BreakpointLabel>
+        <BreakpointName>{eventName}</BreakpointName>
+        <BreakpointPath>
+          <DebuggerScriptCtxBreadcrumb context={breakpoint.context} />
+        </BreakpointPath>
+      </BreakpointLabel>
+    </Wrapper>
+  );
+};
+
+export default DebuggerBreakpointItem;
diff --git a/src/components/debugger/DebuggerBreakpointsPane.tsx b/src/components/debugger/DebuggerBreakpointsPane.tsx
new file mode 100644
index 000000000..36b3bfeb2
--- /dev/null
+++ b/src/components/debugger/DebuggerBreakpointsPane.tsx
@@ -0,0 +1,102 @@
+import React, { useCallback, useEffect } from "react";
+import { getSettings } from "store/features/settings/settingsState";
+import settingsActions from "store/features/settings/settingsActions";
+import { useAppDispatch, useAppSelector } from "store/hooks";
+import styled from "styled-components";
+import { SplitPaneHeader } from "ui/splitpane/SplitPaneHeader";
+import { CheckboxField } from "ui/form/CheckboxField";
+import l10n from "shared/lib/lang/l10n";
+import API from "renderer/lib/api";
+import DebuggerBreakpointItem from "components/debugger/DebuggerBreakpointItem";
+
+const Content = styled.div`
+  background: ${(props) => props.theme.colors.scripting.form.background};
+  padding: 10px;
+
+  & > div ~ div {
+    margin-top: 5px;
+  }
+`;
+
+const BreakpointsWrapper = styled.div`
+  border-top: 1px solid ${(props) => props.theme.colors.sidebar.border};
+`;
+
+const DebuggerBreakpointsPane = () => {
+  const dispatch = useAppDispatch();
+  const isCollapsed = useAppSelector((state) =>
+    getSettings(state).debuggerCollapsedPanes.includes("breakpoints")
+  );
+  const pauseOnScriptChanged = useAppSelector(
+    (state) => getSettings(state).debuggerPauseOnScriptChanged
+  );
+  const pauseOnWatchedVariableChanged = useAppSelector(
+    (state) => getSettings(state).debuggerPauseOnWatchedVariableChanged
+  );
+  const breakpoints = useAppSelector(
+    (state) => getSettings(state).debuggerBreakpoints
+  );
+
+  const onToggleCollapsed = useCallback(() => {
+    dispatch(settingsActions.toggleDebuggerPaneCollapsed("breakpoints"));
+  }, [dispatch]);
+
+  const onTogglePauseOnScriptChange = useCallback(() => {
+    API.debugger.setPauseOnScriptChanged(!pauseOnScriptChanged);
+    dispatch(
+      settingsActions.editSettings({
+        debuggerPauseOnScriptChanged: !pauseOnScriptChanged,
+      })
+    );
+  }, [dispatch, pauseOnScriptChanged]);
+
+  const onTogglePauseOnWatchedVariableChange = useCallback(() => {
+    API.debugger.setPauseOnWatchVariableChanged(!pauseOnWatchedVariableChanged);
+    dispatch(
+      settingsActions.editSettings({
+        debuggerPauseOnWatchedVariableChanged: !pauseOnWatchedVariableChanged,
+      })
+    );
+  }, [dispatch, pauseOnWatchedVariableChanged]);
+
+  useEffect(() => {
+    API.debugger.setBreakpoints(breakpoints.map((b) => b.scriptEventId));
+  }, [breakpoints]);
+
+  return (
+    <>
+      <SplitPaneHeader
+        onToggle={onToggleCollapsed}
+        collapsed={isCollapsed}
+        variant="secondary"
+      >
+        Breakpoints
+      </SplitPaneHeader>
+      {!isCollapsed && (
+        <Content>
+          <CheckboxField
+            name="pauseOnScriptChanged"
+            label={l10n("FIELD_PAUSE_ON_SCRIPT_CHANGE")}
+            checked={pauseOnScriptChanged}
+            onChange={onTogglePauseOnScriptChange}
+          />
+          <CheckboxField
+            name="pauseOnWatchedVariableChanged"
+            label={l10n("FIELD_PAUSE_ON_WATCHED_VAR_CHANGE")}
+            checked={pauseOnWatchedVariableChanged}
+            onChange={onTogglePauseOnWatchedVariableChange}
+          />
+        </Content>
+      )}
+      {!isCollapsed && (
+        <BreakpointsWrapper>
+          {breakpoints.map((breakpoint) => (
+            <DebuggerBreakpointItem breakpoint={breakpoint} />
+          ))}
+        </BreakpointsWrapper>
+      )}
+    </>
+  );
+};
+
+export default DebuggerBreakpointsPane;
diff --git a/src/components/debugger/DebuggerControls.tsx b/src/components/debugger/DebuggerControls.tsx
new file mode 100644
index 000000000..b82afaffb
--- /dev/null
+++ b/src/components/debugger/DebuggerControls.tsx
@@ -0,0 +1,87 @@
+import React, { useCallback, useEffect } from "react";
+import API from "renderer/lib/api";
+import l10n from "shared/lib/lang/l10n";
+import { useAppSelector } from "store/hooks";
+import { Button } from "ui/buttons/Button";
+import { PlayStartIcon, PauseIcon, NextIcon, StepIcon } from "ui/icons/Icons";
+import { FixedSpacer } from "ui/spacing/Spacing";
+
+const DebuggerControls = () => {
+  const initialized = useAppSelector((state) => state.debug.initialized);
+  const isPaused = useAppSelector((state) => state.debug.isPaused);
+
+  const onPlayPause = useCallback(() => {
+    if (isPaused) {
+      API.debugger.resume();
+    } else {
+      API.debugger.pause();
+    }
+  }, [isPaused]);
+
+  const onStep = useCallback(() => {
+    API.debugger.step();
+  }, []);
+
+  const onStepFrame = useCallback(() => {
+    API.debugger.stepFrame();
+  }, []);
+
+  const onKeyDown = useCallback(
+    (e: KeyboardEvent) => {
+      if (e.key === "F8") {
+        onPlayPause();
+      } else if (e.key === "F9") {
+        onStep();
+      } else if (e.key === "F10") {
+        onStepFrame();
+      }
+    },
+    [onPlayPause, onStep, onStepFrame]
+  );
+
+  useEffect(() => {
+    window.addEventListener("keydown", onKeyDown);
+    return () => {
+      window.removeEventListener("keydown", onKeyDown);
+    };
+  }, [onKeyDown]);
+
+  if (!initialized) {
+    return null;
+  }
+
+  return (
+    <>
+      <Button
+        size="small"
+        variant="transparent"
+        onClick={onPlayPause}
+        title={isPaused ? l10n("FIELD_RESUME") : l10n("FIELD_PAUSE")}
+      >
+        {isPaused ? <PlayStartIcon /> : <PauseIcon />}
+      </Button>
+      <FixedSpacer width={5} />
+
+      <Button
+        size="small"
+        variant="transparent"
+        disabled={!isPaused}
+        onClick={isPaused ? onStep : undefined}
+        title={l10n("FIELD_STEP")}
+      >
+        <StepIcon />
+      </Button>
+      <Button
+        size="small"
+        variant="transparent"
+        disabled={!isPaused}
+        onClick={isPaused ? onStepFrame : undefined}
+        title={l10n("FIELD_STEP_FRAME")}
+      >
+        <NextIcon />
+      </Button>
+    </>
+  );
+};
+
+export default DebuggerControls;
diff --git a/src/components/debugger/DebuggerCustomEventLink.tsx b/src/components/debugger/DebuggerCustomEventLink.tsx
new file mode 100644
index 000000000..77ba264d4
--- /dev/null
+++ b/src/components/debugger/DebuggerCustomEventLink.tsx
@@ -0,0 +1,36 @@
+import React, { useCallback } from "react";
+import { customEventSelectors } from "store/features/entities/entitiesState";
+import editorActions from "store/features/editor/editorActions";
+import { useAppDispatch, useAppSelector } from "store/hooks";
+import { customEventName } from "shared/lib/entities/entitiesHelpers";
+import { LinkButton } from "ui/debugger/LinkButton";
+
+interface DebuggerCustomEventLinkProps {
+  id: string;
+}
+
+const DebuggerCustomEventLink = ({ id }: DebuggerCustomEventLinkProps) => {
+  const dispatch = useAppDispatch();
+  const customEvent = useAppSelector((state) =>
+    customEventSelectors.selectById(state, id)
+  );
+  const customEventIndex = useAppSelector((state) =>
+    customEventSelectors.selectIds(state).indexOf(id)
+  );
+
+  const onSelect = useCallback(() => {
+    dispatch(editorActions.selectCustomEvent({ customEventId: id }));
+  }, [dispatch, id]);
+
+  if (!customEvent) {
+    return null;
+  }
+
+  return (
+    <LinkButton onClick={onSelect}>
+      {customEventName(customEvent, customEventIndex)}
+    </LinkButton>
+  );
+};
+
+export default DebuggerCustomEventLink;
diff --git a/src/components/debugger/DebuggerPanes.tsx b/src/components/debugger/DebuggerPanes.tsx
new file mode 100644
index 000000000..cdd6121d4
--- /dev/null
+++ b/src/components/debugger/DebuggerPanes.tsx
@@ -0,0 +1,127 @@
+import React, { useCallback } from "react";
+import { useAppDispatch, useAppSelector } from "store/hooks";
+import styled from "styled-components";
+import useResizeObserver from "ui/hooks/use-resize-observer";
+import DebuggerScriptPane from "components/debugger/DebuggerScriptPane";
+import DebuggerVariablesPane from "components/debugger/DebuggerVariablesPane";
+import DebuggerVRAMPane from "components/debugger/DebuggerVRAMPane";
+import DebuggerState from "components/debugger/DebuggerState";
+import DebuggerBreakpointsPane from "components/debugger/DebuggerBreakpointsPane";
+import DebuggerPausedPane from "components/debugger/DebuggerPausedPane";
+import buildGameActions from "store/features/buildGame/buildGameActions";
+import { Button } from "ui/buttons/Button";
+import l10n from "shared/lib/lang/l10n";
+
+const COL1_WIDTH = 290;
+const COL2_WIDTH = 350;
+
+const Wrapper = styled.div`
+  display: flex;
+  flex-direction: row;
+  width: 100%;
+  height: 100%;
+  background: ${(props) => props.theme.colors.scripting.form.background};
+
+  img {
+    image-rendering: pixelated;
+  }
+`;
+
+const Column = styled.div`
+  display: flex;
+  flex-direction: column;
+  flex-grow: 1;
+  box-sizing: border-box;
+  overflow-y: auto;
+  border-right: 1px solid ${(props) => props.theme.colors.sidebar.border};
+  font-size: 11px;
+
+  &:last-of-type {
+    border-right: 0;
+  }
+`;
+
+const NotInitializedWrapper = styled.div`
+  font-size: 11px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 100%;
+  min-height: 100px;
+  button {
+    margin-top: 10px;
+  }
+`;
+
+const DebuggerPanes = () => {
+  const dispatch = useAppDispatch();
+  const [wrapperEl, wrapperSize] = useResizeObserver<HTMLDivElement>();
+
+  const initialized = useAppSelector((state) => state.debug.initialized);
+  const buildStatus = useAppSelector((state) => state.console.status);
+  const running = buildStatus === "running";
+
+  const onRun = useCallback(() => {
+    dispatch(
+      buildGameActions.buildGame({
+        buildType: "web",
+        exportBuild: false,
+        debugEnabled: true,
+      })
+    );
+  }, [dispatch]);
+
+  const numColumns = !wrapperSize.width
+    ? 0
+    : wrapperSize.width > 960
+    ? 3
+    : wrapperSize.width > 560
+    ? 2
+    : 1;
+
+  return (
+    <Wrapper ref={wrapperEl}>
+      {!initialized && (
+        <NotInitializedWrapper>
+          {l10n("FIELD_DEBUGGER_NOT_CONNECTED")}
+          <Button onClick={onRun} disabled={running}>
+            {running ? l10n("FIELD_BUILDING") : l10n("FIELD_START_DEBUGGER")}
+          </Button>
+        </NotInitializedWrapper>
+      )}
+      {initialized && numColumns > 0 && (
+        <>
+          <Column style={numColumns > 1 ? { maxWidth: COL1_WIDTH } : undefined}>
+            <DebuggerPausedPane />
+            <DebuggerVRAMPane />
+            <DebuggerState />
+            <DebuggerBreakpointsPane />
+            {numColumns < 3 && <DebuggerVariablesPane collapsible={true} />}
+            {numColumns < 2 && <DebuggerScriptPane collapsible={true} />}
+          </Column>
+          {numColumns > 2 && (
+            <Column style={{ maxWidth: COL2_WIDTH }}>
+              <DebuggerVariablesPane />
+            </Column>
+          )}
+          {numColumns > 1 && (
+            <Column
+              style={{
+                maxWidth:
+                  numColumns === 3
+                    ? `calc(100% - ${COL1_WIDTH}px - ${COL2_WIDTH}px)`
+                    : `calc(100% - ${COL1_WIDTH}px)`,
+              }}
+            >
+              <DebuggerScriptPane />
+            </Column>
+          )}
+        </>
+      )}
+    </Wrapper>
+  );
+};
+
+export default DebuggerPanes;
diff --git a/src/components/debugger/DebuggerPausedPane.tsx b/src/components/debugger/DebuggerPausedPane.tsx
new file mode 100644
index 000000000..6f3539e15
--- /dev/null
+++ b/src/components/debugger/DebuggerPausedPane.tsx
@@ -0,0 +1,39 @@
+import React from "react";
+import l10n from "shared/lib/lang/l10n";
+import { useAppSelector } from "store/hooks";
+import styled from "styled-components";
+import { InfoIcon } from "ui/icons/Icons";
+
+const PausedMessage = styled.div`
+  display: flex;
+  flex-shrink: 0;
+  padding: 0 5px;
+  height: 31px;
+  box-sizing: border-box;
+  align-items: center;
+  font-weight: bold;
+  background: ${(props) => props.theme.colors.highlight};
+  color: ${(props) => props.theme.colors.highlightText};
+
+  svg {
+    width: 15px;
+    margin-right: 3px;
+    fill: ${(props) => props.theme.colors.highlightText};
+  }
+`;
+
+const DebuggerPausedPane = () => {
+  const isPaused = useAppSelector((state) => state.debug.isPaused);
+
+  if (!isPaused) {
+    return null;
+  }
+
+  return (
+    <PausedMessage>
+      <InfoIcon /> {l10n("FIELD_DEBUGGER_PAUSED")}
+    </PausedMessage>
+  );
+};
+
+export default DebuggerPausedPane;
diff --git a/src/components/debugger/DebuggerSceneLink.tsx b/src/components/debugger/DebuggerSceneLink.tsx
new file mode 100644
index 000000000..7cfc35f93
--- /dev/null
+++ b/src/components/debugger/DebuggerSceneLink.tsx
@@ -0,0 +1,34 @@
+import React, { useCallback } from "react";
+import { sceneSelectors } from "store/features/entities/entitiesState";
+import editorActions from "store/features/editor/editorActions";
+import { useAppDispatch, useAppSelector } from "store/hooks";
+import { sceneName } from "shared/lib/entities/entitiesHelpers";
+import { LinkButton } from "ui/debugger/LinkButton";
+
+interface DebuggerSceneLinkProps {
+  id: string;
+}
+
+const DebuggerSceneLink = ({ id }: DebuggerSceneLinkProps) => {
+  const dispatch = useAppDispatch();
+  const scene = useAppSelector((state) => sceneSelectors.selectById(state, id));
+  const sceneIndex = useAppSelector((state) =>
+    sceneSelectors.selectIds(state).indexOf(id)
+  );
+
+  const onSelect = useCallback(() => {
+    dispatch(editorActions.selectScene({ sceneId: id }));
+    dispatch(editorActions.editSearchTerm(""));
+    dispatch(editorActions.editSearchTerm(id));
+  }, [dispatch, id]);
+
+  if (!scene) {
+    return null;
+  }
+
+  return (
+    <LinkButton onClick={onSelect}>{sceneName(scene, sceneIndex)}</LinkButton>
+  );
+};
+
+export default DebuggerSceneLink;
diff --git a/src/components/debugger/DebuggerScriptCtxBreadcrumb.tsx b/src/components/debugger/DebuggerScriptCtxBreadcrumb.tsx
new file mode 100644
index 000000000..6c51ba77c
--- /dev/null
+++ b/src/components/debugger/DebuggerScriptCtxBreadcrumb.tsx
@@ -0,0 +1,53 @@
+import React from "react";
+import DebuggerActorLink from "components/debugger/DebuggerActorLink";
+import DebuggerCustomEventLink from "components/debugger/DebuggerCustomEventLink";
+import DebuggerSceneLink from "components/debugger/DebuggerSceneLink";
+import DebuggerTriggerLink from "components/debugger/DebuggerTriggerLink";
+import type { ScriptEditorCtx } from "shared/lib/scripts/context";
+import styled from "styled-components";
+
+interface DebuggerScriptCtxBreadcrumbProps {
+  context: ScriptEditorCtx;
+}
+
+const Separator = styled.span`
+  margin: 0 5px;
+  opacity: 0.5;
+`;
+
+const DebuggerScriptCtxBreadcrumb = ({
+  context,
+}: DebuggerScriptCtxBreadcrumbProps) => {
+  const { sceneId, entityType, entityId, scriptKey } = context;
+  return (
+    <>
+      {sceneId && entityType !== "customEvent" && (
+        <>
+          <DebuggerSceneLink id={sceneId} />
+          <Separator>/</Separator>
+        </>
+      )}
+      {entityType === "actor" && (
+        <>
+          <DebuggerActorLink id={entityId} sceneId={sceneId} />
+          <Separator>/</Separator>
+        </>
+      )}
+      {entityType === "trigger" && (
+        <>
+          <DebuggerTriggerLink id={entityId} sceneId={sceneId} />
+          <Separator>/</Separator>
+        </>
+      )}
+      {entityType === "customEvent" && (
+        <>
+          <DebuggerCustomEventLink id={entityId} />
+          <Separator>/</Separator>
+        </>
+      )}
+      {scriptKey}
+    </>
+  );
+};
+
+export default DebuggerScriptCtxBreadcrumb;
diff --git a/src/components/debugger/DebuggerScriptPane.tsx b/src/components/debugger/DebuggerScriptPane.tsx
new file mode 100644
index 000000000..e403a2b51
--- /dev/null
+++ b/src/components/debugger/DebuggerScriptPane.tsx
@@ -0,0 +1,334 @@
+import ScriptEditor from "components/script/ScriptEditor";
+import React, { useCallback, useEffect, useMemo, useState } from "react";
+import l10n from "shared/lib/lang/l10n";
+import { getSettings } from "store/features/settings/settingsState";
+import settingsActions from "store/features/settings/settingsActions";
+import { useAppDispatch, useAppSelector } from "store/hooks";
+import styled, { css } from "styled-components";
+import { Button } from "ui/buttons/Button";
+import { CodeEditor } from "ui/form/CodeEditor";
+import { ScriptEditorCtx } from "shared/lib/scripts/context";
+import { ScriptEditorContext } from "components/script/ScriptEditorContext";
+import {
+  actorSelectors,
+  customEventSelectors,
+  sceneSelectors,
+  triggerSelectors,
+} from "store/features/entities/entitiesState";
+import {
+  ActorScriptKey,
+  SceneScriptKey,
+  TriggerScriptKey,
+} from "shared/lib/entities/entitiesTypes";
+import { SplitPaneHeader } from "ui/splitpane/SplitPaneHeader";
+import { TabBar } from "ui/tabs/Tabs";
+import API from "renderer/lib/api";
+import DebuggerScriptCtxBreadcrumb from "components/debugger/DebuggerScriptCtxBreadcrumb";
+
+interface DebuggerScriptPaneProps {
+  collapsible?: boolean;
+}
+
+interface TabWrapperProps {
+  collapsible?: boolean;
+}
+
+const TabWrapper = styled.div<TabWrapperProps>`
+  height: 32px;
+  border-left: 1px solid ${(props) => props.theme.colors.input.border};
+  overflow: hidden;
+  button {
+    height: 31px;
+    border-bottom: 0;
+    outline: 0;
+  }
+`;
+
+const PlayPauseMessage = styled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 100%;
+  min-height: 100px;
+  button {
+    margin-top: 10px;
+  }
+`;
+
+const Content = styled.div`
+  display: flex;
+  flex-direction: column;
+  flex-grow: 1;
+  max-height: calc(100% - 31px);
+`;
+
+const ScriptPath = styled.div`
+  padding: 5px 10px;
+  color: ${(props) => props.theme.colors.input.text};
+  background: ${(props) => props.theme.colors.input.background};
+  border-bottom: 1px solid ${(props) => props.theme.colors.input.border};
+`;
+
+interface ScrollWrapperProps {
+  scrollable?: boolean;
+}
+
+const ScrollWrapper = styled.div<ScrollWrapperProps>`
+  display: flex;
+  flex-direction: column;
+  flex-grow: 1;
+
+  ${(props) =>
+    props.scrollable
+      ? css`
+          overflow: auto;
+          max-height: 100%;
+        `
+      : ""}
+`;
+
+const CodeEditorWrapper = styled.div`
+  flex-grow: 1;
+
+  & > div {
+    min-height: 100%;
+    border-radius: 0;
+    border: 0;
+  }
+`;
+
+const DebuggerScriptPane = ({ collapsible }: DebuggerScriptPaneProps) => {
+  const dispatch = useAppDispatch();
+  const [thread, setThread] = useState(0);
+
+  const isPaused = useAppSelector((state) => state.debug.isPaused);
+  const scriptContexts = useAppSelector((state) => state.debug.scriptContexts);
+  const gbvmScripts = useAppSelector((state) => state.debug.gbvmScripts);
+  const viewScriptType = useAppSelector(
+    (state) => getSettings(state).debuggerScriptType
+  );
+  const isCollapsed = useAppSelector(
+    (state) =>
+      !!collapsible &&
+      getSettings(state).debuggerCollapsedPanes.includes("script")
+  );
+
+  const onSetScriptTypeEditor = useCallback(() => {
+    dispatch(
+      settingsActions.editSettings({
+        debuggerScriptType: "editor",
+      })
+    );
+  }, [dispatch]);
+
+  const onSetScriptTypeGBVM = useCallback(() => {
+    dispatch(
+      settingsActions.editSettings({
+        debuggerScriptType: "gbvm",
+      })
+    );
+  }, [dispatch]);
+
+  const onToggleCollapsed = useCallback(() => {
+    dispatch(settingsActions.toggleDebuggerPaneCollapsed("script"));
+  }, [dispatch]);
+
+  const tabs = useMemo(() => {
+    return scriptContexts.reduce((memo, ctx, i) => {
+      memo[i] = `Thread ${i}`;
+      return memo;
+    }, {} as Record<number, string>);
+  }, [scriptContexts]);
+
+  const runningThreadIndex = useMemo(() => {
+    return scriptContexts.findIndex((thread) => thread.current);
+  }, [scriptContexts]);
+
+  useEffect(() => {
+    setThread(runningThreadIndex);
+  }, [runningThreadIndex]);
+
+  const currentThread = useMemo(() => {
+    return scriptContexts[thread] ?? scriptContexts[0];
+  }, [scriptContexts, thread]);
+
+  const currentScriptSymbol =
+    currentThread?.closestGBVMSymbol?.scriptSymbol ?? "";
+
+  const currentGBVMScript = gbvmScripts[`${currentScriptSymbol}.s`] ?? "";
+
+  const scriptCtx: ScriptEditorCtx | undefined = useMemo(
+    () =>
+      currentThread?.closestGBVMSymbol
+        ? {
+            type:
+              currentThread.closestGBVMSymbol.entityType === "customEvent"
+                ? "script"
+                : "entity",
+            entityType: currentThread.closestGBVMSymbol.entityType,
+            entityId: currentThread.closestGBVMSymbol.entityId,
+            sceneId: currentThread.closestGBVMSymbol.sceneId,
+            scriptKey: currentThread.closestGBVMSymbol.scriptKey,
+            executingId: currentThread.closestGBVMSymbol?.scriptEventId ?? "",
+          }
+        : undefined,
+    [currentThread?.closestGBVMSymbol]
+  );
+
+  const currentScriptLineNum = useMemo(() => {
+    if (
+      currentGBVMScript &&
+      currentThread?.closestSymbol &&
+      currentThread?.closestSymbol.startsWith("GBVM$")
+    ) {
+      const lines = currentGBVMScript.split("\n");
+      for (let l = 0; l < lines.length; l++) {
+        if (lines[l].includes(currentThread.closestSymbol)) {
+          return l + 1;
+        }
+      }
+    }
+    return -1;
+  }, [currentGBVMScript, currentThread?.closestSymbol]);
+
+  const actor = useAppSelector((state) =>
+    actorSelectors.selectById(state, scriptCtx?.entityId ?? "")
+  );
+  const trigger = useAppSelector((state) =>
+    triggerSelectors.selectById(state, scriptCtx?.entityId ?? "")
+  );
+  const customEvent = useAppSelector((state) =>
+    customEventSelectors.selectById(state, scriptCtx?.entityId ?? "")
+  );
+  const scene = useAppSelector((state) =>
+    sceneSelectors.selectById(state, scriptCtx?.sceneId ?? "")
+  );
+
+  const currentScript = useMemo(() => {
+    if (!scriptCtx) {
+      return [];
+    }
+    if (scriptCtx.entityType === "actor" && actor) {
+      return actor[scriptCtx.scriptKey as ActorScriptKey];
+    } else if (scriptCtx.entityType === "trigger" && trigger) {
+      return trigger[scriptCtx.scriptKey as TriggerScriptKey];
+    } else if (scriptCtx.entityType === "scene" && scene) {
+      return scene[scriptCtx.scriptKey as SceneScriptKey];
+    } else if (scriptCtx.entityType === "customEvent" && customEvent) {
+      return customEvent.script;
+    }
+    return [];
+  }, [actor, scriptCtx, scene, trigger, customEvent]);
+
+  const onPlayPause = useCallback(() => {
+    if (isPaused) {
+      API.debugger.resume();
+    } else {
+      API.debugger.pause();
+    }
+  }, [isPaused]);
+
+  const stopPropagagtion = useCallback(
+    (e: React.MouseEvent<HTMLDivElement>) => {
+      e.stopPropagation();
+    },
+    []
+  );
+
+  return (
+    <>
+      <SplitPaneHeader
+        onToggle={collapsible ? onToggleCollapsed : undefined}
+        collapsed={isCollapsed}
+        variant="secondary"
+        buttons={
+          !isCollapsed && (
+            <>
+              <Button
+                size="small"
+                variant={
+                  viewScriptType === "editor" ? "underlined" : "transparent"
+                }
+                onClick={onSetScriptTypeEditor}
+              >
+                {l10n("FIELD_EDITOR")}
+              </Button>
+              /
+              <Button
+                size="small"
+                variant={
+                  viewScriptType === "gbvm" ? "underlined" : "transparent"
+                }
+                onClick={onSetScriptTypeGBVM}
+              >
+                {l10n("FIELD_GBVM")}
+              </Button>
+            </>
+          )
+        }
+      >
+        {isCollapsed || !isPaused || scriptContexts.length === 0 ? (
+          l10n("FIELD_THREADS")
+        ) : (
+          <TabWrapper onClick={stopPropagagtion}>
+            <TabBar
+              value={String(thread)}
+              values={tabs}
+              onChange={(value) => {
+                setThread(parseInt(value, 10));
+              }}
+            />
+          </TabWrapper>
+        )}
+      </SplitPaneHeader>
+      {!isCollapsed && !isPaused && (
+        <PlayPauseMessage>
+          {l10n("FIELD_PAUSE_TO_VIEW_SCRIPTS")}
+          <Button onClick={onPlayPause}>{l10n("FIELD_PAUSE")}</Button>
+        </PlayPauseMessage>
+      )}
+      {!isCollapsed && isPaused && !currentGBVMScript && (
+        <PlayPauseMessage>
+          {l10n("FIELD_NO_SCRIPT_RUNNING")}
+          <Button onClick={onPlayPause}>{l10n("FIELD_RESUME")}</Button>
+        </PlayPauseMessage>
+      )}
+      {!isCollapsed && isPaused && currentGBVMScript && (
+        <Content>
+          {currentGBVMScript && scriptCtx && (
+            <ScriptPath>
+              <DebuggerScriptCtxBreadcrumb context={scriptCtx} />
+            </ScriptPath>
+          )}
+          <ScrollWrapper scrollable={!collapsible}>
+            {viewScriptType === "editor" && scriptCtx ? (
+              <ScriptEditorContext.Provider value={scriptCtx}>
+                <ScriptEditor
+                  value={currentScript}
+                  showAutoFadeIndicator={
+                    scriptCtx.type === "entity" &&
+                    scriptCtx.entityType === "scene" &&
+                    scriptCtx.scriptKey === "script"
+                  }
+                />
+              </ScriptEditorContext.Provider>
+            ) : undefined}
+            {viewScriptType === "gbvm" && currentGBVMScript ? (
+              <CodeEditorWrapper>
+                <CodeEditor
+                  value={currentGBVMScript}
+                  onChange={() => {}}
+                  currentLineNum={currentScriptLineNum}
+                />
+              </CodeEditorWrapper>
+            ) : undefined}
+          </ScrollWrapper>
+        </Content>
+      )}
+    </>
+  );
+};
+
+export default DebuggerScriptPane;
diff --git a/src/components/debugger/DebuggerState.tsx b/src/components/debugger/DebuggerState.tsx
new file mode 100644
index 000000000..bd5178db8
--- /dev/null
+++ b/src/components/debugger/DebuggerState.tsx
@@ -0,0 +1,73 @@
+import React, { useCallback } from "react";
+import { useAppDispatch, useAppSelector } from "store/hooks";
+import styled from "styled-components";
+import { SplitPaneHeader } from "ui/splitpane/SplitPaneHeader";
+import { getSettings } from "store/features/settings/settingsState";
+import settingsActions from "store/features/settings/settingsActions";
+import DebuggerSceneLink from "components/debugger/DebuggerSceneLink";
+import l10n from "shared/lib/lang/l10n";
+
+const Content = styled.div`
+  background: ${(props) => props.theme.colors.scripting.form.background};
+  padding: 10px;
+`;
+
+const DataRow = styled.div`
+  padding-bottom: 5px;
+  &:last-of-type {
+    padding-bottom: 0;
+  }
+`;
+
+const DataLabel = styled.span`
+  font-weight: bold;
+  padding-right: 5px;
+`;
+
+const DebuggerState = () => {
+  const dispatch = useAppDispatch();
+
+  const sceneMap = useAppSelector((state) => state.debug.sceneMap);
+  const currentSceneSymbol = useAppSelector(
+    (state) => state.debug.currentSceneSymbol
+  );
+  const scriptContexts = useAppSelector((state) => state.debug.scriptContexts);
+
+  const currentSceneData = sceneMap[currentSceneSymbol] ?? undefined;
+
+  const isCollapsed = useAppSelector((state) =>
+    getSettings(state).debuggerCollapsedPanes.includes("state")
+  );
+
+  const onToggleCollapsed = useCallback(() => {
+    dispatch(settingsActions.toggleDebuggerPaneCollapsed("state"));
+  }, [dispatch]);
+
+  return (
+    <>
+      <SplitPaneHeader
+        onToggle={onToggleCollapsed}
+        collapsed={isCollapsed}
+        variant="secondary"
+      >
+        {l10n("FIELD_CURRENT_STATE")}
+      </SplitPaneHeader>
+      {!isCollapsed && (
+        <Content>
+          {currentSceneData && (
+            <DataRow>
+              <DataLabel>{l10n("SCENE")}:</DataLabel>
+              <DebuggerSceneLink id={currentSceneData.id} />
+            </DataRow>
+          )}
+          <DataRow>
+            <DataLabel>{l10n("FIELD_THREADS")}:</DataLabel>
+            {scriptContexts.length}
+          </DataRow>
+        </Content>
+      )}
+    </>
+  );
+};
+
+export default DebuggerState;
diff --git a/src/components/debugger/DebuggerTriggerLink.tsx b/src/components/debugger/DebuggerTriggerLink.tsx
new file mode 100644
index 000000000..6d6414a48
--- /dev/null
+++ b/src/components/debugger/DebuggerTriggerLink.tsx
@@ -0,0 +1,44 @@
+import React, { useCallback } from "react";
+import { triggerSelectors } from "store/features/entities/entitiesState";
+import editorActions from "store/features/editor/editorActions";
+import { useAppDispatch, useAppSelector } from "store/hooks";
+import { triggerName } from "shared/lib/entities/entitiesHelpers";
+import { LinkButton } from "ui/debugger/LinkButton";
+
+interface DebuggerTriggerLinkProps {
+  id: string;
+  sceneId: string;
+}
+
+const DebuggerTriggerLink = ({ id, sceneId }: DebuggerTriggerLinkProps) => {
+  const dispatch = useAppDispatch();
+  const trigger = useAppSelector((state) =>
+    triggerSelectors.selectById(state, id)
+  );
+  const triggerIndex = useAppSelector((state) =>
+    triggerSelectors.selectIds(state).indexOf(id)
+  );
+
+  const onSelect = useCallback(() => {
+    dispatch(
+      editorActions.selectTrigger({
+        sceneId,
+        triggerId: id,
+      })
+    );
+    dispatch(editorActions.editSearchTerm(""));
+    dispatch(editorActions.editSearchTerm(sceneId));
+  }, [dispatch, id, sceneId]);
+
+  if (!trigger) {
+    return null;
+  }
+
+  return (
+    <LinkButton onClick={onSelect}>
+      {triggerName(trigger, triggerIndex)}
+    </LinkButton>
+  );
+};
+
+export default DebuggerTriggerLink;
diff --git a/src/components/debugger/DebuggerVRAMPane.tsx b/src/components/debugger/DebuggerVRAMPane.tsx
new file mode 100644
index 000000000..13a3c643d
--- /dev/null
+++ b/src/components/debugger/DebuggerVRAMPane.tsx
@@ -0,0 +1,42 @@
+import React, { useCallback } from "react";
+import { getSettings } from "store/features/settings/settingsState";
+import settingsActions from "store/features/settings/settingsActions";
+import { useAppDispatch, useAppSelector } from "store/hooks";
+import styled from "styled-components";
+import { SplitPaneHeader } from "ui/splitpane/SplitPaneHeader";
+
+const Content = styled.div`
+  background: ${(props) => props.theme.colors.scripting.form.background};
+  padding: 10px;
+`;
+
+const DebuggerVRAMPane = () => {
+  const dispatch = useAppDispatch();
+  const vramPreview = useAppSelector((state) => state.debug.vramPreview);
+  const isCollapsed = useAppSelector((state) =>
+    getSettings(state).debuggerCollapsedPanes.includes("vram")
+  );
+
+  const onToggleCollapsed = useCallback(() => {
+    dispatch(settingsActions.toggleDebuggerPaneCollapsed("vram"));
+  }, [dispatch]);
+
+  return (
+    <>
+      <SplitPaneHeader
+        onToggle={onToggleCollapsed}
+        collapsed={isCollapsed}
+        variant="secondary"
+      >
+        VRAM
+      </SplitPaneHeader>
+      {!isCollapsed && (
+        <Content>
+          <img src={vramPreview} alt=""></img>
+        </Content>
+      )}
+    </>
+  );
+};
+
+export default DebuggerVRAMPane;
diff --git a/src/components/debugger/DebuggerVariablesPane.tsx b/src/components/debugger/DebuggerVariablesPane.tsx
new file mode 100644
index 000000000..5d7f8f8e3
--- /dev/null
+++ b/src/components/debugger/DebuggerVariablesPane.tsx
@@ -0,0 +1,379 @@
+import React, { useCallback, useEffect, useMemo, useState } from "react";
+import l10n from "shared/lib/lang/l10n";
+import settingsActions from "store/features/settings/settingsActions";
+import editorActions from "store/features/editor/editorActions";
+import { useAppDispatch, useAppSelector } from "store/hooks";
+import styled, { css } from "styled-components";
+import { Button } from "ui/buttons/Button";
+import { NumberInput } from "ui/form/NumberInput";
+import { SearchInput } from "ui/form/SearchInput";
+import { StarIcon } from "ui/icons/Icons";
+import { FlexGrow } from "ui/spacing/Spacing";
+import type { VariableMapData } from "lib/compiler/compileData";
+import { getSettings } from "store/features/settings/settingsState";
+import { SplitPaneHeader } from "ui/splitpane/SplitPaneHeader";
+import { castEventToInt } from "renderer/lib/helpers/castEventValue";
+import API from "renderer/lib/api";
+
+interface DebuggerVariablesPaneProps {
+  collapsible?: boolean;
+}
+
+const HeaderSearchInput = styled(SearchInput)`
+  width: 100%;
+  max-width: 100px;
+  height: 22px;
+  font-size: 11px;
+  margin: -10px 5px;
+  padding: 5px;
+  border: 1px solid ${(props) => props.theme.colors.input.border};
+`;
+
+const VariableRow = styled.div`
+  padding: 5px 10px;
+  font-size: 11px;
+  border-bottom: 1px solid ${(props) => props.theme.colors.sidebar.border};
+  background: ${(props) => props.theme.colors.scripting.form.background};
+  display: flex;
+  align-items: center;
+`;
+
+const VariableName = styled.div`
+  display: flex;
+  flex-direction: column;
+  flex-grow: 1;
+  max-width: calc(100% - 115px);
+`;
+
+const Symbol = styled.span`
+  opacity: 0.5;
+  font-size: 8px;
+  padding-top: 5px;
+
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  max-width: 100%;
+  overflow: hidden;
+`;
+
+const Eq = styled.span`
+  text-align right;
+  margin-right: 5px;
+`;
+
+const InputWrapper = styled.div`
+  width: 70px;
+  margin-right: 5px;
+`;
+
+const ValueButton = styled.button`
+  background: transparent;
+  color: ${(props) => props.theme.colors.text};
+  display: inline;
+  padding: 0;
+  font-size: 11px;
+  border: 0;
+  margin: 0;
+  height: 11px;
+  text-align: left;
+
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  max-width: 100%;
+  overflow: hidden;
+  line-height: 11px;
+
+  :hover {
+    color: ${(props) => props.theme.colors.highlight};
+  }
+`;
+
+const Content = styled.div`
+  flex-grow: 1;
+  background: ${(props) => props.theme.colors.scripting.form.background};
+`;
+
+interface MenuItemFavoriteProps {
+  visible: boolean;
+  isFavorite: boolean;
+}
+
+const VariableRowFavorite = styled.div<MenuItemFavoriteProps>`
+  opacity: 0;
+  svg {
+    display: inline-block;
+    width: 10px;
+    height: 10px;
+    fill: ${(props) => props.theme.colors.text};
+  }
+
+  ${Button} {
+    margin-right: -5px;
+    transition: all 0.1s ease-out;
+    height: 16px;
+    width: 16px;
+    padding: 0;
+    min-width: 10px;
+  }
+
+  ${(props) =>
+    props.isFavorite
+      ? css`
+          opacity: 1;
+        `
+      : ""}
+  ${(props) =>
+    !props.isFavorite
+      ? css`
+          svg {
+            opacity: 0.3;
+          }
+
+          ${Button}:active {
+            transform: scale(1.5);
+            svg {
+              opacity: 1;
+            }
+          }
+        `
+      : ""}      
+    ${VariableRow}:hover > & {
+    opacity: 1;
+  }
+`;
+
+const DebuggerVariablesPane = ({ collapsible }: DebuggerVariablesPaneProps) => {
+  const dispatch = useAppDispatch();
+
+  const variableDataBySymbol = useAppSelector(
+    (state) => state.debug.variableDataBySymbol
+  );
+  const variableSymbols = useAppSelector(
+    (state) => state.debug.variableSymbols
+  );
+  const variablesFilter = useAppSelector(
+    (state) => getSettings(state).debuggerVariablesFilter
+  );
+  const variablesData = useAppSelector((state) => state.debug.variablesData);
+  const watchedVariableIds = useAppSelector(
+    (state) => getSettings(state).debuggerWatchedVariables
+  );
+  const isCollapsed = useAppSelector(
+    (state) =>
+      !!collapsible &&
+      getSettings(state).debuggerCollapsedPanes.includes("variables")
+  );
+  const [varSearchTerm, setVarSearchTerm] = useState("");
+
+  const onSearchVariables = useCallback(
+    (e: React.ChangeEvent<HTMLInputElement>) => {
+      setVarSearchTerm(e.currentTarget.value);
+    },
+    []
+  );
+
+  const onSetVariablesFilterAll = useCallback(() => {
+    dispatch(
+      settingsActions.editSettings({
+        debuggerVariablesFilter: "all",
+      })
+    );
+  }, [dispatch]);
+
+  const onSetVariablesFilterWatched = useCallback(() => {
+    dispatch(
+      settingsActions.editSettings({
+        debuggerVariablesFilter: "watched",
+      })
+    );
+  }, [dispatch]);
+
+  const onSelectScene = useCallback(
+    (sceneId: string) => {
+      dispatch(editorActions.selectScene({ sceneId }));
+      dispatch(editorActions.editSearchTerm(""));
+      dispatch(editorActions.editSearchTerm(sceneId));
+    },
+    [dispatch]
+  );
+
+  const onSelectActor = useCallback(
+    (actorId: string, sceneId: string) => {
+      dispatch(editorActions.selectActor({ sceneId, actorId }));
+      dispatch(editorActions.editSearchTerm(""));
+      dispatch(editorActions.editSearchTerm(sceneId));
+    },
+    [dispatch]
+  );
+
+  const onSelectTrigger = useCallback(
+    (triggerId: string, sceneId: string) => {
+      dispatch(
+        editorActions.selectTrigger({
+          sceneId,
+          triggerId,
+        })
+      );
+      dispatch(editorActions.editSearchTerm(""));
+      dispatch(editorActions.editSearchTerm(sceneId));
+    },
+    [dispatch]
+  );
+
+  const onSelectVariable = useCallback(
+    (variableData: VariableMapData) => {
+      if (!variableData.isLocal) {
+        dispatch(
+          editorActions.selectVariable({
+            variableId: variableData.id,
+          })
+        );
+      } else if (variableData.entityType === "scene") {
+        onSelectScene(variableData.sceneId);
+      } else if (variableData.entityType === "actor") {
+        onSelectActor(variableData.entityId, variableData.sceneId);
+      } else if (variableData.entityType === "trigger") {
+        onSelectTrigger(variableData.entityId, variableData.sceneId);
+      }
+    },
+    [dispatch, onSelectActor, onSelectScene, onSelectTrigger]
+  );
+
+  const onToggleWatchedVariable = useCallback(
+    (variableId: string) => {
+      dispatch(settingsActions.toggleWatchedVariable(variableId));
+    },
+    [dispatch]
+  );
+
+  const onToggleCollapsed = useCallback(() => {
+    dispatch(settingsActions.toggleDebuggerPaneCollapsed("variables"));
+  }, [dispatch]);
+
+  const filteredVariables = useMemo(() => {
+    return variableSymbols
+      .filter((symbol) => {
+        const key =
+          `${symbol} ${variableDataBySymbol[symbol]?.name}`.toUpperCase();
+        return key.includes(varSearchTerm.toUpperCase());
+      })
+      .map((symbol) => {
+        const variableData = variableDataBySymbol[symbol];
+        if (!variableData) {
+          return undefined;
+        }
+        const isFavorite = watchedVariableIds.includes(variableData.id);
+        if (variablesFilter === "watched" && !isFavorite) {
+          return undefined;
+        }
+        return {
+          ...variableData,
+          isFavorite,
+          value: variablesData[variableSymbols.indexOf(variableData.symbol)],
+        };
+      })
+      .filter((i) => i) as (VariableMapData & {
+      isFavorite: boolean;
+      value: number;
+    })[];
+  }, [
+    varSearchTerm,
+    variableDataBySymbol,
+    variableSymbols,
+    variablesData,
+    variablesFilter,
+    watchedVariableIds,
+  ]);
+
+  useEffect(() => {
+    API.debugger.setWatchedVariableIds(watchedVariableIds);
+  }, [watchedVariableIds]);
+
+  return (
+    <>
+      <SplitPaneHeader
+        onToggle={collapsible ? onToggleCollapsed : undefined}
+        collapsed={isCollapsed}
+        variant="secondary"
+        buttons={
+          !isCollapsed && (
+            <>
+              <HeaderSearchInput
+                value={varSearchTerm}
+                placeholder={l10n("TOOLBAR_SEARCH")}
+                onChange={onSearchVariables}
+              />
+              <Button
+                size="small"
+                variant={
+                  variablesFilter === "all" ? "underlined" : "transparent"
+                }
+                onClick={onSetVariablesFilterAll}
+              >
+                {l10n("FIELD_ALL")}
+              </Button>
+              /
+              <Button
+                size="small"
+                variant={
+                  variablesFilter === "watched" ? "underlined" : "transparent"
+                }
+                onClick={onSetVariablesFilterWatched}
+              >
+                {l10n("FIELD_WATCHED")}
+              </Button>
+            </>
+          )
+        }
+      >
+        {l10n("FIELD_VARIABLES")}
+      </SplitPaneHeader>
+      {!isCollapsed && (
+        <Content>
+          {filteredVariables.map((variableData) => {
+            return (
+              <VariableRow key={variableData.symbol}>
+                <VariableName>
+                  <ValueButton onClick={() => onSelectVariable(variableData)}>
+                    {variableData.name ?? variableData.symbol}
+                  </ValueButton>
+                  <Symbol>{variableData.symbol}</Symbol>
+                </VariableName>
+                <FlexGrow />
+                <Eq>=</Eq>
+                <InputWrapper>
+                  <NumberInput
+                    min={0}
+                    max={65535}
+                    value={variableData.value}
+                    onChange={(e) => {
+                      const newValue = castEventToInt(e, 0);
+                      API.debugger.setGlobal(variableData.symbol, newValue);
+                    }}
+                  />
+                </InputWrapper>
+                <VariableRowFavorite
+                  visible={false}
+                  isFavorite={variableData.isFavorite}
+                >
+                  <Button
+                    size="small"
+                    variant="transparent"
+                    onClick={() => {
+                      onToggleWatchedVariable(variableData.id);
+                    }}
+                    title={l10n("FIELD_WATCH")}
+                  >
+                    <StarIcon />
+                  </Button>
+                </VariableRowFavorite>
+              </VariableRow>
+            );
+          })}
+        </Content>
+      )}
+    </>
+  );
+};
+
+export default DebuggerVariablesPane;
diff --git a/src/components/editors/ActorEditor.tsx b/src/components/editors/ActorEditor.tsx
index 64d51e8fd..2cf211208 100644
--- a/src/components/editors/ActorEditor.tsx
+++ b/src/components/editors/ActorEditor.tsx
@@ -51,6 +51,7 @@ import {
   castEventToInt,
 } from "renderer/lib/helpers/castEventValue";
 import { useAppDispatch, useAppSelector } from "store/hooks";
+import type { ScriptEditorCtx } from "shared/lib/scripts/context";
 
 interface ActorEditorProps {
   id: string;
@@ -332,6 +333,19 @@ export const ActorEditor: FC<ActorEditorProps> = ({
     dispatch(editorActions.setLockScriptEditor(!lockScriptEditor));
   };
 
+  const scriptKey = getScriptKey(scriptMode, scriptModeSecondary);
+
+  const scriptCtx: ScriptEditorCtx = useMemo(
+    () => ({
+      type: "entity",
+      entityType: "actor",
+      entityId: id,
+      sceneId,
+      scriptKey,
+    }),
+    [id, sceneId, scriptKey]
+  );
+
   if (!scene || !actor) {
     return <WorldEditor />;
   }
@@ -359,8 +373,6 @@ export const ActorEditor: FC<ActorEditorProps> = ({
     </Button>
   );
 
-  const scriptKey = getScriptKey(scriptMode, scriptModeSecondary);
-
   const scriptButton = (
     <ScriptEditorDropdownButton
       value={actor[scriptKey]}
@@ -601,13 +613,8 @@ export const ActorEditor: FC<ActorEditorProps> = ({
           )}
         </StickyTabs>
 
-        <ScriptEditorContext.Provider value="entity">
-          <ScriptEditor
-            value={actor[scriptKey]}
-            type="actor"
-            entityId={actor.id}
-            scriptKey={scriptKey}
-          />
+        <ScriptEditorContext.Provider value={scriptCtx}>
+          <ScriptEditor value={actor[scriptKey]} />
         </ScriptEditorContext.Provider>
       </SidebarColumn>
     </Sidebar>
diff --git a/src/components/editors/CustomEventEditor.tsx b/src/components/editors/CustomEventEditor.tsx
index 8897eea6e..3b8e9a00b 100644
--- a/src/components/editors/CustomEventEditor.tsx
+++ b/src/components/editors/CustomEventEditor.tsx
@@ -30,6 +30,7 @@ import { Label } from "ui/form/Label";
 import { ScriptEditorContext } from "components/script/ScriptEditorContext";
 import l10n from "shared/lib/lang/l10n";
 import { useAppDispatch, useAppSelector } from "store/hooks";
+import { ScriptEditorCtx } from "shared/lib/scripts/context";
 
 const customEventName = (
   customEvent: CustomEventNormalized,
@@ -182,6 +183,17 @@ const CustomEventEditor = ({ id, multiColumn }: CustomEventEditorProps) => {
 
   const selectSidebar = () => dispatch(editorActions.selectSidebar());
 
+  const scriptCtx: ScriptEditorCtx = useMemo(
+    () => ({
+      type: "script",
+      entityType: "customEvent",
+      entityId: id,
+      sceneId: "",
+      scriptKey: "script",
+    }),
+    [id]
+  );
+
   if (!customEvent) {
     return <WorldEditor />;
   }
@@ -376,13 +388,8 @@ const CustomEventEditor = ({ id, multiColumn }: CustomEventEditorProps) => {
             }
           />
         </StickyTabs>
-        <ScriptEditorContext.Provider value="script">
-          <ScriptEditor
-            value={customEvent.script}
-            type="customEvent"
-            entityId={customEvent.id}
-            scriptKey={"script"}
-          />
+        <ScriptEditorContext.Provider value={scriptCtx}>
+          <ScriptEditor value={customEvent.script} />
         </ScriptEditorContext.Provider>
       </SidebarColumn>
     </Sidebar>
diff --git a/src/components/editors/SceneEditor.tsx b/src/components/editors/SceneEditor.tsx
index 330d29f47..a0694ca6c 100644
--- a/src/components/editors/SceneEditor.tsx
+++ b/src/components/editors/SceneEditor.tsx
@@ -57,6 +57,7 @@ import Alert, { AlertItem } from "ui/alerts/Alert";
 import { sceneName } from "shared/lib/entities/entitiesHelpers";
 import l10n from "shared/lib/lang/l10n";
 import { useAppDispatch, useAppSelector } from "store/hooks";
+import { ScriptEditorCtx } from "shared/lib/scripts/context";
 
 interface SceneEditorProps {
   id: string;
@@ -386,6 +387,19 @@ export const SceneEditor = ({ id, multiColumn }: SceneEditorProps) => {
     );
   }, [dispatch, id]);
 
+  const scriptKey = getScriptKey(scriptMode, scriptModeSecondary);
+
+  const scriptCtx: ScriptEditorCtx = useMemo(
+    () => ({
+      type: "entity",
+      entityType: "scene",
+      entityId: id,
+      sceneId: id,
+      scriptKey,
+    }),
+    [id, scriptKey]
+  );
+
   if (!scene) {
     return <WorldEditor />;
   }
@@ -425,7 +439,6 @@ export const SceneEditor = ({ id, multiColumn }: SceneEditorProps) => {
 
   const showParallaxButton = scene.width && scene.width > SCREEN_WIDTH;
   const showParallaxOptions = showParallaxButton && scene.parallax;
-  const scriptKey = getScriptKey(scriptMode, scriptModeSecondary);
 
   const scriptButton = (
     <ScriptEditorDropdownButton
@@ -767,12 +780,9 @@ export const SceneEditor = ({ id, multiColumn }: SceneEditorProps) => {
         {scene.autoFadeSpeed === null && scriptKey === "script" && (
           <ScriptEventAutoFadeDisabledWarning />
         )}
-        <ScriptEditorContext.Provider value="entity">
+        <ScriptEditorContext.Provider value={scriptCtx}>
           <ScriptEditor
             value={scene[scriptKey]}
-            type="scene"
-            entityId={scene.id}
-            scriptKey={scriptKey}
             showAutoFadeIndicator={scriptKey === "script"}
           />
         </ScriptEditorContext.Provider>
diff --git a/src/components/editors/TriggerEditor.tsx b/src/components/editors/TriggerEditor.tsx
index 1b5713953..b8fd95a11 100644
--- a/src/components/editors/TriggerEditor.tsx
+++ b/src/components/editors/TriggerEditor.tsx
@@ -36,6 +36,7 @@ import { ScriptEditorContext } from "components/script/ScriptEditorContext";
 import { triggerName } from "shared/lib/entities/entitiesHelpers";
 import l10n from "shared/lib/lang/l10n";
 import { useAppDispatch, useAppSelector } from "store/hooks";
+import { ScriptEditorCtx } from "shared/lib/scripts/context";
 
 interface TriggerEditorProps {
   id: string;
@@ -251,6 +252,17 @@ export const TriggerEditor = ({
     [scriptKey, trigger]
   );
 
+  const scriptCtx: ScriptEditorCtx = useMemo(
+    () => ({
+      type: "entity",
+      entityType: "trigger",
+      entityId: id,
+      sceneId,
+      scriptKey,
+    }),
+    [id, sceneId, scriptKey]
+  );
+
   if (!scene || !trigger) {
     return <WorldEditor />;
   }
@@ -383,13 +395,8 @@ export const TriggerEditor = ({
             />
           )}
         </StickyTabs>
-        <ScriptEditorContext.Provider value="entity">
-          <ScriptEditor
-            value={trigger[scriptKey] || []}
-            type="trigger"
-            entityId={trigger.id}
-            scriptKey={scriptKey}
-          />
+        <ScriptEditorContext.Provider value={scriptCtx}>
+          <ScriptEditor value={trigger[scriptKey] || []} />
         </ScriptEditorContext.Provider>
       </SidebarColumn>
     </Sidebar>
diff --git a/src/components/editors/VariableEditor.tsx b/src/components/editors/VariableEditor.tsx
index f73b5ff6d..d02dcae0b 100644
--- a/src/components/editors/VariableEditor.tsx
+++ b/src/components/editors/VariableEditor.tsx
@@ -137,6 +137,8 @@ export const VariableEditor: FC<VariableEditorProps> = ({ id }) => {
   };
 
   const setSelectedId = (id: string, item: VariableUse) => {
+    dispatch(editorActions.editSearchTerm(""));
+    dispatch(editorActions.editSearchTerm(item.sceneId));
     if (item.type === "actor") {
       dispatch(
         editorActions.selectActor({ actorId: id, sceneId: item.sceneId })
diff --git a/src/components/forms/ActorSelect.tsx b/src/components/forms/ActorSelect.tsx
index 795045283..991f8b8e5 100644
--- a/src/components/forms/ActorSelect.tsx
+++ b/src/components/forms/ActorSelect.tsx
@@ -47,36 +47,34 @@ export const ActorSelect = ({
   frame,
 }: ActorSelectProps) => {
   const context = useContext(ScriptEditorContext);
-  const editorType = useAppSelector((state) => state.editor.type);
   const [options, setOptions] = useState<ActorOption[]>([]);
   const [currentValue, setCurrentValue] = useState<ActorOption>();
-  const sceneId = useAppSelector((state) => state.editor.scene);
   const sceneType = useAppSelector(
-    (state) => sceneSelectors.selectById(state, sceneId)?.type
+    (state) => sceneSelectors.selectById(state, context.sceneId)?.type
   );
   const scenePlayerSpriteSheetId = useAppSelector(
-    (state) => sceneSelectors.selectById(state, sceneId)?.playerSpriteSheetId
+    (state) =>
+      sceneSelectors.selectById(state, context.sceneId)?.playerSpriteSheetId
   );
   const defaultPlayerSprites = useAppSelector(
     (state) => state.project.present.settings.defaultPlayerSprites
   );
-  const contextEntityId = useAppSelector((state) => state.editor.entityId);
   const sceneActorIds = useAppSelector((state) =>
-    getSceneActorIds(state, { id: sceneId })
+    getSceneActorIds(state, { id: context.sceneId })
   );
   const actorsLookup = useAppSelector((state) =>
     actorSelectors.selectEntities(state)
   );
   const customEvent = useAppSelector((state) =>
-    customEventSelectors.selectById(state, contextEntityId)
+    customEventSelectors.selectById(state, context.entityId)
   );
-  const selfIndex = sceneActorIds?.indexOf(contextEntityId);
-  const selfActor = actorsLookup[contextEntityId];
+  const selfIndex = sceneActorIds?.indexOf(context.entityId);
+  const selfActor = actorsLookup[context.entityId];
   const playerSpriteSheetId =
     scenePlayerSpriteSheetId || (sceneType && defaultPlayerSprites[sceneType]);
 
   useEffect(() => {
-    if (context === "script" && customEvent) {
+    if (context.type === "script" && customEvent) {
       setOptions([
         {
           label: "Player",
@@ -90,9 +88,11 @@ export const ActorSelect = ({
           };
         }),
       ]);
-    } else if (context === "entity" && sceneActorIds) {
+    } else if (context.type === "entity" && sceneActorIds) {
       setOptions([
-        ...(editorType === "actor" && selfActor && selfIndex !== undefined
+        ...(context.entityType === "actor" &&
+        selfActor &&
+        selfIndex !== undefined
           ? [
               {
                 label: `${l10n("FIELD_SELF")} (${actorName(
@@ -132,9 +132,7 @@ export const ActorSelect = ({
   }, [
     actorsLookup,
     context,
-    contextEntityId,
     customEvent,
-    editorType,
     playerSpriteSheetId,
     sceneActorIds,
     selfActor,
diff --git a/src/components/forms/PropertySelect.tsx b/src/components/forms/PropertySelect.tsx
index 0fb004471..cbdf656b0 100644
--- a/src/components/forms/PropertySelect.tsx
+++ b/src/components/forms/PropertySelect.tsx
@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from "react";
+import React, { useContext, useEffect, useState } from "react";
 import { useAppSelector } from "store/hooks";
 import { ActorNormalized, UnitType } from "shared/lib/entities/entitiesTypes";
 import {
@@ -19,6 +19,7 @@ import l10n from "shared/lib/lang/l10n";
 import SpriteSheetCanvas from "components/world/SpriteSheetCanvas";
 import styled from "styled-components";
 import { UnitsSelectButtonInputOverlay } from "./UnitsSelectButtonInputOverlay";
+import { ScriptEditorContext } from "components/script/ScriptEditorContext";
 
 interface PropertySelectProps {
   name: string;
@@ -55,37 +56,36 @@ export const PropertySelect = ({
   unitsAllowed,
   onChangeUnits,
 }: PropertySelectProps) => {
+  const context = useContext(ScriptEditorContext);
   const [options, setOptions] = useState<ActorOptGroup[]>([]);
   const [currentValue, setCurrentValue] = useState<ActorOption>();
 
-  const editorType = useAppSelector((state) => state.editor.type);
-  const sceneId = useAppSelector((state) => state.editor.scene);
   const sceneType = useAppSelector(
-    (state) => sceneSelectors.selectById(state, sceneId)?.type
+    (state) => sceneSelectors.selectById(state, context.sceneId)?.type
   );
   const scenePlayerSpriteSheetId = useAppSelector(
-    (state) => sceneSelectors.selectById(state, sceneId)?.playerSpriteSheetId
+    (state) =>
+      sceneSelectors.selectById(state, context.sceneId)?.playerSpriteSheetId
   );
   const defaultPlayerSprites = useAppSelector(
     (state) => state.project.present.settings.defaultPlayerSprites
   );
-  const contextEntityId = useAppSelector((state) => state.editor.entityId);
   const sceneActorIds = useAppSelector((state) =>
-    getSceneActorIds(state, { id: sceneId })
+    getSceneActorIds(state, { id: context.sceneId })
   );
   const actorsLookup = useAppSelector((state) =>
     actorSelectors.selectEntities(state)
   );
   const customEvent = useAppSelector((state) =>
-    customEventSelectors.selectById(state, contextEntityId)
+    customEventSelectors.selectById(state, context.entityId)
   );
-  const selfIndex = sceneActorIds?.indexOf(contextEntityId);
-  const selfActor = actorsLookup[contextEntityId];
+  const selfIndex = sceneActorIds?.indexOf(context.entityId);
+  const selfActor = actorsLookup[context.entityId];
   const playerSpriteSheetId =
     scenePlayerSpriteSheetId || (sceneType && defaultPlayerSprites[sceneType]);
 
   useEffect(() => {
-    if (editorType === "customEvent" && customEvent) {
+    if (context.entityType === "customEvent" && customEvent) {
       setOptions(
         [
           {
@@ -139,7 +139,9 @@ export const PropertySelect = ({
     } else if (sceneActorIds) {
       setOptions(
         [
-          ...(editorType === "actor" && selfActor && selfIndex !== undefined
+          ...(context.entityType === "actor" &&
+          selfActor &&
+          selfIndex !== undefined
             ? [
                 {
                   label: `${l10n("FIELD_SELF")} (${actorName(
@@ -211,9 +213,8 @@ export const PropertySelect = ({
     }
   }, [
     actorsLookup,
-    contextEntityId,
+    context.entityType,
     customEvent,
-    editorType,
     playerSpriteSheetId,
     sceneActorIds,
     selfActor,
diff --git a/src/components/forms/VariableSelect.tsx b/src/components/forms/VariableSelect.tsx
index 3a08b17ba..81d51ff7d 100644
--- a/src/components/forms/VariableSelect.tsx
+++ b/src/components/forms/VariableSelect.tsx
@@ -150,7 +150,6 @@ export const VariableSelect: FC<VariableSelectProps> = ({
   const [options, setOptions] = useState<OptGroup[]>([]);
   const [currentVariable, setCurrentVariable] = useState<NamedVariable>();
   const [currentValue, setCurrentValue] = useState<Option>();
-  const editorType = useAppSelector((state) => state.editor.type);
   const variablesLookup = useAppSelector((state) =>
     variableSelectors.selectEntities(state)
   );
@@ -161,12 +160,12 @@ export const VariableSelect: FC<VariableSelectProps> = ({
 
   const valueIsLocal = value && value.startsWith("L");
   const valueIsTemp = value && value.startsWith("T");
-  const canRename = allowRename && !valueIsTemp && editorType !== "customEvent";
+  const canRename =
+    allowRename && !valueIsTemp && context.entityType !== "customEvent";
 
   useEffect(() => {
     const variables = namedVariablesByContext(
       context,
-      entityId,
       variablesLookup,
       customEvent
     );
@@ -250,7 +249,7 @@ export const VariableSelect: FC<VariableSelectProps> = ({
     if (e.altKey) {
       if (
         value &&
-        editorType !== "customEvent" &&
+        context.entityType !== "customEvent" &&
         Number.isInteger(Number(value))
       ) {
         dispatch(editorActions.selectVariable({ variableId: value }));
diff --git a/src/components/pages/WorldPage.tsx b/src/components/pages/WorldPage.tsx
index 28a688b39..8cd5b0a98 100644
--- a/src/components/pages/WorldPage.tsx
+++ b/src/components/pages/WorldPage.tsx
@@ -7,13 +7,20 @@ import EditorSidebar from "components/editors/EditorSidebar";
 import WorldStatusBar from "components/world/WorldStatusBar";
 import useResizable from "ui/hooks/use-resizable";
 import useWindowSize from "ui/hooks/use-window-size";
-import { SplitPaneHorizontalDivider } from "ui/splitpane/SplitPaneDivider";
+import {
+  SplitPaneHorizontalDivider,
+  SplitPaneVerticalDivider,
+} from "ui/splitpane/SplitPaneDivider";
 import { Navigator } from "components/world/Navigator";
 import editorActions from "store/features/editor/editorActions";
 import settingsActions from "store/features/settings/settingsActions";
-
 import debounce from "lodash/debounce";
 import { useAppDispatch, useAppSelector } from "store/hooks";
+import { SplitPaneHeader } from "ui/splitpane/SplitPaneHeader";
+import l10n from "shared/lib/lang/l10n";
+import DebuggerPanes from "components/debugger/DebuggerPanes";
+import API from "renderer/lib/api";
+import DebuggerControls from "components/debugger/DebuggerControls";
 
 const Wrapper = styled.div`
   display: flex;
@@ -38,6 +45,10 @@ const WorldPage = () => {
   const showNavigator = useAppSelector(
     (state) => state.project.present.settings.showNavigator
   );
+  const debuggerEnabled = useAppSelector(
+    (state) => state.project.present.settings.debuggerEnabled
+  );
+
   const [leftPaneWidth, setLeftPaneSize, startLeftPaneResize] = useResizable({
     initialSize: navigatorSidebarWidth,
     direction: "right",
@@ -73,6 +84,56 @@ const WorldPage = () => {
       }
     },
   });
+  const centerWidth =
+    windowWidth - (showNavigator ? leftPaneWidth : 0) - rightPaneWidth;
+  const [debuggerPaneHeight, setDebuggerPaneSize, onResizeDebugger] =
+    useResizable({
+      initialSize: debuggerEnabled ? 400 : 30,
+      direction: "top",
+      minSize: 30,
+      maxSize: windowHeight - 100,
+    });
+
+  const toggleDebuggerPane = useCallback(() => {
+    if (debuggerPaneHeight === 30) {
+      setDebuggerPaneSize(windowHeight * 0.5);
+    } else {
+      setDebuggerPaneSize(30);
+    }
+  }, [debuggerPaneHeight, setDebuggerPaneSize, windowHeight]);
+
+  useEffect(() => {
+    if (debuggerPaneHeight === 30 && debuggerEnabled) {
+      dispatch(
+        settingsActions.editSettings({
+          debuggerEnabled: false,
+        })
+      );
+    } else if (debuggerPaneHeight > 30 && !debuggerEnabled) {
+      dispatch(
+        settingsActions.editSettings({
+          debuggerEnabled: true,
+        })
+      );
+    }
+  }, [debuggerEnabled, debuggerPaneHeight, dispatch]);
+
+  useEffect(() => {
+    const unsubscribe = API.events.debugger.data.subscribe((_, packet) => {
+      switch (packet.action) {
+        case "initialized": {
+          if (debuggerPaneHeight <= 30) {
+            setDebuggerPaneSize(windowHeight * 0.5);
+          }
+          unsubscribe();
+          break;
+        }
+      }
+    });
+    return () => {
+      unsubscribe();
+    };
+  }, [debuggerPaneHeight, setDebuggerPaneSize, windowHeight]);
 
   useEffect(() => {
     prevWindowWidthRef.current = windowWidth;
@@ -170,7 +231,6 @@ const WorldPage = () => {
         <SplitPaneHorizontalDivider onMouseDown={startLeftPaneResize} />
       )}
       <div
-        ref={documentContainerRef}
         style={{
           flexGrow: 1,
           minWidth: 0,
@@ -180,16 +240,50 @@ const WorldPage = () => {
           color: themeContext.colors.text,
           height: windowHeight - 38,
           position: "relative",
+          display: "flex",
+          flexDirection: "column",
         }}
       >
-        <WorldView />
-        <ToolPicker
-          hasFocusForKeyboardShortcuts={hasFocusForKeyboardShortcuts}
-        />
-        <BrushToolbar
-          hasFocusForKeyboardShortcuts={hasFocusForKeyboardShortcuts}
-        />
-        <WorldStatusBar />
+        <div
+          ref={documentContainerRef}
+          style={{
+            overflow: "hidden",
+            background: themeContext.colors.document.background,
+            color: themeContext.colors.text,
+            flexGrow: 1,
+            position: "relative",
+          }}
+        >
+          <WorldView />
+          <ToolPicker
+            hasFocusForKeyboardShortcuts={hasFocusForKeyboardShortcuts}
+          />
+          <BrushToolbar
+            hasFocusForKeyboardShortcuts={hasFocusForKeyboardShortcuts}
+          />
+          <WorldStatusBar />
+        </div>
+        <SplitPaneVerticalDivider onMouseDown={onResizeDebugger} />
+        <div
+          style={{
+            position: "relative",
+            height: debuggerPaneHeight,
+            maxWidth: centerWidth,
+          }}
+        >
+          <SplitPaneHeader
+            onToggle={toggleDebuggerPane}
+            collapsed={debuggerPaneHeight <= 30}
+            buttons={debuggerPaneHeight > 30 && <DebuggerControls />}
+          >
+            {l10n("FIELD_DEBUGGER")}
+          </SplitPaneHeader>
+          {debuggerPaneHeight > 30 && (
+            <div style={{ height: debuggerPaneHeight - 30 }}>
+              <DebuggerPanes />
+            </div>
+          )}
+        </div>
       </div>
       <SplitPaneHorizontalDivider onMouseDown={onResizeRight} />
       <div
diff --git a/src/components/script/AddScriptEventMenu.tsx b/src/components/script/AddScriptEventMenu.tsx
index ca9619efa..5ea41ebd0 100644
--- a/src/components/script/AddScriptEventMenu.tsx
+++ b/src/components/script/AddScriptEventMenu.tsx
@@ -634,7 +634,7 @@ const AddScriptEventMenu = ({
           data: [
             instanciateScriptEvent(newEvent, {
               defaultActorId: "player",
-              defaultVariableId: defaultVariableForContext(context),
+              defaultVariableId: defaultVariableForContext(context.type),
               defaultMusicId: String(lastMusicId),
               defaultSceneId: String(lastSceneId),
               defaultSpriteId: String(lastSpriteId),
diff --git a/src/components/script/ScriptEditor.tsx b/src/components/script/ScriptEditor.tsx
index b3ad755f5..d4456afbc 100644
--- a/src/components/script/ScriptEditor.tsx
+++ b/src/components/script/ScriptEditor.tsx
@@ -1,22 +1,19 @@
-import React, { useEffect, useMemo, useRef, useState } from "react";
+import React, { useContext, useEffect, useMemo, useRef, useState } from "react";
 import { useAppSelector } from "store/hooks";
 import {
   customEventSelectors,
   scriptEventSelectors,
 } from "store/features/entities/entitiesState";
-import { ScriptEventParentType } from "shared/lib/entities/entitiesTypes";
 import styled from "styled-components";
 import AddButton from "./AddButton";
 import ScriptEditorEvent from "./ScriptEditorEvent";
 import { ScriptEventAutoFade } from "./ScriptEventAutoFade";
 import { calculateAutoFadeEventIdNormalized } from "shared/lib/scripts/eventHelpers";
 import { selectScriptEventDefs } from "store/features/scriptEventDefs/scriptEventDefsState";
+import { ScriptEditorContext } from "components/script/ScriptEditorContext";
 
 interface ScriptEditorProps {
   value: string[];
-  type: ScriptEventParentType;
-  entityId: string;
-  scriptKey: string;
   showAutoFadeIndicator?: boolean;
 }
 
@@ -25,13 +22,8 @@ const ScriptEditorWrapper = styled.div`
 `;
 
 const ScriptEditor = React.memo(
-  ({
-    value,
-    type,
-    entityId,
-    scriptKey,
-    showAutoFadeIndicator,
-  }: ScriptEditorProps) => {
+  ({ value, showAutoFadeIndicator }: ScriptEditorProps) => {
+    const context = useContext(ScriptEditorContext);
     const [renderTo, setRenderTo] = useState(0);
     const timerRef = useRef<number>(0);
     const scriptEventsLookup = useAppSelector((state) =>
@@ -63,7 +55,7 @@ const ScriptEditor = React.memo(
     // Reset renderTo on script tab change
     useEffect(() => {
       setRenderTo(0);
-    }, [scriptKey]);
+    }, [context.entityId, context.scriptKey]);
 
     // Load long scripts asynchronously
     useEffect(() => {
@@ -77,7 +69,7 @@ const ScriptEditor = React.memo(
           }
         };
       }
-    }, [renderTo, value.length]);
+    }, [renderTo, value.length, context.entityId, context.scriptKey]);
 
     return (
       <ScriptEditorWrapper>
@@ -92,10 +84,10 @@ const ScriptEditor = React.memo(
                   key={`${id}_${index}`}
                   id={id}
                   index={index}
-                  parentType={type}
-                  parentId={entityId}
-                  parentKey={scriptKey}
-                  entityId={entityId}
+                  parentType={context.entityType}
+                  parentId={context.entityId}
+                  parentKey={context.scriptKey}
+                  entityId={context.entityId}
                 />
               </React.Fragment>
             )
@@ -104,9 +96,9 @@ const ScriptEditor = React.memo(
           <ScriptEventAutoFade />
         )}
         <AddButton
-          parentType={type}
-          parentId={entityId}
-          parentKey={scriptKey}
+          parentType={context.entityType}
+          parentId={context.entityId}
+          parentKey={context.scriptKey}
         />
       </ScriptEditorWrapper>
     );
diff --git a/src/components/script/ScriptEditorContext.tsx b/src/components/script/ScriptEditorContext.tsx
index 18877fa87..b9d88c310 100644
--- a/src/components/script/ScriptEditorContext.tsx
+++ b/src/components/script/ScriptEditorContext.tsx
@@ -1,5 +1,10 @@
 import React from "react";
-import { ScriptEditorContextType } from "shared/lib/scripts/context";
+import { ScriptEditorCtx } from "shared/lib/scripts/context";
 
-export const ScriptEditorContext =
-  React.createContext<ScriptEditorContextType>("entity");
+export const ScriptEditorContext = React.createContext<ScriptEditorCtx>({
+  type: "entity",
+  entityType: "scene",
+  sceneId: "",
+  entityId: "",
+  scriptKey: "",
+});
diff --git a/src/components/script/ScriptEditorEvent.tsx b/src/components/script/ScriptEditorEvent.tsx
index e2b81ea53..7b52737dd 100644
--- a/src/components/script/ScriptEditorEvent.tsx
+++ b/src/components/script/ScriptEditorEvent.tsx
@@ -1,4 +1,10 @@
-import React, { useCallback, useRef, useState } from "react";
+import React, {
+  useCallback,
+  useContext,
+  useEffect,
+  useRef,
+  useState,
+} from "react";
 import {
   DragSourceMonitor,
   DropTargetMonitor,
@@ -8,6 +14,7 @@ import {
 import entitiesActions from "store/features/entities/entitiesActions";
 import { scriptEventSelectors } from "store/features/entities/entitiesState";
 import editorActions from "store/features/editor/editorActions";
+import settingsActions from "store/features/settings/settingsActions";
 import {
   ScriptEventParentType,
   ScriptEventsRef,
@@ -25,15 +32,21 @@ import {
   ScriptEventRenameInputCompleteButton,
   ScriptEditorChildrenWrapper,
   ScriptEditorChildrenLabel,
+  ScriptEventHeaderBreakpointIndicator,
 } from "ui/scripting/ScriptEvents";
-import { ArrowIcon, CheckIcon, CommentIcon } from "ui/icons/Icons";
+import {
+  ArrowIcon,
+  BreakpointIcon,
+  CheckIcon,
+  CommentIcon,
+} from "ui/icons/Icons";
 import { FixedSpacer } from "ui/spacing/Spacing";
 import ScriptEventForm from "./ScriptEventForm";
 import l10n from "shared/lib/lang/l10n";
 import { ScriptEditorEventHelper } from "./ScriptEditorEventHelper";
 import ItemTypes from "renderer/lib/dnd/itemTypes";
 import { DropdownButton } from "ui/buttons/DropdownButton";
-import { MenuDivider, MenuItem, MenuOverlay } from "ui/menu/Menu";
+import { MenuDivider, MenuItem, MenuItemIcon, MenuOverlay } from "ui/menu/Menu";
 import clipboardActions from "store/features/clipboard/clipboardActions";
 import { ClipboardTypeScriptEvents } from "store/features/clipboard/clipboardTypes";
 import { RelativePortal } from "ui/layout/RelativePortal";
@@ -45,6 +58,8 @@ import { ScriptEventSymbolEditorWrapper } from "components/forms/symbols/SymbolE
 import { EVENT_CALL_CUSTOM_EVENT, EVENT_COMMENT, EVENT_END } from "consts";
 import { selectScriptEventDefs } from "store/features/scriptEventDefs/scriptEventDefsState";
 import { useAppDispatch, useAppSelector } from "store/hooks";
+import { ScriptEditorContext } from "components/script/ScriptEditorContext";
+import { getSettings } from "store/features/settings/settingsState";
 
 interface ScriptEditorEventProps {
   id: string;
@@ -67,6 +82,7 @@ const ScriptEditorEvent = React.memo(
     nestLevel = 0,
   }: ScriptEditorEventProps) => {
     const dispatch = useAppDispatch();
+    const context = useContext(ScriptEditorContext);
     const dragRef = useRef<HTMLDivElement>(null);
     const dropRef = useRef<HTMLDivElement>(null);
     const headerRef = useRef<HTMLDivElement>(null);
@@ -86,6 +102,12 @@ const ScriptEditorEvent = React.memo(
     const scriptEventDefs = useAppSelector((state) =>
       selectScriptEventDefs(state)
     );
+    const breakpointEnabled = useAppSelector(
+      (state) =>
+        getSettings(state).debuggerBreakpoints.findIndex(
+          (b) => b.scriptEventId === id
+        ) > -1
+    );
 
     const onFetchClipboard = useCallback(() => {
       dispatch(clipboardActions.fetchClipboard());
@@ -170,6 +192,15 @@ const ScriptEditorEvent = React.memo(
       );
     }, [dispatch, id]);
 
+    const toggleBreakpoint = useCallback(() => {
+      dispatch(
+        settingsActions.toggleBreakpoint({
+          scriptEventId: id,
+          context,
+        })
+      );
+    }, [context, dispatch, id]);
+
     const editCustomEvent = useCallback(() => {
       const customEventId = scriptEvent?.args?.customEventId;
       if (customEventId && typeof customEventId === "string") {
@@ -316,6 +347,14 @@ const ScriptEditorEvent = React.memo(
       setAddOpen(false);
     }, []);
 
+    const isExecuting = scriptEvent?.id === context.executingId;
+
+    useEffect(() => {
+      if (isExecuting && headerRef.current) {
+        headerRef.current.scrollIntoView();
+      }
+    }, [isExecuting]);
+
     if (!scriptEvent) {
       return null;
     }
@@ -365,6 +404,7 @@ const ScriptEditorEvent = React.memo(
               comment={Boolean(commented || isComment)}
               nestLevel={nestLevel}
               altBg={index % 2 === 0}
+              isExecuting={isExecuting}
             >
               {isVisible && (
                 <>
@@ -406,6 +446,13 @@ const ScriptEditorEvent = React.memo(
                       />
                     )}
                   </ScriptEventHeaderTitle>
+                  {breakpointEnabled && (
+                    <ScriptEventHeaderBreakpointIndicator
+                      title={l10n("FIELD_BREAKPOINT")}
+                    >
+                      <BreakpointIcon />
+                    </ScriptEventHeaderBreakpointIndicator>
+                  )}
 
                   <DropdownButton
                     size="small"
@@ -439,6 +486,14 @@ const ScriptEditorEvent = React.memo(
                           : l10n("MENU_DISABLE_ELSE")}
                       </MenuItem>
                     )}
+                    <MenuItem onClick={toggleBreakpoint}>
+                      <span>{l10n("MENU_SET_BREAKPOINT")}</span>
+                      {breakpointEnabled && (
+                        <MenuItemIcon>
+                          <CheckIcon />
+                        </MenuItemIcon>
+                      )}
+                    </MenuItem>
                     <MenuDivider />
                     <MenuItem onClick={() => onOpenAddMenu(true)}>
                       {l10n("MENU_INSERT_EVENT_BEFORE")}
diff --git a/src/components/script/ScriptEventAutoFade.tsx b/src/components/script/ScriptEventAutoFade.tsx
index f74fd6c32..d534fcacf 100644
--- a/src/components/script/ScriptEventAutoFade.tsx
+++ b/src/components/script/ScriptEventAutoFade.tsx
@@ -2,7 +2,7 @@ import { FadeSpeedSelect } from "components/forms/FadeSpeedSelect";
 import { DropdownButton } from "ui/buttons/DropdownButton";
 import { MenuItem } from "ui/menu/Menu";
 import l10n from "shared/lib/lang/l10n";
-import React, { useCallback } from "react";
+import React, { useCallback, useContext, useEffect, useRef } from "react";
 import entitiesActions from "store/features/entities/entitiesActions";
 import { sceneSelectors } from "store/features/entities/entitiesState";
 import { ArrowIcon } from "ui/icons/Icons";
@@ -20,11 +20,14 @@ import { OffscreenSkeletonInput } from "ui/skeleton/Skeleton";
 import { FixedSpacer } from "ui/spacing/Spacing";
 import { Button } from "ui/buttons/Button";
 import { useAppDispatch, useAppSelector } from "store/hooks";
+import { ScriptEditorContext } from "components/script/ScriptEditorContext";
 
 export const ScriptEventAutoFade = () => {
   const dispatch = useAppDispatch();
-  const type = useAppSelector((state) => state.editor.type);
-  const sceneId = useAppSelector((state) => state.editor.scene);
+  const context = useContext(ScriptEditorContext);
+  const type = context.entityType;
+  const sceneId = context.sceneId;
+  const headerRef = useRef<HTMLDivElement>(null);
   const scene = useAppSelector((state) =>
     sceneSelectors.selectById(state, sceneId)
   );
@@ -70,6 +73,14 @@ export const ScriptEventAutoFade = () => {
     );
   }, [autoFadeEventCollapse, dispatch, sceneId]);
 
+  const isExecuting = context.executingId === "autofade";
+
+  useEffect(() => {
+    if (isExecuting && headerRef.current) {
+      headerRef.current.scrollIntoView();
+    }
+  }, [isExecuting]);
+
   if (type !== "scene" || value === null || !scene) {
     return null;
   }
@@ -77,10 +88,12 @@ export const ScriptEventAutoFade = () => {
   return (
     <ScriptEventWrapper conditional={false} nestLevel={0}>
       <ScriptEventHeader
+        ref={headerRef}
         conditional={false}
         comment={false}
         nestLevel={0}
         altBg={false}
+        isExecuting={isExecuting}
         style={{
           cursor: "not-allowed",
         }}
diff --git a/src/components/script/ScriptEventFields.tsx b/src/components/script/ScriptEventFields.tsx
index 3ff114af5..92eeb2095 100644
--- a/src/components/script/ScriptEventFields.tsx
+++ b/src/components/script/ScriptEventFields.tsx
@@ -67,11 +67,15 @@ const ScriptEventFields = ({
             typeof field.label === "string" ? field.label : ""
           );
           if (field.allowedContexts) {
-            if (!field.allowedContexts.includes(context)) {
-              const newContext = field.allowedContexts[0];
+            if (!field.allowedContexts.includes(context.type)) {
+              const newContextType = field.allowedContexts[0];
+              const ctx = {
+                ...context,
+                type: newContextType,
+              };
               return (
                 <ScriptEditorContext.Provider
-                  value={newContext}
+                  value={ctx}
                   key={genKey(id, field.key || "", fieldIndex)}
                 >
                   {events}
diff --git a/src/components/script/ScriptEventFormInput.tsx b/src/components/script/ScriptEventFormInput.tsx
index d61ef7ace..f38f199c6 100644
--- a/src/components/script/ScriptEventFormInput.tsx
+++ b/src/components/script/ScriptEventFormInput.tsx
@@ -190,7 +190,7 @@ const ScriptEventFormInput = ({
               ]
             : undefined;
         if (defaultUnionValue === "LAST_VARIABLE") {
-          replaceValue = defaultVariableForContext(context);
+          replaceValue = defaultVariableForContext(context.type);
         } else if (defaultUnionValue !== undefined) {
           replaceValue = defaultUnionValue;
         }
@@ -459,7 +459,7 @@ const ScriptEventFormInput = ({
   } else if (type === "variable") {
     let fallbackValue = defaultValue;
     if (fallbackValue === "LAST_VARIABLE") {
-      fallbackValue = defaultVariableForContext(context);
+      fallbackValue = defaultVariableForContext(context.type);
     }
     return (
       <OffscreenSkeletonInput>
diff --git a/src/components/script/ScriptEventFormMatharea.tsx b/src/components/script/ScriptEventFormMatharea.tsx
index 662a6582a..ca82c14d9 100644
--- a/src/components/script/ScriptEventFormMatharea.tsx
+++ b/src/components/script/ScriptEventFormMatharea.tsx
@@ -35,7 +35,7 @@ const ScriptEventFormMathArea: FC<ScriptEventFormMathAreaProps> = ({
 
   useEffect(() => {
     setVariables(
-      namedVariablesByContext(context, entityId, variablesLookup, customEvent)
+      namedVariablesByContext(context, variablesLookup, customEvent)
     );
   }, [entityId, variablesLookup, context, customEvent]);
 
diff --git a/src/components/script/ScriptEventFormTextarea.tsx b/src/components/script/ScriptEventFormTextarea.tsx
index 5e50b7b8c..f1558030e 100644
--- a/src/components/script/ScriptEventFormTextarea.tsx
+++ b/src/components/script/ScriptEventFormTextarea.tsx
@@ -39,7 +39,7 @@ const ScriptEventFormTextArea: FC<ScriptEventFormTextAreaProps> = ({
 
   useEffect(() => {
     setVariables(
-      namedVariablesByContext(context, entityId, variablesLookup, customEvent)
+      namedVariablesByContext(context, variablesLookup, customEvent)
     );
   }, [entityId, variablesLookup, context, customEvent]);
 
diff --git a/src/components/script/ScriptEventTitle.tsx b/src/components/script/ScriptEventTitle.tsx
index e8e32b116..cd3970b13 100644
--- a/src/components/script/ScriptEventTitle.tsx
+++ b/src/components/script/ScriptEventTitle.tsx
@@ -63,10 +63,7 @@ const ScriptEventTitle = ({ command, args = {} }: ScriptEventTitleProps) => {
   const [namedVariablesLookup, setNamedVariablesLookup] = useState<
     Dictionary<NamedVariable>
   >({});
-  const editorType = useAppSelector((state) => state.editor.type);
-
-  const sceneId = useAppSelector((state) => state.editor.scene);
-  const entityId = useAppSelector((state) => state.editor.entityId) || sceneId;
+  const { entityType, sceneId, entityId } = context;
 
   const variablesLookup = useAppSelector((state) =>
     variableSelectors.selectEntities(state)
@@ -104,7 +101,6 @@ const ScriptEventTitle = ({ command, args = {} }: ScriptEventTitleProps) => {
   useEffect(() => {
     const variables = namedVariablesByContext(
       context,
-      entityId,
       variablesLookup,
       customEvent
     );
@@ -116,14 +112,14 @@ const ScriptEventTitle = ({ command, args = {} }: ScriptEventTitleProps) => {
     async function fetchAutoLabel() {
       if (scriptEventDefs[command]?.hasAutoLabel) {
         const actorNameForId = (value: unknown) => {
-          if (context === "script" && customEvent) {
+          if (context.type === "script" && customEvent) {
             return (
               customEvent.actors[value as string]?.name ||
               customEventActorsLookup[value as string]?.name ||
               l10n("FIELD_PLAYER")
             ).replace(/ /g, "");
           }
-          if (value === "$self$" && editorType === "actor") {
+          if (value === "$self$" && entityType === "actor") {
             return l10n("FIELD_SELF");
           } else if (value === "$self$" || value === "player") {
             return l10n("FIELD_PLAYER");
@@ -203,7 +199,7 @@ const ScriptEventTitle = ({ command, args = {} }: ScriptEventTitleProps) => {
     command,
     args,
     namedVariablesLookup,
-    editorType,
+    entityType,
     actorsLookup,
     sceneActorIds,
     scenesLookup,
diff --git a/src/components/ui/buttons/Button.tsx b/src/components/ui/buttons/Button.tsx
index 04fff2019..42f6fa858 100644
--- a/src/components/ui/buttons/Button.tsx
+++ b/src/components/ui/buttons/Button.tsx
@@ -5,7 +5,7 @@ import { ThemeInterface } from "ui/theme/ThemeInterface";
 
 export interface ButtonProps {
   readonly size?: "small" | "medium" | "large";
-  readonly variant?: "normal" | "primary" | "transparent";
+  readonly variant?: "normal" | "primary" | "transparent" | "underlined";
   readonly selected?: boolean;
   readonly active?: boolean;
   readonly children?: ReactNode;
@@ -44,6 +44,7 @@ export const Button = styled.button<ButtonProps>`
   ${(props) => (props.variant === "normal" ? normalStyles : "")}
   ${(props) => (props.variant === "primary" ? primaryStyles : "")}
   ${(props) => (props.variant === "transparent" ? transparentStyles : "")}
+  ${(props) => (props.variant === "underlined" ? underlinedStyles : "")}
 `;
 
 const smallStyles = css`
@@ -67,12 +68,19 @@ const largeStyles = css`
   font-weight: bold;
 `;
 
-const normalStyles = css`
+const normalStyles = css<ButtonProps>`
   background: ${(props) => props.theme.colors.button.background};
   border: 1px solid ${(props) => props.theme.colors.button.border};
   border-top: 1px solid ${(props) => props.theme.colors.button.borderTop};
   color: ${(props) => props.theme.colors.button.text};
 
+  ${(props) =>
+    props.disabled
+      ? css`
+          opacity: 0.5;
+        `
+      : ""}
+
   :active {
     background: ${(props) => props.theme.colors.button.activeBackground};
   }
@@ -127,6 +135,47 @@ const transparentStyles = css<ButtonProps>`
       : ""}
 `;
 
+const underlinedStyles = css<ButtonProps>`
+  background: transparent;
+  border-color: transparent;
+  color: ${(props) => props.theme.colors.button.text};
+  position: relative;
+  overflow: visible;
+
+  :after {
+    content: "";
+    border-bottom: 2px solid ${(props) => props.theme.colors.highlight};
+    width: 100%;
+    position: absolute;
+    bottom: -2px;
+  }
+
+  ${(props) =>
+    !props.disabled
+      ? css`
+          :hover {
+            background: rgba(128, 128, 128, 0.1);
+          }
+          :active {
+            background: rgba(128, 128, 128, 0.2);
+          }
+        `
+      : ""}
+
+  ${(props) =>
+    props.active
+      ? css`
+          background: rgba(128, 128, 128, 0.3);
+          :hover {
+            background: rgba(128, 128, 128, 0.3);
+          }
+          :active {
+            background: rgba(128, 128, 128, 0.2);
+          }
+        `
+      : ""}
+`;
+
 Button.defaultProps = {
   variant: "normal",
   size: "medium",
diff --git a/src/components/ui/buttons/DropdownButton.tsx b/src/components/ui/buttons/DropdownButton.tsx
index 07b113383..e3e367c28 100644
--- a/src/components/ui/buttons/DropdownButton.tsx
+++ b/src/components/ui/buttons/DropdownButton.tsx
@@ -10,7 +10,7 @@ import React, {
 import styled, { css } from "styled-components";
 import { RelativePortal } from "ui/layout/RelativePortal";
 import useDropdownMenu from "ui/hooks/use-dropdown-menu";
-import { TriangleIcon } from "ui/icons/Icons";
+import { CaretDownIcon } from "ui/icons/Icons";
 import { Menu, MenuItem, MenuItemProps } from "ui/menu/Menu";
 import { Button, ButtonProps } from "./Button";
 
@@ -63,7 +63,6 @@ export const ArrowWrapper = styled.div`
     padding-left: 5px;
   }
   &&&& > svg {
-    transform: rotate(180deg);
     height: 8px;
   }
 `;
@@ -129,7 +128,7 @@ export const DropdownButton: FC<DropdownButtonProps & ButtonProps> = ({
         {label}
         {showArrow && (
           <ArrowWrapper>
-            <TriangleIcon />
+            <CaretDownIcon />
           </ArrowWrapper>
         )}
       </Button>
diff --git a/src/components/ui/debugger/LinkButton.tsx b/src/components/ui/debugger/LinkButton.tsx
new file mode 100644
index 000000000..02d87a0ea
--- /dev/null
+++ b/src/components/ui/debugger/LinkButton.tsx
@@ -0,0 +1,23 @@
+import styled from "styled-components";
+
+export const LinkButton = styled.button`
+  background: transparent;
+  color: ${(props) => props.theme.colors.text};
+  display: inline;
+  padding: 0;
+  font-size: 11px;
+  border: 0;
+  margin: 0;
+  height: 11px;
+  text-align: left;
+
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  max-width: 100%;
+  overflow: hidden;
+  line-height: 11px;
+
+  :hover {
+    color: ${(props) => props.theme.colors.highlight};
+  }
+`;
diff --git a/src/components/ui/form/CodeEditor.tsx b/src/components/ui/form/CodeEditor.tsx
index fff631ad3..b78e71ee1 100644
--- a/src/components/ui/form/CodeEditor.tsx
+++ b/src/components/ui/form/CodeEditor.tsx
@@ -1,6 +1,6 @@
 import React from "react";
 import Editor from "react-simple-code-editor";
-import { highlight, languages, Grammar } from "prismjs";
+import { highlight, Grammar } from "prismjs";
 import "prismjs/components/prism-clike";
 import "prismjs/components/prism-javascript";
 import styled from "styled-components";
@@ -8,7 +8,8 @@ import gbvmGrammar from "./prism/gbvm.grammar";
 
 interface CodeEditorProps {
   value: string;
-  onChange: (newValue: string) => void;
+  onChange?: (newValue: string) => void;
+  currentLineNum?: number;
 }
 
 const Wrapper = styled.div`
@@ -102,27 +103,59 @@ const Wrapper = styled.div`
     width: 25px;
     font-weight: 100;
   }
+
+  .editor .currentLine {
+    background: ${(props) => props.theme.colors.input.border};
+    width: 100%;
+    display: inline-block;
+  }
+
+  .editor .currentLine .editorLineNumber {
+    background: ${(props) => props.theme.colors.highlight};
+    color: ${(props) => props.theme.colors.highlightText};
+    opacity: 1;
+  }
 `;
 
-const hightlightWithLineNumbers = (input: string, language: Grammar) =>
+const hightlightWithLineNumbers = (
+  input: string,
+  currentLineNum: number,
+  language: Grammar
+) =>
   highlight(input, language, "gbvm")
     .split("\n")
-    .map((line, i) => `<span class='editorLineNumber'>${i + 1}</span>${line}`)
+    .map(
+      (line, i) =>
+        `<span class='line-${i + 1}${
+          i + 1 === currentLineNum ? " currentLine " : ""
+        }'><span class='editorLineNumber'>${i + 1}</span>${line}</span>`
+    )
     .join("\n");
 
-export const CodeEditor = ({ value, onChange }: CodeEditorProps) => {
-  console.log({ a: languages.js, b: gbvmGrammar });
+const noop = () => {};
+
+export const CodeEditor = ({
+  value,
+  currentLineNum,
+  onChange,
+}: CodeEditorProps) => {
   return (
     <Wrapper>
       <Editor
         className="editor"
         value={value}
-        onValueChange={onChange}
-        highlight={(code) => hightlightWithLineNumbers(code, gbvmGrammar)}
+        onValueChange={onChange ?? noop}
+        highlight={(code) => {
+          return hightlightWithLineNumbers(
+            code,
+            currentLineNum ?? -1,
+            gbvmGrammar
+          );
+        }}
         padding={0}
         style={{
           fontFamily: '"Fira code", "Fira Mono", monospace',
-          fontSize: 12,
+          fontSize: 11,
         }}
       />
     </Wrapper>
diff --git a/src/components/ui/form/prism/gbvm.grammar.ts b/src/components/ui/form/prism/gbvm.grammar.ts
index f8327f1bd..f1be28e6f 100644
--- a/src/components/ui/form/prism/gbvm.grammar.ts
+++ b/src/components/ui/form/prism/gbvm.grammar.ts
@@ -9,13 +9,13 @@ const gbvmGrammar = {
     lookbehind: true,
   },
   instruction: {
-    pattern: /VM_[^ ]*/,
+    pattern: /VM_[^\s]*/,
   },
   asset: {
-    pattern: /___bank_([^ ]*)\s*,\s*_\1/,
+    pattern: /___bank_([^\s]*)\s*,\s*_\1/,
   },
   variable: {
-    pattern: /VAR_([^ ]*)/,
+    pattern: /VAR_([^\s]*)/,
   },
 };
 
diff --git a/src/components/ui/hooks/use-hover.ts b/src/components/ui/hooks/use-hover.ts
new file mode 100644
index 000000000..1aa873b40
--- /dev/null
+++ b/src/components/ui/hooks/use-hover.ts
@@ -0,0 +1,29 @@
+import { useEffect, useState } from "react";
+import type { RefObject } from "react";
+
+const useHover = <T extends HTMLElement = HTMLElement>(
+  elementRef: RefObject<T>
+): boolean => {
+  const [value, setValue] = useState<boolean>(false);
+
+  const handleMouseEnter = () => {
+    setValue(true);
+  };
+  const handleMouseLeave = () => {
+    setValue(false);
+  };
+
+  useEffect(() => {
+    const el = elementRef.current;
+    el?.addEventListener("mouseenter", handleMouseEnter);
+    el?.addEventListener("mouseleave", handleMouseLeave);
+    return () => {
+      el?.removeEventListener("mouseenter", handleMouseEnter);
+      el?.removeEventListener("mouseleave", handleMouseLeave);
+    };
+  }, [elementRef]);
+
+  return value;
+};
+
+export default useHover;
diff --git a/src/components/ui/hooks/use-resize-observer.ts b/src/components/ui/hooks/use-resize-observer.ts
new file mode 100644
index 000000000..f1e5f0908
--- /dev/null
+++ b/src/components/ui/hooks/use-resize-observer.ts
@@ -0,0 +1,34 @@
+import { useState, useEffect, useRef, RefObject } from "react";
+
+interface Size {
+  width: number | undefined;
+  height: number | undefined;
+}
+
+const useResizeObserver = <T extends HTMLElement>(): [RefObject<T>, Size] => {
+  const [size, setSize] = useState<Size>({
+    width: undefined,
+    height: undefined,
+  });
+  const ref = useRef<T>(null);
+
+  useEffect(() => {
+    if (ref.current && typeof ResizeObserver === "function") {
+      const observer = new ResizeObserver((entries) => {
+        window.requestAnimationFrame(() => {
+          if (entries.length === 0) return;
+          const { width, height } = entries[0].contentRect;
+          setSize({ width, height });
+        });
+      });
+
+      observer.observe(ref.current);
+
+      return () => observer.disconnect();
+    }
+  }, []);
+
+  return [ref, size];
+};
+
+export default useResizeObserver;
diff --git a/src/components/ui/icons/Icons.tsx b/src/components/ui/icons/Icons.tsx
index 062006cee..609b7bbbc 100644
--- a/src/components/ui/icons/Icons.tsx
+++ b/src/components/ui/icons/Icons.tsx
@@ -265,6 +265,12 @@ export const StopIcon = () => (
   </svg>
 );
 
+export const DebugIcon = () => (
+  <svg width="24" height="24" viewBox="0 0 24 24">
+    <path d="M24 20.586l-2.831-2.832c.522-.79.831-1.735.831-2.754 0-2.761-2.238-5-5-5s-5 2.239-5 5 2.238 5 5 5c1.019 0 1.964-.309 2.755-.832l2.831 2.832 1.414-1.414zm-10-5.586c0-1.654 1.346-3 3-3s3 1.346 3 3-1.346 3-3 3-3-1.346-3-3zm-8.105-11.827c0-.647.535-1.173 1.193-1.173.784 0 1.354.736 1.149 1.48-.077.281-.035.58.117.829.333.553.902.895 1.646.899.733-.004 1.31-.341 1.647-.898.151-.25.193-.548.116-.829-.205-.744.364-1.481 1.149-1.481.66 0 1.191.526 1.191 1.173 0 .564-.4 1.029-.932 1.146-.267.059-.498.224-.641.456-.508.848.162 1.599.777 2.354-1.008.468-2.102.705-3.307.705-1.222 0-2.309-.232-3.312-.701.623-.767 1.295-1.501.779-2.358-.141-.231-.372-.397-.64-.456-.53-.117-.932-.582-.932-1.146zm4.105 11.827c0 2.432 1.249 4.577 3.137 5.832-.854.59-1.904 1.03-3.137 1.168-2.492-.278-4.243-1.788-5.113-3.286-.177-.304-.494-.329-.751-.216l-2.133.952c-.441.196-.962.002-1.162-.433-.2-.435-.004-.947.438-1.144l2.017-.898c.436-.195.719-.611.625-1.217-.088-.571-.577-.882-1.054-.882h-1.989c-.486 0-.878-.386-.878-.863 0-.478.392-.865.878-.865h2.002c.46 0 .941-.294 1.03-.925.068-.483-.232-.902-.645-1.062l-1.86-.723c-.45-.175-.672-.676-.494-1.12.178-.444.689-.663 1.139-.487l1.913.742c.245.095.594.064.784-.365.15-.339.32-.655.501-.954 1.423.831 2.99 1.246 4.752 1.246 1.412 0 2.723-.297 3.933-.848l.04.056c-2.344 1.131-3.973 3.519-3.973 6.292z" />
+  </svg>
+);
+
 export const PlayStartIcon = () => (
   <svg width="24" height="24" viewBox="0 0 24 24">
     <path d="M2 3H6V21H2V3Z" />
@@ -415,6 +421,12 @@ export const ArrowIcon = () => (
   </svg>
 );
 
+export const StepIcon = () => (
+  <svg width="24" height="24" viewBox="0 0 24 24">
+    <path d="M16 8v-4l8 8-8 8v-4h-5v-8h5zm-7 0h-2v8h2v-8zm-4.014 0h-1.986v8h1.986v-8zm-3.986 0h-1v8h1v-8z" />
+  </svg>
+);
+
 export const ArrowMoveIcon = ({ style }: { style?: CSSProperties }) => (
   <svg width="24" height="24" viewBox="0 0 24 24" style={style}>
     <path d="M16 8V4L24 12L16 20V16H12V8H16ZM10 8H6V16H10V8ZM4 8H0.0139771V16H4V8Z" />
@@ -723,6 +735,18 @@ export const SlopeIcon = () => (
   </svg>
 );
 
+export const InfoIcon = () => (
+  <svg width="24" height="24" viewBox="0 0 24 24">
+    <path d="M12 0c-6.627 0-12 5.373-12 12s5.373 12 12 12 12-5.373 12-12-5.373-12-12-12zm1 18h-2v-6h-2v-2h4v8zm-1-9.75c-.69 0-1.25-.56-1.25-1.25s.56-1.25 1.25-1.25 1.25.56 1.25 1.25-.56 1.25-1.25 1.25z" />
+  </svg>
+);
+
+export const BreakpointIcon = () => (
+  <svg width="24" height="24" viewBox="0 0 24 24">
+    <path d="M15.728 3l5.272 5.272v7.456l-5.272 5.272h-7.456l-5.272-5.272v-7.456l5.272-5.272h7.456zm8.272 4.029v9.941l-7.029 7.03h-9.942l-7.029-7.029v-9.942l7.029-7.029h9.941l7.03 7.029zm-2 .829l-5.858-5.858h-8.284l-5.858 5.858v8.284l5.858 5.858h8.284l5.858-5.858v-8.284z" />{" "}
+  </svg>
+);
+
 export const SadIcon = () => (
   <svg width="1096" height="974" viewBox="0 0 1096 974" version="1.1">
     <defs>
diff --git a/src/components/ui/menu/Menu.tsx b/src/components/ui/menu/Menu.tsx
index 8fed2531f..a8ae2def3 100644
--- a/src/components/ui/menu/Menu.tsx
+++ b/src/components/ui/menu/Menu.tsx
@@ -81,6 +81,10 @@ export const MenuItemIcon = styled.div<MenuItemProps>`
     margin-left: -5px;
     margin-right: 5px;
   }
+  &:last-child:not(:first-child) {
+    margin-left: 5px;
+    margin-right: 0px;
+  }
 `;
 
 export const MenuGroup = styled.div`
diff --git a/src/components/ui/scripting/ScriptEvents.tsx b/src/components/ui/scripting/ScriptEvents.tsx
index 6220ea1bb..2ac3cc5b5 100644
--- a/src/components/ui/scripting/ScriptEvents.tsx
+++ b/src/components/ui/scripting/ScriptEvents.tsx
@@ -60,6 +60,15 @@ export const ScriptEventHeaderTitle = styled.div`
   max-width: 100%;
 `;
 
+export const ScriptEventHeaderBreakpointIndicator = styled.div`
+  display: flex;
+  svg {
+    fill: ${(props) => props.theme.colors.highlight};
+    max-width: 15px;
+    max-height: 15px;
+  }
+`;
+
 interface ScriptEventHeaderCaretProps {
   open?: boolean;
 }
@@ -78,6 +87,7 @@ interface ScriptEventHeaderProps {
   conditional: boolean;
   nestLevel: number;
   comment?: boolean;
+  isExecuting?: boolean;
   child?: boolean;
   altBg?: boolean;
 }
@@ -166,6 +176,20 @@ export const ScriptEventHeader = styled.div<ScriptEventHeaderProps>`
         `
       : ""}
 
+      ${(props) =>
+    props.isExecuting
+      ? css`
+          &&& {
+            background: ${(props) => props.theme.colors.highlight};
+            color: ${(props) => props.theme.colors.highlightText};
+
+            svg {
+              fill: ${(props) => props.theme.colors.highlightText};
+            }
+          }
+        `
+      : ""}
+    
   ${(props) =>
     props.child
       ? css`
diff --git a/src/components/ui/splitpane/SplitPaneHeader.tsx b/src/components/ui/splitpane/SplitPaneHeader.tsx
index 5612ddfe3..6b616015e 100644
--- a/src/components/ui/splitpane/SplitPaneHeader.tsx
+++ b/src/components/ui/splitpane/SplitPaneHeader.tsx
@@ -1,9 +1,10 @@
-import React, { ReactNode } from "react";
+import React, { ReactNode, useCallback } from "react";
 import styled, { css } from "styled-components";
 import { Button } from "ui/buttons/Button";
-import { CaretDownIcon, CaretRightIcon } from "ui/icons/Icons";
+import { TriangleIcon } from "ui/icons/Icons";
 
 interface SplitPaneHeaderProps {
+  variant?: "normal" | "secondary";
   children: ReactNode;
   buttons?: ReactNode;
   collapsed: boolean;
@@ -11,6 +12,7 @@ interface SplitPaneHeaderProps {
 }
 
 interface WrapperProps {
+  variant?: "normal" | "secondary";
   collapsible: boolean;
 }
 
@@ -24,10 +26,20 @@ export const Wrapper = styled.div<WrapperProps>`
   padding-right: 5px;
   padding-left: 5px;
   height: 30px;
+  flex-shrink: 0;
   background-color: ${(props) => props.theme.colors.input.background};
   color: ${(props) => props.theme.colors.input.text};
   border-bottom: 1px solid ${(props) => props.theme.colors.input.border};
 
+  ${(props) =>
+    props.variant === "secondary"
+      ? css`
+          background-color: ${(props) => props.theme.colors.sidebar.background};
+          border-bottom: 1px solid
+            ${(props) => props.theme.colors.sidebar.border};
+        `
+      : ""};
+
   ${(props) =>
     props.collapsible
       ? css`
@@ -50,15 +62,34 @@ export const Wrapper = styled.div<WrapperProps>`
   }
 `;
 
-const CollapseIcon = styled.div`
+const Buttons = styled.div`
+  display: flex;
+  align-items: center;
+`;
+
+interface CollapseIconProps {
+  collapsed: boolean;
+}
+
+const CollapseIcon = styled.div<CollapseIconProps>`
   width: 20px;
   display: flex;
   justify-content: center;
   align-items: center;
   svg {
     width: 8px;
+    transform: rotate(180deg);
     fill: ${(props) => props.theme.colors.input.text};
   }
+
+  ${(props) =>
+    props.collapsed
+      ? css`
+          svg {
+            transform: rotate(90deg);
+          }
+        `
+      : ""}
 `;
 
 export const SplitPaneHeader: React.FC<SplitPaneHeaderProps> = ({
@@ -66,16 +97,21 @@ export const SplitPaneHeader: React.FC<SplitPaneHeaderProps> = ({
   buttons,
   onToggle,
   collapsed,
+  variant,
 }) => {
+  const stopPropagation = useCallback((e: React.MouseEvent<HTMLDivElement>) => {
+    e.stopPropagation();
+  }, []);
+
   return (
-    <Wrapper onClick={onToggle} collapsible={!!onToggle}>
+    <Wrapper onClick={onToggle} collapsible={!!onToggle} variant={variant}>
       {onToggle && (
-        <CollapseIcon>
-          {collapsed ? <CaretRightIcon /> : <CaretDownIcon />}
+        <CollapseIcon collapsed={collapsed}>
+          <TriangleIcon />
         </CollapseIcon>
       )}
       <span>{children}</span>
-      {buttons}
+      {buttons && <Buttons onClick={stopPropagation}>{buttons}</Buttons>}
     </Wrapper>
   );
 };
diff --git a/src/consts.ts b/src/consts.ts
index d0707b6e9..79fbd1dff 100755
--- a/src/consts.ts
+++ b/src/consts.ts
@@ -192,6 +192,14 @@ export const defaultProjectSettings: SettingsState = {
   customControlsB: ["Control", "k", "x"],
   customControlsStart: ["Enter"],
   customControlsSelect: ["Shift"],
+  debuggerEnabled: false,
+  debuggerScriptType: "editor",
+  debuggerVariablesFilter: "all",
+  debuggerCollapsedPanes: [],
+  debuggerPauseOnScriptChanged: false,
+  debuggerPauseOnWatchedVariableChanged: false,
+  debuggerBreakpoints: [],
+  debuggerWatchedVariables: [],
 };
 
 export {
diff --git a/src/lang/en.json b/src/lang/en.json
index 34bbce860..39fbaaaf2 100644
--- a/src/lang/en.json
+++ b/src/lang/en.json
@@ -710,6 +710,33 @@
   "FIELD_MAGNITUDE": "Magnitude",
   "FIELD_MAGNITUDE_DESC": "The amount of camera movement during a camera shake.",
   "FIELD_START_BY_ADDING_SCENE": "Start by clicking here to add your first scene.",
+  "FIELD_EXPRESSION": "Expression",
+  "FIELD_EXPRESSION_DESC": "The expression to evaluate.",
+  "FIELD_VALUE_SWITCH_DESC": "The value to compare the variable with for running this branch of the script.",
+  "FIELD_VALUE_SET_DESC": "The value to set the selected variable to.",
+  "FIELD_ROUTINE": "Routine",
+  "FIELD_ROUTINE_DESC": "The music routine, either 0, 1, 2 or 3.",
+  "FIELD_DEBUGGER": "Debugger",
+  "FIELD_THREADS": "Threads",
+  "FIELD_THREAD_N": "Thread {n}",
+  "FIELD_STEP": "Step",
+  "FIELD_STEP_FRAME": "Step Frame",
+  "FIELD_PAUSE_ON_SCRIPT_CHANGE": "Pause On Script Change",
+  "FIELD_PAUSE_ON_WATCHED_VAR_CHANGE": "Pause On Watched Variable Change",
+  "FIELD_BREAKPOINTS": "Breakpoints",
+  "FIELD_BREAKPOINT": "Breakpoint",
+  "FIELD_DEBUGGER_NOT_CONNECTED": "Debugger not connected",
+  "FIELD_START_DEBUGGER": "Start Debugger",
+  "FIELD_BUILDING": "Building...",
+  "FIELD_ALL": "All",
+  "FIELD_WATCHED": "Watched",
+  "FIELD_WATCH": "Watch",
+  "FIELD_EDITOR": "Editor",
+  "FIELD_GBVM": "GBVM",
+  "FIELD_NO_SCRIPT_RUNNING": "No scripts currently running",
+  "FIELD_PAUSE_TO_VIEW_SCRIPTS": "Pause debugger to view currently running scripts",
+  "FIELD_CURRENT_STATE": "Current State",
+  "FIELD_DEBUGGER_PAUSED": "Debugger paused",
 
   "// 7": "Asset Viewer ---------------------------------------------",
   "ASSET_SEARCH": "Search...",
@@ -1041,12 +1068,6 @@
   "EVENT_LOOP_WHILE_LABEL": "While ({expression})",
   "EVENT_IF_CURRENT_SCENE_IS": "If Current Scene Is",
   "EVENT_IF_CURRENT_SCENE_IS_LABEL": "If Current Scene Is {scene}",
-  "FIELD_EXPRESSION": "Expression",
-  "FIELD_EXPRESSION_DESC": "The expression to evaluate.",
-  "FIELD_VALUE_SWITCH_DESC": "The value to compare the variable with for running this branch of the script.",
-  "FIELD_VALUE_SET_DESC": "The value to set the selected variable to.",
-  "FIELD_ROUTINE": "Routine",
-  "FIELD_ROUTINE_DESC": "The music routine, either 0, 1, 2 or 3.",
 
   "// 10": "Menu -----------------------------------------------------",
 
@@ -1061,6 +1082,7 @@
   "MENU_REDO": "Redo",
   "MENU_GAME": "Game",
   "MENU_RUN": "Run",
+  "MENU_RUN_WITH_DEBUGGING": "Run With Debugging",
   "MENU_EXPORT_AS": "Export As",
   "MENU_EXPORT_ROM": "Export ROM",
   "MENU_EXPORT_WEB": "Export Web",
@@ -1156,6 +1178,7 @@
   "MENU_SELECT_ALL": "Select All",
   "MENU_WINDOW": "Window",
   "MENU_HELP": "Help",
+  "MENU_SET_BREAKPOINT": "Set Breakpoint",
 
   "// 11": "Warnings -----------------------------------------------------",
 
diff --git a/src/lib/compiler/buildProject.ts b/src/lib/compiler/buildProject.ts
index 6a36c8972..7436758e3 100755
--- a/src/lib/compiler/buildProject.ts
+++ b/src/lib/compiler/buildProject.ts
@@ -17,6 +17,7 @@ type BuildOptions = {
   engineFields: EngineFieldSchema[];
   scriptEventHandlers: ScriptEventHandlers;
   outputRoot: string;
+  debugEnabled?: boolean;
   progress: (msg: string) => void;
   warnings: (msg: string) => void;
 };
@@ -31,6 +32,7 @@ const buildProject = async (
     engineFields = [],
     scriptEventHandlers,
     outputRoot = "/tmp/testing",
+    debugEnabled = false,
     progress = (_msg: string) => {},
     warnings = (_msg: string) => {},
   }: BuildOptions
@@ -40,6 +42,7 @@ const buildProject = async (
     engineFields,
     scriptEventHandlers,
     tmpPath,
+    debugEnabled,
     progress,
     warnings,
   });
@@ -108,6 +111,7 @@ const buildProject = async (
       `${outputRoot}/build/pocket/game.pocket`
     );
   }
+  return compiledData;
 };
 
 export default buildProject;
diff --git a/src/lib/compiler/compileData.ts b/src/lib/compiler/compileData.ts
index 1fe50c936..b7afea98b 100755
--- a/src/lib/compiler/compileData.ts
+++ b/src/lib/compiler/compileData.ts
@@ -64,6 +64,7 @@ import {
   PrecompiledScene,
   PrecompiledPalette,
   PrecompiledSceneEventPtrs,
+  sceneName,
 } from "./compileData2";
 import compileSGBImage from "./sgb";
 import { compileScriptEngineInit } from "./compileBootstrap";
@@ -114,12 +115,29 @@ import type {
 import { ensureNumber, ensureString, ensureTypeGenerator } from "shared/types";
 import { walkSceneScripts, walkScenesScripts } from "shared/lib/scripts/walk";
 import { ScriptEventHandlers } from "lib/project/loadScriptEventHandlers";
+import { EntityType } from "shared/lib/scripts/context";
 
 type TilemapData = {
   symbol: string;
   data: number[] | Uint8Array;
 };
 
+export type SceneMapData = {
+  id: string;
+  name: string;
+  symbol: string;
+};
+
+export type VariableMapData = {
+  id: string;
+  name: string;
+  symbol: string;
+  isLocal: boolean;
+  entityType: EntityType;
+  entityId: string;
+  sceneId: string;
+};
+
 const indexById = <T extends { id: string }>(arr: T[]) => keyBy(arr, "id");
 
 const isReference = (value: unknown): value is Reference =>
@@ -1269,6 +1287,7 @@ const compile = async (
     scriptEventHandlers,
     engineFields = [],
     tmpPath = "/tmp",
+    debugEnabled = false,
     progress = (_msg: string) => {},
     warnings = (_msg: string) => {},
   }: {
@@ -1276,12 +1295,18 @@ const compile = async (
     scriptEventHandlers: ScriptEventHandlers;
     engineFields: EngineFieldSchema[];
     tmpPath: string;
+    debugEnabled?: boolean;
     progress: (_msg: string) => void;
     warnings: (_msg: string) => void;
   }
-): Promise<{ files: Record<string, string> }> => {
+): Promise<{
+  files: Record<string, string>;
+  sceneMap: Record<string, SceneMapData>;
+  variableMap: Record<string, VariableMapData>;
+}> => {
   const output: Record<string, string> = {};
-  const symbols = {};
+  const symbols: Dictionary<string> = {};
+  const sceneMap: Record<string, SceneMapData> = {};
 
   if (projectData.scenes.length === 0) {
     throw new Error(
@@ -1325,11 +1350,19 @@ const compile = async (
       // Include variables referenced from GBVM
       if (variable.symbol) {
         const symbol = variable.symbol.toUpperCase();
-        memo[variable.id] = symbol;
+        memo[variable.id] = {
+          symbol,
+          id: variable.id,
+          name: variable.name,
+          isLocal: false,
+          entityType: "scene",
+          entityId: "",
+          sceneId: "",
+        };
       }
       return memo;
     },
-    {} as Record<string, string>
+    {} as Record<string, VariableMapData>
   );
 
   // Determine which scene types need to support persisting player sprite
@@ -1344,8 +1377,24 @@ const compile = async (
   persistSceneTypes.forEach((sceneType) => {
     const bankVar = `PLAYER_SPRITE_${sceneType}_BANK`;
     const dataVar = `PLAYER_SPRITE_${sceneType}_DATA`;
-    variableAliasLookup[bankVar] = bankVar;
-    variableAliasLookup[dataVar] = dataVar;
+    variableAliasLookup[bankVar] = {
+      symbol: bankVar,
+      id: "",
+      name: "Player Sprite Bank",
+      isLocal: false,
+      entityType: "scene",
+      entityId: "",
+      sceneId: "",
+    };
+    variableAliasLookup[dataVar] = {
+      symbol: dataVar,
+      id: "",
+      name: "Player Sprite Data",
+      isLocal: false,
+      entityType: "scene",
+      entityId: "",
+      sceneId: "",
+    };
     const sprite =
       precompiled.usedSprites.find(
         (sprite) =>
@@ -1358,6 +1407,10 @@ const compile = async (
   // Add event data
   const additionalScripts: Dictionary<{
     symbol: string;
+    sceneId: string;
+    entityId: string;
+    entityType: ScriptBuilderEntityType;
+    scriptKey: string;
     compiledScript: string;
   }> = {};
   const additionalOutput: Dictionary<{
@@ -1379,7 +1432,7 @@ const compile = async (
         entityIndex: number,
         loop: boolean,
         lock: boolean,
-        scriptType: string
+        scriptKey: string
       ) => {
         let scriptTypeCode = "interact";
         let scriptName = "script";
@@ -1393,7 +1446,7 @@ const compile = async (
             hit3Script: "hit3",
           };
           scriptTypeCode =
-            scriptLookup[scriptType as keyof typeof scriptLookup] ||
+            scriptLookup[scriptKey as keyof typeof scriptLookup] ||
             scriptTypeCode;
         } else if (entityType === "trigger") {
           scriptTypeCode = "interact";
@@ -1405,7 +1458,7 @@ const compile = async (
             playerHit3Script: "p_hit3",
           };
           scriptTypeCode =
-            scriptLookup[scriptType as keyof typeof scriptLookup] ||
+            scriptLookup[scriptKey as keyof typeof scriptLookup] ||
             scriptTypeCode;
         }
         scriptName = `${entity.symbol}_${scriptTypeCode}`;
@@ -1440,6 +1493,7 @@ const compile = async (
           variableAliasLookup,
           entityType,
           entityIndex,
+          entityScriptKey: scriptKey,
           entity,
           warnings,
           loop,
@@ -1453,10 +1507,12 @@ const compile = async (
           compiledAssetsCache,
           branch: false,
           isFunction: false,
+          debugEnabled,
         });
 
         output[`${scriptName}.s`] = compiledScript;
         output[`${scriptName}.h`] = compileScriptHeader(scriptName);
+
         return scriptName;
       };
 
@@ -1477,6 +1533,7 @@ const compile = async (
                     entity: actor,
                     entityType: "actor",
                     entityId: actor.id,
+                    scriptKey: "startScript",
                   },
                 } as ScriptEvent,
                 actorStartScript.filter((event) => event.command !== EVENT_END)
@@ -1491,6 +1548,7 @@ const compile = async (
                   entity: scene,
                   entityType: "scene",
                   entityId: scene.id,
+                  scriptKey: "script",
                 },
               }
             : [],
@@ -1517,11 +1575,11 @@ VM_ACTOR_SET_SPRITESHEET_BY_REF .ARG2, .ARG1`,
             customEventsLookup,
             scriptEventHandlers
           );
-          const autoFadeIndex = autoFadeId ? initScript.findIndex(
-            (item) => item.id === autoFadeId
-          ) : -1;
+          const autoFadeIndex = autoFadeId
+            ? initScript.findIndex((item) => item.id === autoFadeId)
+            : -1;
           const fadeEvent = {
-            id: "",
+            id: "autofade",
             command: "EVENT_FADE_IN",
             args: {
               speed: scene.autoFadeSpeed,
@@ -1665,12 +1723,11 @@ VM_ACTOR_SET_SPRITESHEET_BY_REF .ARG2, .ARG1`,
     }
   );
 
-  (
-    Object.values(additionalScripts) as {
-      symbol: string;
-      compiledScript: string;
-    }[]
-  ).forEach((additional) => {
+  Object.values(additionalScripts).forEach((additional) => {
+    if (!additional) {
+      return;
+    }
+
     output[`${additional.symbol}.s`] = additional.compiledScript;
     output[`${additional.symbol}.h`] = compileScriptHeader(additional.symbol);
   });
@@ -1766,6 +1823,12 @@ VM_ACTOR_SET_SPRITESHEET_BY_REF .ARG2, .ARG1`,
     const bgPalette = precompiled.scenePaletteIndexes[scene.id] || 0;
     const actorsPalette = precompiled.sceneActorPaletteIndexes[scene.id] || 0;
 
+    sceneMap[scene.symbol] = {
+      id: scene.id,
+      name: sceneName(scene, sceneIndex),
+      symbol: scene.symbol,
+    };
+
     output[`${scene.symbol}.c`] = compileScene(scene, sceneIndex, {
       bgPalette,
       actorsPalette,
@@ -1867,6 +1930,9 @@ VM_ACTOR_SET_SPRITESHEET_BY_REF .ARG2, .ARG1`,
     variableAliasLookup,
     precompiled.stateReferences
   );
+
+  const variableMap = keyBy(Object.values(variableAliasLookup), "symbol");
+
   output[`script_engine_init.s`] = compileScriptEngineInit({
     startX,
     startY,
@@ -1923,6 +1989,8 @@ VM_ACTOR_SET_SPRITESHEET_BY_REF .ARG2, .ARG1`,
 
   return {
     files: output,
+    sceneMap,
+    variableMap,
   };
 };
 
diff --git a/src/lib/compiler/compileData2.ts b/src/lib/compiler/compileData2.ts
index f4f8a83e5..991d60dc6 100644
--- a/src/lib/compiler/compileData2.ts
+++ b/src/lib/compiler/compileData2.ts
@@ -1110,10 +1110,12 @@ export const compileScriptHeader = (scriptName: string) =>
   toArrayDataHeader(DATA_TYPE, scriptName, `// Script ${scriptName}`);
 
 export const compileGameGlobalsInclude = (
-  variableAliasLookup: Dictionary<string>,
+  variableAliasLookup: Dictionary<{ symbol: string }>,
   stateReferences: string[]
 ) => {
-  const variables = Object.values(variableAliasLookup) as string[];
+  const variables = Object.values(variableAliasLookup).map(
+    (v) => v?.symbol
+  ) as string[];
   return (
     variables
       .map((string, stringIndex) => {
diff --git a/src/lib/compiler/compileEntityEvents.ts b/src/lib/compiler/compileEntityEvents.ts
index b022df321..47c1e77ce 100644
--- a/src/lib/compiler/compileEntityEvents.ts
+++ b/src/lib/compiler/compileEntityEvents.ts
@@ -23,6 +23,7 @@ type CompileEntityEventsOptions = Partial<ScriptBuilderOptions> & {
   entity?: ScriptBuilderEntity;
   entityType: string;
   entityIndex: number;
+  debugEnabled: boolean;
   warnings: (msg: string) => void;
 };
 
@@ -74,6 +75,8 @@ const compileEntityEvents = (
         continue;
       }
       if (scriptEventHandlers[command]) {
+        scriptBuilder.addDebugSymbol(scriptSymbolName, subInput[i].id);
+
         try {
           scriptEventHandlers[command]?.compile(
             { ...subInput[i].args, ...subInput[i].children },
@@ -92,11 +95,15 @@ const compileEntityEvents = (
             )}`
           );
         }
+        if (scriptEventHandlers[command]?.isConditional) {
+          scriptBuilder.addDebugEndSymbol(scriptSymbolName, subInput[i].id);
+        }
       } else if (command === "INTERNAL_SET_CONTEXT") {
         const args = subInput[i].args ?? {};
         scriptBuilder.options.entity = args.entity as ScriptBuilderEntity;
         scriptBuilder.options.entityType =
           args.entityType as ScriptBuilderEntityType;
+        scriptBuilder.options.entityScriptKey = String(args.scriptKey);
       } else if (command === "INTERNAL_IF_PARAM") {
         const args = subInput[i].args;
         scriptBuilder.ifParamValue(
diff --git a/src/lib/compiler/scriptBuilder.ts b/src/lib/compiler/scriptBuilder.ts
index 8fe9e29ff..94e1b2434 100644
--- a/src/lib/compiler/scriptBuilder.ts
+++ b/src/lib/compiler/scriptBuilder.ts
@@ -55,6 +55,7 @@ import {
 import { encodeString } from "shared/lib/helpers/fonts";
 import { mapScript } from "shared/lib/scripts/walk";
 import { ScriptEventHandlers } from "lib/project/loadScriptEventHandlers";
+import { VariableMapData } from "lib/compiler/compileData";
 
 export type ScriptOutput = string[];
 
@@ -78,7 +79,11 @@ interface ScriptBuilderProjectile {
   collisionMask: string[];
 }
 
-export type ScriptBuilderEntityType = "scene" | "actor" | "trigger";
+export type ScriptBuilderEntityType =
+  | "scene"
+  | "actor"
+  | "trigger"
+  | "customEvent";
 
 type ScriptBuilderStackVariable = string | number;
 
@@ -107,8 +112,9 @@ export interface ScriptBuilderOptions {
   sceneIndex: number;
   entityIndex: number;
   entityType: ScriptBuilderEntityType;
+  entityScriptKey: string;
   variablesLookup: VariablesLookup;
-  variableAliasLookup: Dictionary<string>;
+  variableAliasLookup: Dictionary<VariableMapData>;
   scenes: PrecompiledScene[];
   sprites: PrecompiledSprite[];
   backgrounds: PrecompiledBackground[];
@@ -140,6 +146,7 @@ export interface ScriptBuilderOptions {
     scriptRef: string;
     argsLen: number;
   }>;
+  debugEnabled: boolean;
   compiledAssetsCache: Dictionary<string>;
   compileEvents: (self: ScriptBuilder, events: ScriptEvent[]) => void;
 }
@@ -504,6 +511,7 @@ class ScriptBuilder {
       sceneIndex: options.sceneIndex || 0,
       entityIndex: options.entityIndex || 0,
       entityType: options.entityType || "scene",
+      entityScriptKey: options.entityScriptKey || "script",
       variablesLookup: options.variablesLookup || {},
       variableAliasLookup: options.variableAliasLookup || {},
       engineFields: options.engineFields || {},
@@ -525,6 +533,7 @@ class ScriptBuilder {
       symbols: options.symbols || {},
       argLookup: options.argLookup || { actor: new Map(), variable: new Map() },
       maxDepth: options.maxDepth ?? 5,
+      debugEnabled: options.debugEnabled ?? false,
       compiledCustomEventScriptCache:
         options.compiledCustomEventScriptCache ?? {},
       compiledAssetsCache: options.compiledAssetsCache ?? {},
@@ -3520,7 +3529,12 @@ extern void __mute_mask_${symbol};
     const result = { scriptRef: symbol, argsLen };
     compiledCustomEventScriptCache[customEventId] = result;
 
-    this._compileSubScript("custom", script, symbol, { argLookup });
+    this._compileSubScript("custom", script, symbol, {
+      argLookup,
+      entity: customEvent,
+      entityType: "customEvent",
+      entityScriptKey: "script",
+    });
 
     return result;
   };
@@ -3670,6 +3684,7 @@ extern void __mute_mask_${symbol};
       entityType,
       variablesLookup,
       variableAliasLookup,
+      scene,
     } = this.options;
 
     const id = getVariableId(variable, entity);
@@ -3677,18 +3692,27 @@ extern void __mute_mask_${symbol};
     const namedVariable = variablesLookup[id || "0"];
     if (namedVariable && namedVariable.symbol && !isVariableLocal(variable)) {
       const symbol = namedVariable.symbol.toUpperCase();
-      variableAliasLookup[id] = symbol;
+      variableAliasLookup[id] = {
+        symbol,
+        name: namedVariable.name,
+        id: namedVariable.id,
+        isLocal: false,
+        entityType: "scene",
+        entityId: "",
+        sceneId: "",
+      };
       return symbol;
     }
 
     // If already got an alias use that
     const existingAlias = variableAliasLookup[id || "0"];
     if (existingAlias) {
-      return existingAlias;
+      return existingAlias.symbol;
     }
 
     let name = "";
-    if (entity && isVariableLocal(variable)) {
+    const isLocal = isVariableLocal(variable);
+    if (entity && isLocal) {
       const num = toVariableNumber(variable);
       const localName = localVariableName(num, entity.id, variablesLookup);
       if (entityType === "scene") {
@@ -3703,7 +3727,7 @@ extern void __mute_mask_${symbol};
       name = tempVariableName(num);
     } else {
       const num = toVariableNumber(variable || "0");
-      name = globalVariableDefaultName(num);
+      name = namedVariable?.name ?? globalVariableDefaultName(num);
     }
 
     const alias = "VAR_" + toASMVar(name);
@@ -3711,14 +3735,22 @@ extern void __mute_mask_${symbol};
     let counter = 1;
 
     // Make sure new alias is unique
-    const aliases = Object.values(variableAliasLookup) as string[];
+    const aliases = Object.values(variableAliasLookup).map((v) => v?.symbol);
     while (aliases.includes(newAlias)) {
       newAlias = `${alias}_${counter}`;
       counter++;
     }
 
     // New Alias is now unique
-    variableAliasLookup[id] = newAlias;
+    variableAliasLookup[id] = {
+      symbol: newAlias,
+      id,
+      name,
+      isLocal,
+      entityType,
+      entityId: entity?.id ?? "",
+      sceneId: scene?.id ?? "",
+    };
 
     return newAlias;
   };
@@ -5084,6 +5116,7 @@ extern void __mute_mask_${symbol};
         isFunction: type === "custom",
         maxDepth: this.options.maxDepth - 1,
         branch: false,
+        debugEnabled: this.options.debugEnabled,
         warnings: (msg: string) => {
           console.error(msg);
         },
@@ -5135,6 +5168,47 @@ extern void __mute_mask_${symbol};
     return this._getAvailableSymbol(name);
   };
 
+  // --------------------------------------------------------------------------
+  // Debuger
+
+  addDebugSymbol = (scriptSymbolName: string, scriptEventId: string) => {
+    if (this.options.debugEnabled) {
+      const debugSymbol = (
+        scriptEventId === "autofade"
+          ? [
+              scriptSymbolName,
+              scriptEventId,
+              this.options.scene?.id ?? "",
+              "scene",
+              this.options.scene?.id ?? "",
+              "script",
+            ]
+          : [
+              scriptSymbolName,
+              scriptEventId,
+              this.options.scene?.id ?? "",
+              this.options.entityType,
+              this.options.entity?.id ?? "",
+              this.options.entityScriptKey ?? "script",
+            ]
+      )
+        .map((i) => i.replace(/-/g, "_"))
+        .join("$");
+      this.output.push(`GBVM$${debugSymbol} = .`);
+      this.output.push(`.globl GBVM$${debugSymbol}`);
+    }
+  };
+
+  addDebugEndSymbol = (scriptSymbolName: string, scriptEventId: string) => {
+    if (this.options.debugEnabled) {
+      const debugSymbol = [scriptSymbolName, scriptEventId]
+        .map((i) => i.replace(/-/g, "_"))
+        .join("$");
+      this.output.push(`GBVM_END$${debugSymbol} = .`);
+      this.output.push(`.globl GBVM_END$${debugSymbol}`);
+    }
+  };
+
   // --------------------------------------------------------------------------
   // Export
 
diff --git a/src/lib/debugger/readDebuggerSymbols.ts b/src/lib/debugger/readDebuggerSymbols.ts
new file mode 100644
index 000000000..cb39f6a16
--- /dev/null
+++ b/src/lib/debugger/readDebuggerSymbols.ts
@@ -0,0 +1,26 @@
+import { readFile } from "fs-extra";
+
+export const readDebuggerSymbols = async (outputRoot: string) => {
+  const noi = await readFile(`${outputRoot}/build/rom/game.noi`, "utf8");
+
+  const memoryMap: Record<string, number> = Object.fromEntries(
+    noi
+      .split("\n")
+      .map((r) => r.split(" ").slice(1, 3))
+      .map((_, i, keys) => [keys[i][0], parseInt(keys[i][1], 16) & 0xffff])
+  );
+
+  const gameGlobals = await readFile(
+    outputRoot + "/include/data/game_globals.i",
+    "utf8"
+  );
+
+  const globalVariables: Record<string, number> = Object.fromEntries(
+    gameGlobals
+      .split("\n")
+      .map((r) => r.split(" = "))
+      .map((_, i, keys) => [keys[i][0], parseInt(keys[i][1], 10)])
+  );
+
+  return { memoryMap, globalVariables };
+};
diff --git a/src/main.ts b/src/main.ts
index 0c13cfd3b..9a8a91be7 100755
--- a/src/main.ts
+++ b/src/main.ts
@@ -92,6 +92,13 @@ import loadAllScriptEventHandlers, {
   ScriptEventHandlers,
 } from "lib/project/loadScriptEventHandlers";
 import { cloneDictionary } from "lib/helpers/clone";
+import { readDebuggerSymbols } from "lib/debugger/readDebuggerSymbols";
+import {
+  DebuggerDataPacket,
+  DebuggerInitData,
+} from "shared/lib/debugger/types";
+import pickBy from "lodash/pickBy";
+import keyBy from "lodash/keyBy";
 
 declare const MAIN_WINDOW_PRELOAD_WEBPACK_ENTRY: string;
 declare const MAIN_WINDOW_WEBPACK_ENTRY: string;
@@ -101,6 +108,7 @@ declare const PREFERENCES_WINDOW_PRELOAD_WEBPACK_ENTRY: string;
 declare const PREFERENCES_WINDOW_WEBPACK_ENTRY: string;
 declare const MUSIC_WINDOW_PRELOAD_WEBPACK_ENTRY: string;
 declare const MUSIC_WINDOW_WEBPACK_ENTRY: string;
+declare const GAME_WINDOW_PRELOAD_WEBPACK_ENTRY: string;
 
 type SplashTab = "info" | "new" | "recent";
 
@@ -127,6 +135,7 @@ let keepOpen = false;
 let projectPath = "";
 let cancelBuild = false;
 let musicWindowInitialized = false;
+let debuggerInitData: DebuggerInitData | null = null;
 let stopWatchingFn: (() => void) | null = null;
 let scriptEventHandlers: ScriptEventHandlers = {};
 
@@ -438,6 +447,10 @@ const sendToMusicWindow = (channel: string, ...args: unknown[]) => {
   musicWindow?.webContents.send(channel, ...args);
 };
 
+const sendToGameWindow = (channel: string, ...args: unknown[]) => {
+  playWindow?.webContents.send(channel, ...args);
+};
+
 const buildLog = (msg: string) => sendToProjectWindow("build:log", msg);
 const buildErr = (msg: string) => sendToProjectWindow("build:error", msg);
 
@@ -483,7 +496,11 @@ const openHelp = async (helpPage: string) => {
   }
 };
 
-const createPlay = async (url: string, sgb: boolean) => {
+const createPlay = async (
+  url: string,
+  sgb: boolean,
+  debugEnabled?: boolean
+) => {
   if (playWindow && sgb !== playWindowSgb) {
     playWindow.close();
     playWindow = null;
@@ -501,18 +518,25 @@ const createPlay = async (url: string, sgb: boolean) => {
         contextIsolation: true,
         nodeIntegration: false,
         webSecurity: process.env.NODE_ENV !== "development",
+        preload: GAME_WINDOW_PRELOAD_WEBPACK_ENTRY,
       },
     });
+    playWindow.setAlwaysOnTop(true);
     playWindowSgb = sgb;
   } else {
     playWindow.show();
   }
 
   playWindow.setMenu(null);
-  playWindow.loadURL(`${url}?audio=true&sgb=${sgb ? "true" : "false"}`);
+  playWindow.loadURL(
+    `${url}?audio=true&sgb=${sgb ? "true" : "false"}&debug=${
+      !!debugEnabled && !!debuggerInitData ? "true" : "false"
+    }`
+  );
 
   playWindow.on("closed", () => {
     playWindow = null;
+    sendToProjectWindow("debugger:disconnected");
   });
 };
 
@@ -661,10 +685,6 @@ ipcMain.handle("open-help", async (_event, helpPage) => {
   openHelp(helpPage);
 });
 
-ipcMain.on("open-play", async (_event, url, sgb) => {
-  createPlay(url, sgb);
-});
-
 ipcMain.handle("open-folder", async (_event, path) => {
   if (!isString(path)) throw new Error("Invalid Path");
   // @TODO Confirm that folder is within project
@@ -884,6 +904,80 @@ ipcMain.on("music:data-receive", (_event, data: MusicDataReceivePacket) => {
   }
 });
 
+ipcMain.on("debugger:data-receive", (_event, data: DebuggerDataPacket) => {
+  if (data.action === "initialized" && debuggerInitData) {
+    sendToGameWindow("debugger:data", {
+      action: "listener-ready",
+      data: debuggerInitData,
+    });
+  }
+  if (projectWindow) {
+    sendToProjectWindow("debugger:data", data);
+  }
+});
+
+ipcMain.handle("debugger:resume", (_event) => {
+  sendToGameWindow("debugger:data", {
+    action: "resume",
+  });
+});
+
+ipcMain.handle("debugger:pause", (_event) => {
+  sendToGameWindow("debugger:data", {
+    action: "pause",
+  });
+});
+
+ipcMain.handle("debugger:step", (_event) => {
+  sendToGameWindow("debugger:data", {
+    action: "step",
+  });
+});
+
+ipcMain.handle("debugger:step-frame", (_event) => {
+  sendToGameWindow("debugger:data", {
+    action: "step-frame",
+  });
+});
+
+ipcMain.handle("debugger:pause-on-script", (_event, enabled: boolean) => {
+  sendToGameWindow("debugger:data", {
+    action: "pause-on-script",
+    data: enabled,
+  });
+});
+
+ipcMain.handle("debugger:pause-on-var", (_event, enabled: boolean) => {
+  sendToGameWindow("debugger:data", {
+    action: "pause-on-var",
+    data: enabled,
+  });
+});
+
+ipcMain.handle(
+  "debugger:set-global",
+  (_event, symbol: string, value: number) => {
+    sendToGameWindow("debugger:data", {
+      action: "set-global",
+      data: { symbol, value },
+    });
+  }
+);
+
+ipcMain.handle("debugger:set-breakpoints", (_event, breakpoints: string[]) => {
+  sendToGameWindow("debugger:data", {
+    action: "set-breakpoints",
+    data: breakpoints,
+  });
+});
+
+ipcMain.handle("debugger:set-watched", (_event, variableIds: string[]) => {
+  sendToGameWindow("debugger:data", {
+    action: "set-watched",
+    data: variableIds,
+  });
+});
+
 ipcMain.handle("get-l10n-strings", () => getL10NData());
 ipcMain.handle("get-theme", () => {
   const themeId = toThemeId(
@@ -956,14 +1050,17 @@ ipcMain.handle(
     const outputRoot = Path.normalize(`${getTmp()}/${buildUUID}`);
     const colorEnabled = project.settings.customColorsEnabled;
     const sgbEnabled = project.settings.sgbEnabled;
+    const debuggerEnabled =
+      options.debugEnabled || project.settings.debuggerEnabled;
 
     try {
-      await buildProject(project, {
+      const compiledData = await buildProject(project, {
         ...options,
         projectRoot,
         outputRoot,
         scriptEventHandlers,
         tmpPath: getTmp(),
+        debugEnabled: debuggerEnabled,
         progress: (message) => {
           if (cancelBuild) {
             throw new Error("BUILD_CANCELLED");
@@ -1003,9 +1100,35 @@ ipcMain.handle(
       if (buildType === "web" && !exportBuild) {
         buildLog(`-`);
         buildLog(`Success! Starting emulator...`);
+        if (debuggerEnabled) {
+          const { memoryMap, globalVariables } = await readDebuggerSymbols(
+            outputRoot
+          );
+          debuggerInitData = {
+            memoryMap,
+            globalVariables,
+            pauseOnScriptChanged: project.settings.debuggerPauseOnScriptChanged,
+            pauseOnWatchedVariableChanged:
+              project.settings.debuggerPauseOnWatchedVariableChanged,
+            breakpoints: project.settings.debuggerBreakpoints.map(
+              (breakpoint) => breakpoint.scriptEventId
+            ),
+            watchedVariables: project.settings.debuggerWatchedVariables,
+            variableMap: keyBy(Object.values(compiledData.variableMap), "id"),
+          };
+          const gbvmScripts = pickBy(compiledData.files, (_, key) =>
+            key.endsWith(".s")
+          );
+          sendToProjectWindow("debugger:symbols", {
+            variableMap: compiledData.variableMap,
+            sceneMap: compiledData.sceneMap,
+            gbvmScripts,
+          });
+        }
         createPlay(
           `file://${outputRoot}/build/web/index.html`,
-          sgbEnabled && !colorEnabled
+          sgbEnabled && !colorEnabled,
+          debuggerEnabled
         );
       }
 
@@ -1372,8 +1495,8 @@ menu.on("zoom", (zoomType) => {
   sendToProjectWindow("menu:zoom", zoomType);
 });
 
-menu.on("run", () => {
-  sendToProjectWindow("menu:run");
+menu.on("run", (debugEnabled) => {
+  sendToProjectWindow("menu:run", debugEnabled);
 });
 
 menu.on("build", (buildType) => {
diff --git a/src/menu.ts b/src/menu.ts
index 03114d950..cf0cf9299 100755
--- a/src/menu.ts
+++ b/src/menu.ts
@@ -192,7 +192,14 @@ const buildMenu = async (plugins: MenuItemConstructorOptions[] = []) => {
           label: l10n("MENU_RUN"),
           accelerator: "CommandOrControl+B",
           click: () => {
-            notifyListeners("run");
+            notifyListeners("run", false);
+          },
+        },
+        {
+          label: l10n("MENU_RUN_WITH_DEBUGGING"),
+          accelerator: "CommandOrControl+Alt+B",
+          click: () => {
+            notifyListeners("run", true);
           },
         },
         {
diff --git a/src/renderer/lib/api/setup.ts b/src/renderer/lib/api/setup.ts
index 6d1391a7b..7614e5d86 100644
--- a/src/renderer/lib/api/setup.ts
+++ b/src/renderer/lib/api/setup.ts
@@ -32,8 +32,10 @@ import type { FontAssetData } from "lib/project/loadFontData";
 import type { AvatarAssetData } from "lib/project/loadAvatarData";
 import type { EmoteAssetData } from "lib/project/loadEmoteData";
 import type { NavigationSection } from "store/features/navigation/navigationState";
-import { ScriptEventDefs } from "shared/lib/scripts/scriptDefHelpers";
+import type { ScriptEventDefs } from "shared/lib/scripts/scriptDefHelpers";
 import type { MenuZoomType } from "menu";
+import type { DebuggerDataPacket } from "shared/lib/debugger/types";
+import type { SceneMapData, VariableMapData } from "lib/compiler/compileData";
 
 interface L10NLookup {
   [key: string]: string | boolean | undefined;
@@ -44,6 +46,7 @@ export type BuildOptions = {
   profile: boolean;
   engineFields: EngineFieldSchema[];
   exportBuild: boolean;
+  debugEnabled?: boolean;
 };
 
 const createSubscribeAPI = <
@@ -275,6 +278,24 @@ const APISetup = {
     writeBuffer: (format: string, buffer: Buffer): Promise<void> =>
       ipcRenderer.invoke("clipboard:write-buffer", format, buffer),
   },
+  debugger: {
+    pause: () => ipcRenderer.invoke("debugger:pause"),
+    resume: () => ipcRenderer.invoke("debugger:resume"),
+    setPauseOnScriptChanged: (enabled: boolean) =>
+      ipcRenderer.invoke("debugger:pause-on-script", enabled),
+    setPauseOnWatchVariableChanged: (enabled: boolean) =>
+      ipcRenderer.invoke("debugger:pause-on-var", enabled),
+    setGlobal: (symbol: string, value: number) =>
+      ipcRenderer.invoke("debugger:set-global", symbol, value),
+    step: () => ipcRenderer.invoke("debugger:step"),
+    stepFrame: () => ipcRenderer.invoke("debugger:step-frame"),
+    setBreakpoints: (breakpoints: string[]) =>
+      ipcRenderer.invoke("debugger:set-breakpoints", breakpoints),
+    setWatchedVariableIds: (variableIds: string[]) =>
+      ipcRenderer.invoke("debugger:set-watched", variableIds),
+    sendToProjectWindow: (data: DebuggerDataPacket) =>
+      ipcRenderer.send("debugger:data-receive", data),
+  },
   events: {
     menu: {
       saveProject:
@@ -303,7 +324,9 @@ const APISetup = {
       zoom: createSubscribeAPI<
         (event: IpcRendererEvent, zoom: MenuZoomType) => void
       >("menu:zoom"),
-      run: createSubscribeAPI<(event: IpcRendererEvent) => void>("menu:run"),
+      run: createSubscribeAPI<
+        (event: IpcRendererEvent, debugEnabled: boolean) => void
+      >("menu:run"),
       build:
         createSubscribeAPI<
           (event: IpcRendererEvent, buildType: BuildType) => void
@@ -330,6 +353,25 @@ const APISetup = {
         (event: IpcRendererEvent, data: MusicDataPacket) => void
       >("music:data"),
     },
+    debugger: {
+      data: createSubscribeAPI<
+        (event: IpcRendererEvent, data: DebuggerDataPacket) => void
+      >("debugger:data"),
+      symbols:
+        createSubscribeAPI<
+          (
+            event: IpcRendererEvent,
+            data: {
+              variableMap: Record<string, VariableMapData>;
+              sceneMap: Record<string, SceneMapData>;
+              gbvmScripts: Record<string, string>;
+            }
+          ) => void
+        >("debugger:symbols"),
+      disconnected: createSubscribeAPI<(event: IpcRendererEvent) => void>(
+        "debugger:disconnected"
+      ),
+    },
     settings: {
       uiScaleChanged: createSubscribeAPI<
         (event: IpcRendererEvent, scale: number) => void
diff --git a/src/renderer/lib/variables.tsx b/src/renderer/lib/variables.tsx
index 3f13679da..74ff956af 100644
--- a/src/renderer/lib/variables.tsx
+++ b/src/renderer/lib/variables.tsx
@@ -1,4 +1,4 @@
-import { ScriptEditorContextType } from "shared/lib/scripts/context";
+import { ScriptEditorCtx } from "shared/lib/scripts/context";
 import uniq from "lodash/uniq";
 import {
   CustomEventNormalized,
@@ -43,18 +43,17 @@ export interface VariableGroup {
  */
 
 export const namedVariablesByContext = (
-  context: ScriptEditorContextType,
-  entityId: string,
+  context: ScriptEditorCtx,
   variablesLookup: VariablesLookup,
   customEvent: CustomEventNormalized | undefined
 ): NamedVariable[] => {
-  if (context === "script") {
+  if (context.type === "script") {
     if (customEvent) {
       return namedCustomEventVariables(customEvent, variablesLookup);
     }
     return [];
-  } else if (context === "entity") {
-    return namedEntityVariables(entityId, variablesLookup);
+  } else if (context.type === "entity") {
+    return namedEntityVariables(context.entityId, variablesLookup);
   } else {
     return namedGlobalVariables(variablesLookup);
   }
diff --git a/src/shared/lib/debugger/types.ts b/src/shared/lib/debugger/types.ts
new file mode 100644
index 000000000..875cce606
--- /dev/null
+++ b/src/shared/lib/debugger/types.ts
@@ -0,0 +1,43 @@
+import type { VariableMapData } from "lib/compiler/compileData";
+import type { EntityType } from "shared/lib/scripts/context";
+
+export type DebuggerScriptContext = {
+  address: number;
+  bank: number;
+  current: boolean;
+  closestSymbol: string;
+  closestGBVMSymbol?: {
+    scriptSymbol: string;
+    scriptEventId: string;
+    sceneId: string;
+    entityType: EntityType;
+    entityId: string;
+    scriptKey: string;
+  };
+};
+
+export type DebuggerDataPacket =
+  | {
+      action: "initialized";
+    }
+  | {
+      action: "update-globals";
+      data: number[];
+      vram: string;
+      isPaused: boolean;
+      scriptContexts: DebuggerScriptContext[];
+      currentSceneSymbol: string;
+      currentScriptSymbol: string;
+      currentScriptAddr: number;
+      currentScriptPCAddr: number;
+    };
+
+export type DebuggerInitData = {
+  memoryMap: Record<string, number>;
+  globalVariables: Record<string, number>;
+  pauseOnScriptChanged: boolean;
+  pauseOnWatchedVariableChanged: boolean;
+  breakpoints: string[];
+  watchedVariables: string[];
+  variableMap: Record<string, VariableMapData>;
+};
diff --git a/src/shared/lib/scripts/context.ts b/src/shared/lib/scripts/context.ts
index 42d4152c1..a0a4f576f 100644
--- a/src/shared/lib/scripts/context.ts
+++ b/src/shared/lib/scripts/context.ts
@@ -1,3 +1,14 @@
+export type EntityType = "scene" | "actor" | "trigger" | "customEvent";
+
+export type ScriptEditorCtx = {
+  type: "entity" | "script" | "global";
+  sceneId: string;
+  entityId: string;
+  entityType: EntityType;
+  scriptKey: string;
+  executingId?: string;
+};
+
 export type ScriptEditorContextType = "entity" | "script" | "global";
 
 export const defaultVariableForContext = (
diff --git a/src/shared/lib/scripts/scriptDefHelpers.ts b/src/shared/lib/scripts/scriptDefHelpers.ts
index 95f68adf0..2a93b7973 100644
--- a/src/shared/lib/scripts/scriptDefHelpers.ts
+++ b/src/shared/lib/scripts/scriptDefHelpers.ts
@@ -29,7 +29,9 @@ export const isFieldVisible = (
       (!condition.gte || Number(keyValue) >= Number(condition.gte)) &&
       (!condition.lt || Number(keyValue) > Number(condition.lt)) &&
       (!condition.lte || Number(keyValue) >= Number(condition.lte)) &&
-      (!condition.in || condition.in.indexOf(keyValue) >= 0) &&
+      (!condition.in ||
+        condition.in.indexOf(keyValue) >= 0 ||
+        (keyValue === undefined && condition.in.indexOf(null) >= 0)) &&
       (condition.set === undefined ||
         (condition.set && keyValue !== undefined) ||
         (!condition.set && keyValue === undefined))
diff --git a/src/store/features/buildGame/buildGameActions.ts b/src/store/features/buildGame/buildGameActions.ts
index b5bd44230..58c2f6137 100644
--- a/src/store/features/buildGame/buildGameActions.ts
+++ b/src/store/features/buildGame/buildGameActions.ts
@@ -9,18 +9,22 @@ const buildGame = createAction(
     {
       buildType = "web",
       exportBuild = false,
+      debugEnabled = false,
     }: {
       buildType?: BuildType;
       exportBuild?: boolean;
+      debugEnabled?: boolean;
     } = {
       buildType: "web",
       exportBuild: false,
+      debugEnabled: false,
     }
   ) => {
     return {
       payload: {
         buildType,
         exportBuild,
+        debugEnabled,
       },
     };
   }
diff --git a/src/store/features/buildGame/buildGameMiddleware.ts b/src/store/features/buildGame/buildGameMiddleware.ts
index 65c97c91d..5f00aefd3 100644
--- a/src/store/features/buildGame/buildGameMiddleware.ts
+++ b/src/store/features/buildGame/buildGameMiddleware.ts
@@ -12,7 +12,7 @@ const buildGameMiddleware: Middleware<Dispatch, RootState> =
       const state = store.getState();
       const dispatch = store.dispatch.bind(store);
 
-      const { buildType, exportBuild } = action.payload;
+      const { buildType, exportBuild, debugEnabled } = action.payload;
 
       if (state.console.status === "cancelled") {
         // Wait until cancel is complete before allowing another build
@@ -36,6 +36,7 @@ const buildGameMiddleware: Middleware<Dispatch, RootState> =
           engineFields,
           profile: state.editor.profile,
           exportBuild,
+          debugEnabled,
         });
       } catch (e) {
         dispatch(navigationActions.setSection("build"));
diff --git a/src/store/features/debugger/debuggerActions.ts b/src/store/features/debugger/debuggerActions.ts
new file mode 100644
index 000000000..6ef8dbeed
--- /dev/null
+++ b/src/store/features/debugger/debuggerActions.ts
@@ -0,0 +1,3 @@
+import { actions } from "./debuggerState";
+
+export default actions;
diff --git a/src/store/features/debugger/debuggerState.ts b/src/store/features/debugger/debuggerState.ts
new file mode 100644
index 000000000..08f74be1f
--- /dev/null
+++ b/src/store/features/debugger/debuggerState.ts
@@ -0,0 +1,78 @@
+import { createSlice, PayloadAction } from "@reduxjs/toolkit";
+import type { SceneMapData, VariableMapData } from "lib/compiler/compileData";
+import isEqual from "lodash/isEqual";
+import type { DebuggerScriptContext } from "shared/lib/debugger/types";
+
+export interface DebuggerState {
+  initialized: boolean;
+  variableSymbols: string[];
+  variableDataBySymbol: Record<string, VariableMapData>;
+  gbvmScripts: Record<string, string>;
+  sceneMap: Record<string, SceneMapData>;
+  vramPreview: string;
+  variablesData: number[];
+  scriptContexts: DebuggerScriptContext[];
+  currentSceneSymbol: string;
+  isPaused: boolean;
+}
+
+export const initialState: DebuggerState = {
+  initialized: false,
+  variableSymbols: [],
+  variableDataBySymbol: {},
+  gbvmScripts: {},
+  sceneMap: {},
+  vramPreview: "",
+  variablesData: [],
+  scriptContexts: [],
+  currentSceneSymbol: "",
+  isPaused: true,
+};
+
+const debuggerSlice = createSlice({
+  name: "debug",
+  initialState,
+  reducers: {
+    disconnect: (state) => {
+      state.initialized = false;
+    },
+    setSymbols: (
+      state,
+      action: PayloadAction<{
+        variableDataBySymbol: Record<string, VariableMapData>;
+        sceneMap: Record<string, SceneMapData>;
+        gbvmScripts: Record<string, string>;
+      }>
+    ) => {
+      state.variableDataBySymbol = action.payload.variableDataBySymbol;
+      state.sceneMap = action.payload.sceneMap;
+      state.gbvmScripts = action.payload.gbvmScripts;
+      state.variableSymbols = Object.keys(state.variableDataBySymbol);
+      state.initialized = true;
+    },
+    setRAMData: (
+      state,
+      action: PayloadAction<{
+        vramPreview: string;
+        variablesData: number[];
+        scriptContexts: DebuggerScriptContext[];
+        currentSceneSymbol: string;
+        isPaused: boolean;
+      }>
+    ) => {
+      state.isPaused = action.payload.isPaused;
+      state.vramPreview = action.payload.vramPreview;
+      if (!isEqual(state.variablesData, action.payload.variablesData)) {
+        state.variablesData = action.payload.variablesData;
+      }
+      if (!isEqual(state.scriptContexts, action.payload.scriptContexts)) {
+        state.scriptContexts = action.payload.scriptContexts;
+      }
+      state.currentSceneSymbol = action.payload.currentSceneSymbol;
+    },
+  },
+});
+
+export const { actions, reducer } = debuggerSlice;
+
+export default reducer;
diff --git a/src/store/features/settings/settingsState.ts b/src/store/features/settings/settingsState.ts
index 9e1a0275f..8aa47d097 100644
--- a/src/store/features/settings/settingsState.ts
+++ b/src/store/features/settings/settingsState.ts
@@ -3,10 +3,15 @@ import { defaultProjectSettings } from "consts";
 import { RootState } from "store/configureStore";
 import { ActorDirection } from "shared/lib/entities/entitiesTypes";
 import projectActions from "store/features/project/projectActions";
+import type { ScriptEditorCtx } from "shared/lib/scripts/context";
 
 export type ShowConnectionsSetting = "all" | "selected" | true | false;
 export type MusicDriverSetting = "huge" | "gbt";
 export type CartType = "mbc5" | "mbc3";
+export type BreakpointData = {
+  scriptEventId: string;
+  context: ScriptEditorCtx;
+};
 
 export type SettingsState = {
   startSceneId: string;
@@ -69,6 +74,14 @@ export type SettingsState = {
   customControlsB: string[];
   customControlsStart: string[];
   customControlsSelect: string[];
+  debuggerEnabled: boolean;
+  debuggerScriptType: "editor" | "gbvm";
+  debuggerVariablesFilter: "all" | "watched";
+  debuggerCollapsedPanes: string[];
+  debuggerPauseOnScriptChanged: boolean;
+  debuggerPauseOnWatchedVariableChanged: boolean;
+  debuggerBreakpoints: BreakpointData[];
+  debuggerWatchedVariables: string[];
 };
 
 export const initialState: SettingsState = defaultProjectSettings;
@@ -117,6 +130,37 @@ const settingsSlice = createSlice({
         state.favoriteEvents.push(action.payload);
       }
     },
+
+    toggleBreakpoint: (state, action: PayloadAction<BreakpointData>) => {
+      const index = state.debuggerBreakpoints.findIndex(
+        (item) => item.scriptEventId === action.payload.scriptEventId
+      );
+      if (index !== -1) {
+        state.debuggerBreakpoints.splice(index, 1);
+      } else {
+        state.debuggerBreakpoints.unshift(action.payload);
+      }
+    },
+
+    toggleWatchedVariable: (state, action: PayloadAction<string>) => {
+      if (state.debuggerWatchedVariables.includes(action.payload)) {
+        state.debuggerWatchedVariables = state.debuggerWatchedVariables.filter(
+          (item) => item !== action.payload
+        );
+      } else {
+        state.debuggerWatchedVariables.push(action.payload);
+      }
+    },
+
+    toggleDebuggerPaneCollapsed: (state, action: PayloadAction<string>) => {
+      if (state.debuggerCollapsedPanes.includes(action.payload)) {
+        state.debuggerCollapsedPanes = state.debuggerCollapsedPanes.filter(
+          (item) => item !== action.payload
+        );
+      } else {
+        state.debuggerCollapsedPanes.push(action.payload);
+      }
+    },
   },
   extraReducers: (builder) =>
     builder.addCase(projectActions.loadProject.fulfilled, (state, action) => {
diff --git a/src/store/rootReducer.ts b/src/store/rootReducer.ts
index 083cd4228..5b98b0f19 100644
--- a/src/store/rootReducer.ts
+++ b/src/store/rootReducer.ts
@@ -16,6 +16,7 @@ import sprite from "./features/sprite/spriteState";
 import scriptEventDefs from "./features/scriptEventDefs/scriptEventDefsState";
 import tracker from "./features/tracker/trackerState";
 import trackerDocument from "./features/trackerDocument/trackerDocumentState";
+import debug from "./features/debugger/debuggerState";
 import { TRACKER_REDO, TRACKER_UNDO } from "consts";
 
 let lastEntityUndoStateTime = 0;
@@ -31,6 +32,7 @@ const rootReducer = combineReducers({
   clipboard,
   sprite,
   scriptEventDefs,
+  debug,
   tracker,
   trackerDocument: undoable(trackerDocument, {
     limit: 20,