diff --git a/docs/advanced_onboarding/configuration.md b/docs/advanced_onboarding/configuration.md
index d538c8b7c75..0355023e081 100644
--- a/docs/advanced_onboarding/configuration.md
+++ b/docs/advanced_onboarding/configuration.md
@@ -44,6 +44,10 @@ uv run reflex run --frontend-port 3001
 
 See the [CLI reference](/docs/api-reference/cli) for all the arguments available.
 
+## Frontend Inspector
+
+For mapping rendered DOM nodes back to the Python source that produced them, see the [Frontend Inspector](/docs/advanced_onboarding/frontend_inspector) page. Enable it by adding `rx.plugins.FrontendInspectorPlugin()` to `plugins` in your `rxconfig.py`.
+
 ## Customizable App Data Directory
 
 The `REFLEX_DIR` environment variable can be set, which allows users to set the location where Reflex writes helper tools like Bun and NodeJS.
diff --git a/docs/advanced_onboarding/frontend_inspector.md b/docs/advanced_onboarding/frontend_inspector.md
new file mode 100644
index 00000000000..d223788a104
--- /dev/null
+++ b/docs/advanced_onboarding/frontend_inspector.md
@@ -0,0 +1,90 @@
+```python exec
+import reflex as rx
+```
+
+# Frontend Inspector
+
+The frontend inspector maps rendered DOM nodes back to the Python source line that created them. Hover an element in the browser, see which `Component.create(...)` call produced it, and click to open that line in your editor.
+
+It is a development-only tool. The plugin is a no-op under `REFLEX_ENV_MODE=prod`, so the same `rxconfig.py` works for both dev and prod runs.
+
+## Enable
+
+Add `FrontendInspectorPlugin` to `plugins` in your `rxconfig.py`:
+
+```python
+import reflex as rx
+
+config = rx.Config(
+    app_name="my_app",
+    plugins=[rx.plugins.FrontendInspectorPlugin()],
+)
+```
+
+Run your app in dev mode (`uv run reflex run`). The inspector loads automatically; the `launch-editor` dev dependency is installed during the same compile pass.
+
+## Usage
+
+Three modes:
+
+- **Hover with `alt` held** — show the overlay while inspecting. The overlay disappears as soon as you release `alt`.
+- **`alt+x`** — toggle persistent mode. The overlay stays on; the small `rx-inspect` button in the bottom-right corner reflects the state.
+- **`alt`+click** — open the source file at the captured line in your editor. The modifier is required at click time so re-focusing the browser window doesn't hijack normal clicks.
+
+`Esc` exits persistent mode. Pressing `c` while hovering copies `path:line:column` to the clipboard.
+
+## Configuration
+
+```python
+config = rx.Config(
+    app_name="my_app",
+    plugins=[
+        rx.plugins.FrontendInspectorPlugin(
+            # Custom shortcut. Modifier aliases like cmd / option are accepted.
+            shortcut="ctrl+shift+i",
+            # Optional: override the editor invocation. Empty falls back to
+            # $REFLEX_EDITOR / $VISUAL / $EDITOR / launch-editor's auto-detection.
+            editor="code -g",
+        ),
+    ],
+)
+```
+
+| Argument | Default | Notes |
+| --- | --- | --- |
+| `shortcut` | `"alt+x"` | Modifiers: `alt`, `ctrl`, `meta` (`cmd`/`super`/`win`), `shift`. |
+| `editor` | `""` | Forwarded to [`launch-editor`](https://github.com/yyx990803/launch-editor). |
+
+## Production safety
+
+The plugin's hooks all return empty when `REFLEX_ENV_MODE=prod`, so prod builds emit no inspector wiring:
+
+- `uv run reflex run --env prod`
+- `uv run reflex export --env prod`
+- Any deploy that sets `REFLEX_ENV_MODE=prod`.
+
+The gate is re-evaluated at every emission site, so the same `rxconfig.py` works in both dev and prod without further changes.
+
+## What it does and does not do
+
+It does:
+
+- Add a small `data-rx="<id>"` attribute to every component that has a non-Fragment tag.
+- Emit `.web/public/__reflex/source-map.json` mapping ids to `(file, line, column, component)`.
+- Mount a Vite dev-server middleware at `/__open-in-editor` that calls `launch-editor`.
+
+It does not:
+
+- Inspect React state or props at runtime — it is a source-mapping tool, not a React DevTools replacement.
+- Run in production. The Vite plugin is registered with `apply: 'serve'`, so even if a stray asset slipped through, prod builds would not load it.
+- Modify your source code. The inspector stores a private id on each component that gets rendered out as a `data-rx` attribute; your `rxconfig.py` and component files are untouched.
+
+## Programmatic toggle
+
+When the inspector is loaded, `window.__REFLEX_INSPECTOR__` exposes the runtime API for ad-hoc debugging in the browser console:
+
+```js
+window.__REFLEX_INSPECTOR__.enable();
+window.__REFLEX_INSPECTOR__.toggle();
+window.__REFLEX_INSPECTOR__.sourceCount(); // number of mapped ids
+```
diff --git a/docs/app/reflex_docs/templates/docpage/sidebar/sidebar_items/learn.py b/docs/app/reflex_docs/templates/docpage/sidebar/sidebar_items/learn.py
index 0f4d652eb5d..a38ad2116d8 100644
--- a/docs/app/reflex_docs/templates/docpage/sidebar/sidebar_items/learn.py
+++ b/docs/app/reflex_docs/templates/docpage/sidebar/sidebar_items/learn.py
@@ -30,6 +30,7 @@ def get_sidebar_items_learn():
                 advanced_onboarding.how_reflex_works,
                 advanced_onboarding.configuration,
                 advanced_onboarding.code_structure,
+                advanced_onboarding.frontend_inspector,
             ],
         ),
     ]
diff --git a/docs/app/rxconfig.py b/docs/app/rxconfig.py
index 11e5f8b02d2..7fa1671c4f5 100644
--- a/docs/app/rxconfig.py
+++ b/docs/app/rxconfig.py
@@ -12,6 +12,7 @@
     plugins=[
         rx.plugins.TailwindV4Plugin(),
         rx.plugins.SitemapPlugin(trailing_slash="always"),
+        rx.plugins.FrontendInspectorPlugin(),
         AgentFilesPlugin(),
     ],
 )
diff --git a/packages/reflex-base/src/reflex_base/assets/inspector/dev_server_middleware.js b/packages/reflex-base/src/reflex_base/assets/inspector/dev_server_middleware.js
new file mode 100644
index 00000000000..a6286bf3e29
--- /dev/null
+++ b/packages/reflex-base/src/reflex_base/assets/inspector/dev_server_middleware.js
@@ -0,0 +1,38 @@
+/* Dev-server middleware that opens a file:line:column in the user's editor.
+ *
+ * Mounted by the inspector Vite plugin (and the equivalent Astro hook).
+ * The browser sends `GET /__open-in-editor?file=<path>:<line>:<col>`.
+ */
+
+import launch from "launch-editor";
+
+const reflexEditorMiddleware = (req, res, next) => {
+  if (!req.url || !req.url.includes("/__open-in-editor")) {
+    return next();
+  }
+  let url;
+  try {
+    url = new URL(req.url, "http://localhost");
+  } catch (err) {
+    res.statusCode = 400;
+    res.end("Invalid URL");
+    return;
+  }
+  const file = url.searchParams.get("file");
+  if (!file) {
+    res.statusCode = 400;
+    res.end("Missing 'file' query parameter");
+    return;
+  }
+  const editor = process.env.REFLEX_EDITOR || undefined;
+  launch(file, editor, (fileName, errorMsg) => {
+    if (errorMsg) {
+      // eslint-disable-next-line no-console
+      console.error("[reflex-inspector] launch-editor:", errorMsg);
+    }
+  });
+  res.statusCode = 204;
+  res.end();
+};
+
+export default reflexEditorMiddleware;
diff --git a/packages/reflex-base/src/reflex_base/assets/inspector/inspector.css b/packages/reflex-base/src/reflex_base/assets/inspector/inspector.css
new file mode 100644
index 00000000000..317f3ebe8ec
--- /dev/null
+++ b/packages/reflex-base/src/reflex_base/assets/inspector/inspector.css
@@ -0,0 +1,61 @@
+/* Reflex frontend inspector — dev-only overlay styles. */
+
+#__reflex_inspector_outline {
+  position: fixed;
+  pointer-events: none;
+  z-index: 2147483646;
+  border: 2px solid #4f8cff;
+  background: rgba(79, 140, 255, 0.08);
+  border-radius: 2px;
+  transition: top 60ms linear, left 60ms linear, width 60ms linear, height 60ms linear;
+  display: none;
+}
+
+#__reflex_inspector_label {
+  position: fixed;
+  pointer-events: none;
+  z-index: 2147483647;
+  background: #111827;
+  color: #f9fafb;
+  font: 500 12px/1.4 "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+  padding: 4px 8px;
+  border-radius: 4px;
+  white-space: nowrap;
+  display: none;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
+}
+
+#__reflex_inspector_label .__reflex_inspector_chain {
+  color: #9ca3af;
+  margin-right: 6px;
+}
+
+#__reflex_inspector_label .__reflex_inspector_file {
+  color: #93c5fd;
+}
+
+#__reflex_inspector_toggle {
+  position: fixed;
+  bottom: 16px;
+  right: 16px;
+  z-index: 2147483647;
+  background: #111827;
+  color: #f9fafb;
+  border: 1px solid #374151;
+  border-radius: 999px;
+  font: 500 12px/1 "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+  padding: 8px 12px;
+  cursor: pointer;
+  opacity: 0.65;
+  transition: opacity 120ms ease;
+}
+
+#__reflex_inspector_toggle:hover {
+  opacity: 1;
+}
+
+#__reflex_inspector_toggle[data-active="true"] {
+  background: #4f8cff;
+  border-color: #4f8cff;
+  opacity: 1;
+}
diff --git a/packages/reflex-base/src/reflex_base/assets/inspector/inspector.js b/packages/reflex-base/src/reflex_base/assets/inspector/inspector.js
new file mode 100644
index 00000000000..8f7fbf656fc
--- /dev/null
+++ b/packages/reflex-base/src/reflex_base/assets/inspector/inspector.js
@@ -0,0 +1,362 @@
+/* Reflex frontend inspector — dev-only browser script.
+ *
+ * Reads `data-rx` from rendered elements, looks them up in the source map
+ * served at /__reflex/source-map.json, draws a hover outline + label, and
+ * sends clicks to /__open-in-editor so the user's editor can jump to the
+ * Python call site.
+ *
+ * Loaded by the inspector Vite plugin (or Astro integration). The plugin
+ * also installs the editor middleware on the dev server.
+ */
+
+const RX_DATA_ATTR = "data-rx";
+const SESSION_KEY = "__reflex_inspector_persistent";
+const OUTLINE_ID = "__reflex_inspector_outline";
+const LABEL_ID = "__reflex_inspector_label";
+const TOGGLE_ID = "__reflex_inspector_toggle";
+
+const config = window.__REFLEX_INSPECTOR_CONFIG__ || {};
+const SOURCE_MAP_URL = config.sourceMapUrl || "/__reflex/source-map.json";
+const CSS_URL = config.cssUrl || "/__reflex/inspector.css";
+const EDITOR_URL = config.editorUrl || "/__open-in-editor";
+const shortcut = config.shortcut || {
+  key: "x",
+  alt: true,
+  ctrl: false,
+  meta: false,
+  shift: false,
+};
+
+let sourceMap = null;
+let sourceMapPromise = null;
+let persistent = false;
+let modifierHeld = false;
+let lastTarget = null;
+let outlineEl = null;
+let labelEl = null;
+let toggleEl = null;
+let focusGuardUntil = 0;
+let sourceMapRequestId = 0;
+
+const clearSourceMap = () => {
+  sourceMap = null;
+  sourceMapPromise = null;
+  sourceMapRequestId += 1;
+};
+
+const loadSourceMap = (fresh = false) => {
+  if (fresh) clearSourceMap();
+  if (sourceMap) return Promise.resolve(sourceMap);
+  if (sourceMapPromise) return sourceMapPromise;
+  const requestId = sourceMapRequestId;
+  sourceMapPromise = fetch(SOURCE_MAP_URL, { cache: "no-store" })
+    .then((res) => (res.ok ? res.json() : {}))
+    .catch(() => ({}))
+    .then((map) => {
+      if (requestId === sourceMapRequestId) sourceMap = map;
+      return map;
+    })
+    .finally(() => {
+      if (requestId === sourceMapRequestId) sourceMapPromise = null;
+    });
+  return sourceMapPromise;
+};
+
+const ensureStylesheet = () => {
+  const existing = document.getElementById("__reflex_inspector_css");
+  if (existing) return;
+  const link = document.createElement("link");
+  link.id = "__reflex_inspector_css";
+  link.rel = "stylesheet";
+  link.href = CSS_URL;
+  document.head.appendChild(link);
+};
+
+const ensureOverlayElements = () => {
+  ensureStylesheet();
+  if (!outlineEl) {
+    outlineEl = document.createElement("div");
+    outlineEl.id = OUTLINE_ID;
+    document.body.appendChild(outlineEl);
+  }
+  if (!labelEl) {
+    labelEl = document.createElement("div");
+    labelEl.id = LABEL_ID;
+    document.body.appendChild(labelEl);
+  }
+  if (!toggleEl) {
+    toggleEl = document.createElement("button");
+    toggleEl.id = TOGGLE_ID;
+    toggleEl.type = "button";
+    toggleEl.textContent = "rx-inspect";
+    toggleEl.addEventListener("click", () => setPersistent(!persistent));
+    document.body.appendChild(toggleEl);
+  }
+};
+
+const findInspected = (node) => {
+  while (node && node.nodeType === 1) {
+    if (node.hasAttribute(RX_DATA_ATTR)) return node;
+    node = node.parentElement;
+  }
+  return null;
+};
+
+const ancestorChain = (el, depth) => {
+  const chain = [];
+  let cur = el.parentElement;
+  while (cur && chain.length < depth) {
+    if (cur.hasAttribute(RX_DATA_ATTR)) {
+      const id = cur.getAttribute(RX_DATA_ATTR);
+      const info = sourceMap && sourceMap[id];
+      if (info && info.component) chain.push(info.component);
+    }
+    cur = cur.parentElement;
+  }
+  return chain.reverse();
+};
+
+const baseName = (file) => {
+  if (!file) return "";
+  const i = Math.max(file.lastIndexOf("/"), file.lastIndexOf("\\"));
+  return i === -1 ? file : file.slice(i + 1);
+};
+
+const showOverlayFor = (el) => {
+  if (!el || !sourceMap) return;
+  const id = el.getAttribute(RX_DATA_ATTR);
+  const info = sourceMap[id];
+  if (!info) {
+    hideOverlay();
+    return;
+  }
+  ensureOverlayElements();
+  const rect = el.getBoundingClientRect();
+  outlineEl.style.display = "block";
+  outlineEl.style.top = `${rect.top}px`;
+  outlineEl.style.left = `${rect.left}px`;
+  outlineEl.style.width = `${rect.width}px`;
+  outlineEl.style.height = `${rect.height}px`;
+
+  const chain = ancestorChain(el, 3);
+  const breadcrumb = chain.length > 0 ? chain.join(" › ") + " › " : "";
+  const file = baseName(info.file);
+  labelEl.innerHTML = "";
+  if (breadcrumb) {
+    const span = document.createElement("span");
+    span.className = "__reflex_inspector_chain";
+    span.textContent = breadcrumb;
+    labelEl.appendChild(span);
+  }
+  const name = document.createElement("span");
+  name.textContent = `${info.component} `;
+  labelEl.appendChild(name);
+  const fileSpan = document.createElement("span");
+  fileSpan.className = "__reflex_inspector_file";
+  fileSpan.textContent = `${file}:${info.line}`;
+  labelEl.appendChild(fileSpan);
+
+  labelEl.style.display = "block";
+  const labelTop = Math.max(0, rect.top - 24);
+  labelEl.style.top = `${labelTop}px`;
+  labelEl.style.left = `${rect.left}px`;
+};
+
+const hideOverlay = () => {
+  if (outlineEl) outlineEl.style.display = "none";
+  if (labelEl) labelEl.style.display = "none";
+};
+
+const openInEditor = async (info) => {
+  if (!info) return;
+  const params = new URLSearchParams({
+    file: `${info.file}:${info.line}:${info.column || 1}`,
+  });
+  try {
+    await fetch(`${EDITOR_URL}?${params.toString()}`, { method: "GET" });
+  } catch (err) {
+    console.warn("[reflex-inspector] open-in-editor failed", err);
+  }
+};
+
+const copyPath = (info) => {
+  if (!info || !navigator.clipboard) return;
+  const text = `${info.file}:${info.line}:${info.column || 1}`;
+  navigator.clipboard.writeText(text).catch(() => undefined);
+};
+
+const expectedCode = (key) => {
+  // Layout-independent code for the configured shortcut key, used as a
+  // primary match: holding Alt on macOS/Linux can mutate event.key into
+  // dead/compose characters (e.g. Option+X → "≈"), which would otherwise
+  // make the second press silently miss.
+  if (key.length !== 1) return null;
+  if (key >= "a" && key <= "z") return `Key${key.toUpperCase()}`;
+  if (key >= "0" && key <= "9") return `Digit${key}`;
+  return null;
+};
+
+const matchesShortcut = (event) => {
+  if (event.repeat) return false;
+  const code = expectedCode(shortcut.key);
+  const keyMatch = event.key.toLowerCase() === shortcut.key;
+  const codeMatch = code !== null && event.code === code;
+  if (!keyMatch && !codeMatch) return false;
+  return (
+    !!event.altKey === !!shortcut.alt &&
+    !!event.ctrlKey === !!shortcut.ctrl &&
+    !!event.metaKey === !!shortcut.meta &&
+    !!event.shiftKey === !!shortcut.shift
+  );
+};
+
+const hasConfiguredModifier =
+  !!shortcut.alt || !!shortcut.ctrl || !!shortcut.meta || !!shortcut.shift;
+
+const requiredModifiersHeld = (event) =>
+  hasConfiguredModifier &&
+  (!shortcut.alt || event.altKey) &&
+  (!shortcut.ctrl || event.ctrlKey) &&
+  (!shortcut.meta || event.metaKey) &&
+  (!shortcut.shift || event.shiftKey);
+
+const isActive = () => persistent || modifierHeld;
+
+const updateToggle = () => {
+  if (!toggleEl) return;
+  toggleEl.dataset.active = String(persistent);
+};
+
+const setPersistent = async (on) => {
+  const wasPersistent = persistent;
+  persistent = !!on;
+  try {
+    sessionStorage.setItem(SESSION_KEY, persistent ? "1" : "0");
+  } catch (_) {
+    // sessionStorage may be disabled — ignore.
+  }
+  if (persistent) await loadSourceMap(!wasPersistent);
+  updateToggle();
+  if (!isActive()) hideOverlay();
+};
+
+const onMouseMove = (event) => {
+  if (!isActive()) return;
+  if (Date.now() < focusGuardUntil) return;
+  if (isInspectorChrome(event.target)) {
+    hideOverlay();
+    lastTarget = null;
+    return;
+  }
+  const target = findInspected(event.target);
+  lastTarget = target;
+  if (target) showOverlayFor(target);
+  else hideOverlay();
+};
+
+const isInspectorChrome = (node) => {
+  while (node && node.nodeType === 1) {
+    if (
+      node.id === TOGGLE_ID ||
+      node.id === OUTLINE_ID ||
+      node.id === LABEL_ID
+    ) {
+      return true;
+    }
+    node = node.parentElement;
+  }
+  return false;
+};
+
+const onClick = async (event) => {
+  if (!isActive()) return;
+  if (isInspectorChrome(event.target)) return;
+  // Require the configured modifier at click time so re-focusing the
+  // window or clicking through the page doesn't hijack normal clicks.
+  if (!requiredModifiersHeld(event)) return;
+  // Swallow the very first click after the window regains focus — the
+  // browser fires it as part of the focus transition and the user almost
+  // never means it as an inspector action.
+  if (Date.now() < focusGuardUntil) {
+    focusGuardUntil = 0;
+    return;
+  }
+  const target = findInspected(event.target);
+  if (!target) return;
+  event.preventDefault();
+  event.stopPropagation();
+  const map = await loadSourceMap(true);
+  const info = map && map[target.getAttribute(RX_DATA_ATTR)];
+  openInEditor(info);
+};
+
+const onKeyDown = (event) => {
+  if (matchesShortcut(event)) {
+    event.stopPropagation();
+    event.preventDefault();
+    setPersistent(!persistent);
+    return;
+  }
+  if (requiredModifiersHeld(event) && !modifierHeld) {
+    modifierHeld = true;
+    loadSourceMap(true);
+  }
+  if (event.key === "Escape" && persistent) {
+    setPersistent(false);
+  }
+  if (event.key.toLowerCase() === "c" && lastTarget && isActive()) {
+    const info = sourceMap && sourceMap[lastTarget.getAttribute(RX_DATA_ATTR)];
+    copyPath(info);
+  }
+};
+
+const onKeyUp = (event) => {
+  if (!requiredModifiersHeld(event) && modifierHeld) {
+    modifierHeld = false;
+    if (!persistent) hideOverlay();
+  }
+};
+
+const installEvents = () => {
+  document.addEventListener("mousemove", onMouseMove, true);
+  document.addEventListener("click", onClick, true);
+  document.addEventListener("keydown", onKeyDown, true);
+  document.addEventListener("keyup", onKeyUp, true);
+  window.addEventListener("blur", () => {
+    modifierHeld = false;
+    hideOverlay();
+  });
+  window.addEventListener("focus", () => {
+    focusGuardUntil = Date.now() + 350;
+  });
+};
+
+const init = () => {
+  if (window.__REFLEX_INSPECTOR__) return;
+  ensureOverlayElements();
+  installEvents();
+
+  let initial = false;
+  try {
+    initial = sessionStorage.getItem(SESSION_KEY) === "1";
+  } catch (_) {
+    initial = false;
+  }
+  if (window.location.search.includes("reflex-inspector")) initial = true;
+
+  window.__REFLEX_INSPECTOR__ = {
+    enable: () => setPersistent(true),
+    disable: () => setPersistent(false),
+    toggle: () => setPersistent(!persistent),
+    isEnabled: () => persistent,
+    sourceCount: () => (sourceMap ? Object.keys(sourceMap).length : 0),
+  };
+
+  if (initial) setPersistent(true);
+};
+
+if (document.readyState === "loading") {
+  document.addEventListener("DOMContentLoaded", init, { once: true });
+} else {
+  init();
+}
diff --git a/packages/reflex-base/src/reflex_base/components/component.py b/packages/reflex-base/src/reflex_base/components/component.py
index 79b562ddc78..3cc09baf421 100644
--- a/packages/reflex-base/src/reflex_base/components/component.py
+++ b/packages/reflex-base/src/reflex_base/components/component.py
@@ -40,6 +40,9 @@
     run_script,
     unwrap_var_annotation,
 )
+from reflex_base.inspector import DATA_ATTR as _INSPECTOR_DATA_ATTR
+from reflex_base.inspector import capture as inspector_capture
+from reflex_base.inspector import state as inspector_state
 from reflex_base.style import Style, format_as_emotion
 from reflex_base.utils import console, format, imports, types
 from reflex_base.utils.imports import ImportDict, ImportVar, ParsedImportDict
@@ -758,6 +761,8 @@ class Component(BaseComponent, ABC):
         default=None, is_javascript_property=False
     )
 
+    _inspector_id: int | None = field(default=None, is_javascript_property=False)
+
     def add_imports(self) -> ImportDict | list[ImportDict]:
         """Add imports for the component.
 
@@ -1124,6 +1129,9 @@ def _render(self, props: dict[str, Any] | None = None) -> Tag:
         for prop_to_exclude in self._exclude_props():
             props.pop(prop_to_exclude, None)
 
+        if (cid := self._inspector_id) is not None and name and name != "Fragment":
+            props.setdefault(_INSPECTOR_DATA_ATTR, cid)
+
         return tag.add_props(**props)
 
     @classmethod
@@ -1191,6 +1199,12 @@ def create(cls: type[T], *children, **props) -> T:
         from reflex_components_core.base.bare import Bare
         from reflex_components_core.base.fragment import Fragment
 
+        cid = (
+            inspector_capture.capture(cls.__name__)
+            if inspector_state.is_enabled()
+            else None
+        )
+
         # Filter out None props
         props = {key: value for key, value in props.items() if value is not None}
 
@@ -1210,7 +1224,10 @@ def create(cls: type[T], *children, **props) -> T:
             for child in children
         ]
 
-        return cls._create(children_normalized, **props)
+        component = cls._create(children_normalized, **props)
+        if cid is not None:
+            component._inspector_id = cid
+        return component
 
     @classmethod
     def _create(cls: type[T], children: Sequence[BaseComponent], **props: Any) -> T:
diff --git a/packages/reflex-base/src/reflex_base/inspector/__init__.py b/packages/reflex-base/src/reflex_base/inspector/__init__.py
new file mode 100644
index 00000000000..bef65bad81e
--- /dev/null
+++ b/packages/reflex-base/src/reflex_base/inspector/__init__.py
@@ -0,0 +1,46 @@
+"""Dev-only frontend inspector.
+
+The inspector maps rendered DOM nodes back to the Python ``Component`` call
+site that produced them. Each piece is independently testable:
+
+- ``state`` toggles the global enabled flag (set by ``integration``).
+- ``capture`` walks the call stack and records the user-code frame.
+- ``emit`` writes the lookup table consumed by the browser script.
+- ``shortcut`` parses the keyboard shortcut configured in ``rx.Config``.
+- ``integration`` is the coordinator the rest of Reflex talks to.
+
+The browser-side counterpart lives under ``reflex_base/assets/inspector``.
+The constants below are the shared contract between the Python compile-time
+side and the JS runtime — pinned by ``tests/.../test_browser_contract.py``.
+"""
+
+from __future__ import annotations
+
+from . import capture, shortcut, state
+
+DATA_ATTR = "data-rx"
+PUBLIC_DIRNAME = "__reflex"
+INSPECTOR_PLUGIN_FILE = "reflex-inspector-plugin.js"
+SOURCE_MAP_FILENAME = "source-map.json"
+SOURCE_MAP_URL = f"/{PUBLIC_DIRNAME}/{SOURCE_MAP_FILENAME}"
+INSPECTOR_JS_URL = f"/{PUBLIC_DIRNAME}/inspector.js"
+INSPECTOR_CSS_URL = f"/{PUBLIC_DIRNAME}/inspector.css"
+EDITOR_URL = "/__open-in-editor"
+WINDOW_CONFIG_KEY = "__REFLEX_INSPECTOR_CONFIG__"
+SHORTCUT_CONFIG_KEY = "shortcut"
+
+__all__ = [
+    "DATA_ATTR",
+    "EDITOR_URL",
+    "INSPECTOR_CSS_URL",
+    "INSPECTOR_JS_URL",
+    "INSPECTOR_PLUGIN_FILE",
+    "PUBLIC_DIRNAME",
+    "SHORTCUT_CONFIG_KEY",
+    "SOURCE_MAP_FILENAME",
+    "SOURCE_MAP_URL",
+    "WINDOW_CONFIG_KEY",
+    "capture",
+    "shortcut",
+    "state",
+]
diff --git a/packages/reflex-base/src/reflex_base/inspector/capture.py b/packages/reflex-base/src/reflex_base/inspector/capture.py
new file mode 100644
index 00000000000..c19c3d0c386
--- /dev/null
+++ b/packages/reflex-base/src/reflex_base/inspector/capture.py
@@ -0,0 +1,116 @@
+"""Walk the Python call stack and record where a component was created."""
+
+from __future__ import annotations
+
+import dataclasses
+import itertools
+import sys
+from pathlib import Path
+
+from reflex_base.utils import frames
+
+from . import state
+
+
+@dataclasses.dataclass(frozen=True, slots=True)
+class SourceInfo:
+    """A user-code frame that constructed a component."""
+
+    file: str
+    line: int
+    column: int
+    component: str
+
+
+_REGISTRY: dict[int, SourceInfo] = {}
+_BY_INFO: dict[SourceInfo, int] = {}
+_COUNTER = itertools.count(1)
+_FRAMEWORK_ROOTS: tuple[Path, ...] = ()
+_RESOLVED_PATH_CACHE: dict[str, str] = {}
+
+
+def _get_framework_roots() -> tuple[Path, ...]:
+    return _FRAMEWORK_ROOTS
+
+
+_is_framework_frame = frames.make_framework_frame_predicate(_get_framework_roots)
+
+
+def _ensure_framework_roots() -> None:
+    global _FRAMEWORK_ROOTS
+    if not _FRAMEWORK_ROOTS:
+        _FRAMEWORK_ROOTS = frames.discover_framework_roots()
+
+
+def _resolve_filename(filename: str) -> str:
+    cached = _RESOLVED_PATH_CACHE.get(filename)
+    if cached is not None:
+        return cached
+    try:
+        resolved = str(Path(filename).resolve())
+    except OSError:
+        resolved = filename
+    _RESOLVED_PATH_CACHE[filename] = resolved
+    return resolved
+
+
+def capture(component_name: str) -> int | None:
+    """Walk the call stack and return a fresh inspector id for the user frame.
+
+    Args:
+        component_name: ``cls.__name__`` of the component being constructed.
+
+    Returns:
+        A new integer id when the inspector is enabled and a non-framework
+        frame is found; ``None`` otherwise (e.g. inspector disabled, only
+        framework code on the stack).
+    """
+    if not state.is_enabled():
+        return None
+    _ensure_framework_roots()
+    user_frame = frames.walk_to_first_non_framework_frame(
+        sys._getframe(1), _is_framework_frame
+    )
+    try:
+        if user_frame is None:
+            return None
+        info = SourceInfo(
+            file=_resolve_filename(user_frame.f_code.co_filename),
+            line=user_frame.f_lineno,
+            column=1,
+            component=component_name,
+        )
+        if (existing := _BY_INFO.get(info)) is not None:
+            return existing
+        cid = next(_COUNTER)
+        _REGISTRY[cid] = info
+        _BY_INFO[info] = cid
+        return cid
+    finally:
+        # Break the local frame reference so the captured frame's locals
+        # (which can transitively reference this function) become reclaimable.
+        del user_frame
+
+
+def snapshot() -> dict[int, SourceInfo]:
+    """Return a copy of the current registry.
+
+    Returns:
+        A shallow copy of the inspector id → ``SourceInfo`` mapping.
+    """
+    return dict(_REGISTRY)
+
+
+def reset() -> None:
+    """Clear the registry. Intended for tests and per-compile resets.
+
+    Framework roots are also cleared so the next ``capture`` rediscovers
+    them — covers framework subpackages imported between compile passes.
+    """
+    global _COUNTER, _FRAMEWORK_ROOTS
+    _REGISTRY.clear()
+    _BY_INFO.clear()
+    _COUNTER = itertools.count(1)
+    _FRAMEWORK_ROOTS = ()
+    _is_framework_frame.cache_clear()
+    _RESOLVED_PATH_CACHE.clear()
diff --git a/packages/reflex-base/src/reflex_base/inspector/shortcut.py b/packages/reflex-base/src/reflex_base/inspector/shortcut.py
new file mode 100644
index 00000000000..7ec706af18f
--- /dev/null
+++ b/packages/reflex-base/src/reflex_base/inspector/shortcut.py
@@ -0,0 +1,89 @@
+"""Parse the keyboard shortcut string from ``FrontendInspectorPlugin(shortcut=...)``."""
+
+from __future__ import annotations
+
+import dataclasses
+
+from reflex_base.utils.exceptions import ConfigError
+
+_MODIFIER_ALIASES = {
+    "cmd": "meta",
+    "command": "meta",
+    "super": "meta",
+    "win": "meta",
+    "windows": "meta",
+    "option": "alt",
+    "opt": "alt",
+    "control": "ctrl",
+}
+
+_VALID_MODIFIERS = ("alt", "ctrl", "meta", "shift")
+
+
+@dataclasses.dataclass(frozen=True, slots=True)
+class Shortcut:
+    """A normalized keyboard shortcut.
+
+    ``key`` is lower-case and matched against ``KeyboardEvent.key.toLowerCase()``
+    in the browser. The four boolean fields map onto the corresponding
+    ``KeyboardEvent`` modifier properties.
+    """
+
+    key: str
+    alt: bool = False
+    ctrl: bool = False
+    meta: bool = False
+    shift: bool = False
+
+    def to_json_payload(self) -> dict[str, str | bool]:
+        """Return the shortcut as a JSON-serialisable dict.
+
+        Returns:
+            The shortcut fields as a plain dict, suitable for ``json.dumps``.
+        """
+        return dataclasses.asdict(self)
+
+
+def parse_shortcut(value: str) -> Shortcut:
+    """Parse a ``"alt+x"``-style shortcut string.
+
+    Args:
+        value: The raw shortcut from the config.
+
+    Returns:
+        A normalized :class:`Shortcut`.
+
+    Raises:
+        ConfigError: If the string is empty, has no key, or contains an
+            unknown modifier.
+    """
+    if not value or not value.strip():
+        msg = "FrontendInspectorPlugin shortcut must be a non-empty string."
+        raise ConfigError(msg)
+
+    parts = [p.strip().lower() for p in value.split("+")]
+    if any(not p for p in parts):
+        msg = f"FrontendInspectorPlugin shortcut={value!r} has empty segments."
+        raise ConfigError(msg)
+
+    *raw_modifiers, key = parts
+
+    modifiers: set[str] = set()
+    for raw in raw_modifiers:
+        normalized = _MODIFIER_ALIASES.get(raw, raw)
+        if normalized not in _VALID_MODIFIERS:
+            msg = (
+                f"FrontendInspectorPlugin shortcut={value!r} contains unknown "
+                f"modifier {raw!r}; expected one of "
+                f"{_VALID_MODIFIERS + tuple(_MODIFIER_ALIASES)}."
+            )
+            raise ConfigError(msg)
+        modifiers.add(normalized)
+
+    return Shortcut(
+        key=key,
+        alt="alt" in modifiers,
+        ctrl="ctrl" in modifiers,
+        meta="meta" in modifiers,
+        shift="shift" in modifiers,
+    )
diff --git a/packages/reflex-base/src/reflex_base/inspector/state.py b/packages/reflex-base/src/reflex_base/inspector/state.py
new file mode 100644
index 00000000000..19cddb7a87c
--- /dev/null
+++ b/packages/reflex-base/src/reflex_base/inspector/state.py
@@ -0,0 +1,28 @@
+"""Global toggle for the frontend inspector.
+
+A single boolean module-level flag is the source of truth. ``Config`` flips it
+during ``_post_init`` so it is set before the user's app module imports.
+"""
+
+from __future__ import annotations
+
+_ENABLED: bool = False
+
+
+def set_enabled(on: bool) -> None:
+    """Set whether the inspector is active.
+
+    Args:
+        on: True to enable, False to disable.
+    """
+    global _ENABLED
+    _ENABLED = on
+
+
+def is_enabled() -> bool:
+    """Return whether the inspector is currently active.
+
+    Returns:
+        True if the inspector should capture call sites and emit ``data-rx``.
+    """
+    return _ENABLED
diff --git a/packages/reflex-base/src/reflex_base/plugins/__init__.py b/packages/reflex-base/src/reflex_base/plugins/__init__.py
index f3ef5aa971c..07dbe4793b9 100644
--- a/packages/reflex-base/src/reflex_base/plugins/__init__.py
+++ b/packages/reflex-base/src/reflex_base/plugins/__init__.py
@@ -11,6 +11,7 @@
     PageContext,
     PageDefinition,
 )
+from .frontend_inspector import FrontendInspectorPlugin
 from .sitemap import SitemapPlugin
 from .tailwind_v3 import TailwindV3Plugin
 from .tailwind_v4 import TailwindV4Plugin
@@ -21,6 +22,7 @@
     "CompileContext",
     "CompilerHooks",
     "ComponentAndChildren",
+    "FrontendInspectorPlugin",
     "PageContext",
     "PageDefinition",
     "Plugin",
diff --git a/packages/reflex-base/src/reflex_base/plugins/base.py b/packages/reflex-base/src/reflex_base/plugins/base.py
index 082258ddb9c..d3605daa8f3 100644
--- a/packages/reflex-base/src/reflex_base/plugins/base.py
+++ b/packages/reflex-base/src/reflex_base/plugins/base.py
@@ -99,6 +99,19 @@ def get_frontend_dependencies(
         """
         return []
 
+    def start_compile(self, app: "App") -> None:
+        """Lifecycle hook fired before pages are evaluated.
+
+        Use this to flip runtime state that must be set before user code in
+        ``add_page`` callbacks runs, or to mutate the ``App`` (e.g. extend
+        ``app.head_components``) before ``compile_document_root`` is called.
+        ``pre_compile`` runs *after* page evaluation and is too late for
+        either job.
+
+        Args:
+            app: The Reflex ``App`` being compiled.
+        """
+
     def get_static_assets(
         self, **context: Unpack[CommonContext]
     ) -> Sequence[tuple[Path, str | bytes]]:
diff --git a/packages/reflex-base/src/reflex_base/plugins/frontend_inspector.py b/packages/reflex-base/src/reflex_base/plugins/frontend_inspector.py
new file mode 100644
index 00000000000..53f972cb108
--- /dev/null
+++ b/packages/reflex-base/src/reflex_base/plugins/frontend_inspector.py
@@ -0,0 +1,282 @@
+"""Plugin for the dev-only frontend inspector.
+
+The inspector maps rendered DOM nodes back to the Python ``Component``
+call site that produced them. Wiring it up requires multiple compile-time
+artifacts; this plugin owns all of them so users opt in with a single
+``rxconfig.py`` entry:
+
+.. code-block:: python
+
+    config = rx.Config(
+        app_name="my_app",
+        plugins=[rx.plugins.FrontendInspectorPlugin()],
+    )
+
+The plugin is a no-op under ``REFLEX_ENV_MODE=prod`` so the same
+``rxconfig.py`` works for ``reflex run`` and ``reflex export``.
+"""
+
+from __future__ import annotations
+
+import dataclasses
+import functools
+import json
+from collections.abc import Sequence
+from pathlib import Path
+from typing import TYPE_CHECKING, Any
+
+from typing_extensions import Unpack
+
+from reflex_base import constants
+from reflex_base.inspector import (
+    DATA_ATTR,
+    EDITOR_URL,
+    INSPECTOR_CSS_URL,
+    INSPECTOR_JS_URL,
+    INSPECTOR_PLUGIN_FILE,
+    PUBLIC_DIRNAME,
+    SHORTCUT_CONFIG_KEY,
+    SOURCE_MAP_FILENAME,
+    SOURCE_MAP_URL,
+    WINDOW_CONFIG_KEY,
+    capture,
+    state,
+)
+from reflex_base.inspector.shortcut import parse_shortcut
+
+from .base import CommonContext, Plugin, PreCompileContext
+
+if TYPE_CHECKING:
+    from reflex.app import App
+    from reflex_base.components.component import Component
+
+LAUNCH_EDITOR_VERSION = "^2.6.1"
+_INSPECTOR_VITE_IMPORT = "reflexInspectorPlugin"
+_VITE_INSPECTOR_IMPORT_LINE = (
+    f'import {_INSPECTOR_VITE_IMPORT} from "./{INSPECTOR_PLUGIN_FILE}";\n'
+)
+_VITE_INSPECTOR_PLUGIN_CALL = f"    {_INSPECTOR_VITE_IMPORT}(),\n"
+_VITE_PLUGINS_ANCHOR = "    safariCacheBustPlugin(),\n"
+
+
+@dataclasses.dataclass
+class FrontendInspectorPlugin(Plugin):
+    """Maps rendered DOM nodes back to their Python call site (dev-only).
+
+    Attributes:
+        shortcut: Keyboard shortcut for toggling the inspector. Modifier
+            aliases like ``cmd``/``option`` are accepted.
+        editor: Editor invocation forwarded to ``launch-editor`` via
+            ``REFLEX_EDITOR``. Empty string defers to the user's existing
+            ``REFLEX_EDITOR``/``VISUAL``/``EDITOR`` environment variables.
+    """
+
+    shortcut: str = "alt+x"
+    editor: str = ""
+    _injected_into_apps: set[int] = dataclasses.field(
+        default_factory=set, init=False, repr=False
+    )
+
+    def _is_active(self) -> bool:
+        # `environment` imports back from `reflex_base.plugins`; lazy import
+        # avoids the cycle.
+        from reflex_base.environment import environment
+
+        return environment.REFLEX_ENV_MODE.get() != constants.Env.PROD
+
+    def start_compile(self, app: App) -> None:
+        """Reset capture, flip the runtime flag, and inject head scripts.
+
+        ``app.head_components`` has to be extended here rather than in
+        ``pre_compile`` because ``compile_document_root`` reads it during
+        the page-rendering phase, which runs before ``pre_compile``.
+
+        Args:
+            app: The Reflex App being compiled.
+        """
+        active = self._is_active()
+        # Force off so the inspector's own ``<Script>`` head components do
+        # not capture themselves into the source map.
+        state.set_enabled(False)
+        capture.reset()
+        if not active:
+            return
+        if id(app) not in self._injected_into_apps:
+            app.head_components.extend(self._build_head_components())
+            self._injected_into_apps.add(id(app))
+        state.set_enabled(True)
+
+    def pre_compile(self, **context: Unpack[PreCompileContext]) -> None:
+        """Splice the inspector plugin into ``vite.config.js``.
+
+        Args:
+            context: Pre-compile context supplying ``add_save_task`` and
+                ``add_modify_task``.
+        """
+        if not self._is_active():
+            return
+        context["add_modify_task"](
+            constants.ReactRouter.VITE_CONFIG_FILE,
+            _inject_inspector_into_vite_config,
+        )
+
+    def get_frontend_development_dependencies(
+        self, **context: Unpack[CommonContext]
+    ) -> list[str]:
+        """Add ``launch-editor`` so the dev-server middleware can open files.
+
+        Args:
+            context: The context for the plugin.
+
+        Returns:
+            ``["launch-editor@..."]`` when active, otherwise empty.
+        """
+        base = list(super().get_frontend_development_dependencies(**context))
+        if self._is_active():
+            base.append(f"launch-editor@{LAUNCH_EDITOR_VERSION}")
+        return base
+
+    def get_static_assets(
+        self, **context: Unpack[CommonContext]
+    ) -> Sequence[tuple[Path, str | bytes]]:
+        """Browser assets, source map, and the Vite plugin file.
+
+        Args:
+            context: The context for the plugin.
+
+        Returns:
+            ``(path, content)`` pairs for each generated artifact, or an
+            empty tuple when inactive.
+        """
+        if not self._is_active():
+            return ()
+        public = Path(constants.Dirs.PUBLIC) / PUBLIC_DIRNAME
+        assets: list[tuple[Path, str | bytes]] = [
+            (public / name, content) for name, content in _asset_payloads()
+        ]
+        assets.extend((
+            (
+                public / SOURCE_MAP_FILENAME,
+                json.dumps(_source_map_payload(), separators=(",", ":")),
+            ),
+            (
+                Path(INSPECTOR_PLUGIN_FILE),
+                _vite_plugin_text(self.editor),
+            ),
+        ))
+        return assets
+
+    def _build_head_components(self) -> list[Component]:
+        from reflex_components_core.el.elements.scripts import Script
+
+        from reflex_base.config import get_config
+
+        config = get_config()
+        payload = json.dumps({
+            SHORTCUT_CONFIG_KEY: parse_shortcut(self.shortcut).to_json_payload(),
+            "sourceMapUrl": config.prepend_frontend_path(SOURCE_MAP_URL),
+            "cssUrl": config.prepend_frontend_path(INSPECTOR_CSS_URL),
+            "editorUrl": config.prepend_frontend_path(EDITOR_URL),
+        })
+        return [
+            Script.create(f"window.{WINDOW_CONFIG_KEY} = {payload};"),
+            Script.create(
+                type="module", src=config.prepend_frontend_path(INSPECTOR_JS_URL)
+            ),
+        ]
+
+
+def _inject_inspector_into_vite_config(content: str) -> str:
+    """Splice the inspector import + plugin call into a rendered Vite config.
+
+    Idempotent: a second call is a no-op when the import is already present.
+
+    Args:
+        content: The current ``vite.config.js`` source.
+
+    Returns:
+        The Vite config with the inspector wired in.
+    """
+    if _VITE_INSPECTOR_IMPORT_LINE in content:
+        return content
+    out = content.replace(
+        'import safariCacheBustPlugin from "./vite-plugin-safari-cachebust";\n',
+        'import safariCacheBustPlugin from "./vite-plugin-safari-cachebust";\n'
+        + _VITE_INSPECTOR_IMPORT_LINE,
+        1,
+    )
+    return out.replace(
+        _VITE_PLUGINS_ANCHOR,
+        _VITE_PLUGINS_ANCHOR + _VITE_INSPECTOR_PLUGIN_CALL,
+        1,
+    )
+
+
+def _asset_source_dir() -> Path:
+    import reflex_base
+
+    return Path(reflex_base.__file__).resolve().parent / "assets" / "inspector"
+
+
+@functools.cache
+def _asset_payloads() -> tuple[tuple[str, bytes], ...]:
+    """Read the bundled inspector browser assets once per process.
+
+    Returns:
+        ``(filename, bytes)`` for every file under ``assets/inspector/``.
+    """
+    return tuple(
+        (asset.name, asset.read_bytes())
+        for asset in _asset_source_dir().iterdir()
+        if asset.is_file()
+    )
+
+
+def _source_map_payload() -> dict[str, dict[str, Any]]:
+    return {
+        str(cid): {
+            "file": info.file,
+            "line": info.line,
+            "column": info.column,
+            "component": info.component,
+        }
+        for cid, info in capture.snapshot().items()
+    }
+
+
+@functools.cache
+def _vite_plugin_text(editor: str) -> str:
+    """Render the Vite plugin file content.
+
+    Args:
+        editor: Editor invocation forwarded to ``launch-editor`` via
+            ``REFLEX_EDITOR``. Empty string defers to env vars.
+
+    Returns:
+        The plugin source code as a string.
+    """
+    editor_literal = json.dumps(editor)
+    editor_clause = (
+        f"      process.env.REFLEX_EDITOR ||= {editor_literal};\n" if editor else ""
+    )
+    return rf"""// Auto-generated by Reflex frontend inspector. Do not edit.
+import reflexEditorMiddleware from "./public/{PUBLIC_DIRNAME}/dev_server_middleware.js";
+
+export default function {_INSPECTOR_VITE_IMPORT}() {{
+  return {{
+    name: "reflex-frontend-inspector",
+    apply: 'serve',
+    configureServer(server) {{
+{editor_clause}      server.middlewares.use(reflexEditorMiddleware);
+    }},
+  }};
+}}
+"""
+
+
+INSPECTOR_DATA_ATTR = DATA_ATTR
+
+__all__ = [
+    "INSPECTOR_DATA_ATTR",
+    "FrontendInspectorPlugin",
+]
diff --git a/packages/reflex-base/src/reflex_base/utils/console.py b/packages/reflex-base/src/reflex_base/utils/console.py
index 962008e42e0..0ee94673f21 100644
--- a/packages/reflex-base/src/reflex_base/utils/console.py
+++ b/packages/reflex-base/src/reflex_base/utils/console.py
@@ -9,6 +9,7 @@
 import shutil
 import sys
 import time
+from collections.abc import Callable
 from pathlib import Path
 from types import FrameType, ModuleType
 
@@ -270,21 +271,14 @@ def _exclude_paths_from_frame_info() -> list[Path]:
     import socketio
     import typing_extensions
 
-    import reflex_base
-
-    try:
-        import reflex as rx
-    except ImportError:
-        rx = None
+    from reflex_base.utils import frames
 
     # Exclude utility modules that should never be the source of deprecated reflex usage.
     exclude_modules: list[ModuleType | None] = [
         click,
-        rx,
         typing_extensions,
         socketio,
         granian,
-        reflex_base,
     ]
 
     modules_paths = [file for m in exclude_modules if m and (file := m.__file__)] + [
@@ -296,6 +290,7 @@ def _exclude_paths_from_frame_info() -> list[Path]:
         p.parent.resolve() if (p := Path(file)).name == "__init__.py" else p.resolve()
         for file in modules_paths
     ]
+    exclude_roots.extend(frames.discover_framework_roots())
     # Specifically exclude the reflex cli module.
     if reflex_bin := shutil.which(b"reflex"):
         exclude_roots.append(Path(reflex_bin.decode()))
@@ -303,15 +298,20 @@ def _exclude_paths_from_frame_info() -> list[Path]:
     return exclude_roots
 
 
+@once
+def _console_framework_frame_predicate() -> Callable[[str], bool]:
+    from reflex_base.utils import frames
+
+    return frames.make_framework_frame_predicate(_exclude_paths_from_frame_info)
+
+
 def _get_first_non_framework_frame() -> FrameType | None:
-    exclude_roots = _exclude_paths_from_frame_info()
-
-    frame = inspect.currentframe()
-    while frame := frame and frame.f_back:
-        frame_path = Path(inspect.getfile(frame)).resolve()
-        if not any(frame_path.is_relative_to(root) for root in exclude_roots):
-            break
-    return frame
+    from reflex_base.utils import frames
+
+    starting = inspect.currentframe()
+    return frames.walk_to_first_non_framework_frame(
+        starting.f_back if starting else None, _console_framework_frame_predicate()
+    )
 
 
 def deprecate(
diff --git a/packages/reflex-base/src/reflex_base/utils/frames.py b/packages/reflex-base/src/reflex_base/utils/frames.py
new file mode 100644
index 00000000000..4e75c761792
--- /dev/null
+++ b/packages/reflex-base/src/reflex_base/utils/frames.py
@@ -0,0 +1,152 @@
+"""Stack-walking helpers shared between the inspector and console modules.
+
+The two consumers each need a different ``is_framework_frame`` decision (the
+inspector skips Reflex packages only; the console additionally skips stdlib
+and a few third-party libraries) but share the underlying mechanics: walking
+``frame.f_back`` until the predicate flips.
+"""
+
+from __future__ import annotations
+
+import importlib
+import importlib.metadata
+import sys
+from collections.abc import Callable, Iterable
+from pathlib import Path
+from types import FrameType
+
+
+class _FrameworkFramePredicate:
+    """Cached predicate testing whether a filename lives under any root.
+
+    The roots are pulled from ``roots_provider`` on each cache miss, so the
+    caller can replace them dynamically (e.g. after a sub-package import)
+    and call :meth:`cache_clear` to invalidate prior results.
+    """
+
+    __slots__ = ("_cache", "_roots_provider")
+
+    def __init__(self, roots_provider: Callable[[], Iterable[Path]]):
+        self._roots_provider = roots_provider
+        self._cache: dict[str, bool] = {}
+
+    def __call__(self, filename: str) -> bool:
+        cached = self._cache.get(filename)
+        if cached is not None:
+            return cached
+        try:
+            path = Path(filename).resolve()
+        except OSError:
+            self._cache[filename] = True
+            return True
+        result = any(path.is_relative_to(root) for root in self._roots_provider())
+        self._cache[filename] = result
+        return result
+
+    def cache_clear(self) -> None:
+        """Drop all cached decisions so the next call re-checks the roots."""
+        self._cache.clear()
+
+
+def make_framework_frame_predicate(
+    roots_provider: Callable[[], Iterable[Path]],
+) -> _FrameworkFramePredicate:
+    """Build a cached ``filename -> bool`` predicate over the given roots.
+
+    Args:
+        roots_provider: Returns the roots to test against on each cache miss.
+            Allows the predicate to track roots that change over time.
+
+    Returns:
+        A callable ``(filename) -> bool`` with a ``cache_clear()`` method.
+    """
+    return _FrameworkFramePredicate(roots_provider)
+
+
+def is_framework_package(name: str) -> bool:
+    """Whether a top-level package name is part of the Reflex framework.
+
+    Args:
+        name: A top-level package name as it would appear in ``sys.modules``.
+
+    Returns:
+        True for ``reflex``/``reflex_base`` and any ``reflex_components_*``
+        distribution; False for anything else.
+    """
+    if name in ("reflex", "reflex_base"):
+        return True
+    return name.startswith("reflex_components_")
+
+
+def _roots_from_sys_modules() -> list[Path]:
+    roots: list[Path] = []
+    for name, module in list(sys.modules.items()):
+        if "." in name or not is_framework_package(name):
+            continue
+        file = getattr(module, "__file__", None)
+        if file is not None:
+            roots.append(Path(file).parent.resolve())
+    return roots
+
+
+def _roots_from_distributions() -> list[Path]:
+    roots: list[Path] = []
+    try:
+        distributions = list(importlib.metadata.distributions())
+    except Exception:
+        return roots
+
+    for dist in distributions:
+        try:
+            top_level = (dist.read_text("top_level.txt") or "").splitlines()
+        except Exception:
+            continue
+        for raw in top_level:
+            top = raw.strip()
+            if not top or not is_framework_package(top) or top in sys.modules:
+                continue
+            try:
+                pkg = importlib.import_module(top)
+            except Exception:
+                continue
+            file = getattr(pkg, "__file__", None)
+            if file is not None:
+                roots.append(Path(file).parent.resolve())
+    return roots
+
+
+def discover_framework_roots() -> tuple[Path, ...]:
+    """Find directories belonging to Reflex framework packages.
+
+    Walks already-imported modules in ``sys.modules`` and the installed
+    distributions reported by :mod:`importlib.metadata`. A package whose
+    name passes :func:`is_framework_package` is included regardless of how
+    it was installed (editable, wheel, src layout).
+
+    Returns:
+        Resolved, deduplicated paths to every framework package directory.
+    """
+    return tuple(dict.fromkeys(_roots_from_sys_modules() + _roots_from_distributions()))
+
+
+def walk_to_first_non_framework_frame(
+    start_frame: FrameType | None,
+    is_framework_frame: Callable[[str], bool],
+) -> FrameType | None:
+    """Walk ``frame.f_back`` until ``is_framework_frame`` returns False.
+
+    Args:
+        start_frame: The starting frame; the walk includes this frame.
+        is_framework_frame: Predicate over ``co_filename``. Callers may pass a
+            cached function to avoid resolving the same path repeatedly.
+
+    Returns:
+        The first non-framework frame, or ``None`` if no such frame exists in
+        the chain.
+    """
+    frame = start_frame
+    while frame is not None:
+        if not is_framework_frame(frame.f_code.co_filename):
+            return frame
+        frame = frame.f_back
+    return None
diff --git a/packages/reflex-base/src/reflex_base/utils/pyi_generator.py b/packages/reflex-base/src/reflex_base/utils/pyi_generator.py
index 0425f03d7b1..e24df46661a 100644
--- a/packages/reflex-base/src/reflex_base/utils/pyi_generator.py
+++ b/packages/reflex-base/src/reflex_base/utils/pyi_generator.py
@@ -83,6 +83,7 @@ def _safe_issubclass(cls: Any, cls_check: Any | tuple[Any, ...]) -> bool:
     "tag",
     "is_default",
     "special_props",
+    "_inspector_id",
     "_is_tag_in_global_scope",
     "_invalid_children",
     "_memoization_mode",
diff --git a/reflex/compiler/compiler.py b/reflex/compiler/compiler.py
index 39ff4931a9e..150363233ed 100644
--- a/reflex/compiler/compiler.py
+++ b/reflex/compiler/compiler.py
@@ -1030,6 +1030,9 @@ def compile_app(
         app._add_optional_endpoints()
         return
 
+    for plugin in config.plugins:
+        plugin.start_compile(app)
+
     progress = (
         Progress(
             *Progress.get_default_columns()[:-1],
diff --git a/reflex/plugins/__init__.py b/reflex/plugins/__init__.py
index 9bd4335ab02..cfe5f07ccb3 100644
--- a/reflex/plugins/__init__.py
+++ b/reflex/plugins/__init__.py
@@ -6,6 +6,7 @@
     CompileContext,
     CompilerHooks,
     ComponentAndChildren,
+    FrontendInspectorPlugin,
     PageContext,
     Plugin,
     PreCompileContext,
@@ -25,6 +26,7 @@
     "CompileContext",
     "CompilerHooks",
     "ComponentAndChildren",
+    "FrontendInspectorPlugin",
     "PageContext",
     "Plugin",
     "PreCompileContext",
diff --git a/tests/units/components/test_component_inspector.py b/tests/units/components/test_component_inspector.py
new file mode 100644
index 00000000000..13a276c5849
--- /dev/null
+++ b/tests/units/components/test_component_inspector.py
@@ -0,0 +1,61 @@
+"""Component-level integration tests for the frontend inspector."""
+
+from __future__ import annotations
+
+import pytest
+from reflex_base.inspector import capture, state
+
+import reflex as rx
+
+
+@pytest.fixture
+def enabled_inspector():
+    capture.reset()
+    state.set_enabled(True)
+    yield
+    state.set_enabled(False)
+    capture.reset()
+
+
+def _props_for(component: rx.Component) -> list[str]:
+    rendered = component.render()
+    if isinstance(rendered, dict):
+        return list(rendered.get("props", []))
+    return []
+
+
+def test_create_attaches_inspector_id_when_enabled(enabled_inspector):
+    box = rx.box("hello")
+    assert box._inspector_id is not None
+    info = capture.snapshot()[box._inspector_id]
+    assert info.component == "Box"
+
+
+def test_create_skips_id_when_disabled():
+    capture.reset()
+    state.set_enabled(False)
+    box = rx.box("hello")
+    assert box._inspector_id is None
+    assert all("data-rx" not in p for p in _props_for(box))
+
+
+def test_render_emits_data_rx(enabled_inspector):
+    text = rx.text("hi")
+    rendered_props = _props_for(text)
+    assert any('"data-rx"' in p for p in rendered_props), rendered_props
+
+
+def test_render_skips_fragment(enabled_inspector):
+    from reflex_components_core.base.fragment import Fragment
+
+    frag = Fragment.create()
+    # Fragment is intentionally excluded so React does not warn about an
+    # unknown attribute on a non-DOM node.
+    rendered_props = _props_for(frag)
+    assert all("data-rx" not in p for p in rendered_props)
+
+
+def test_each_component_gets_distinct_id(enabled_inspector):
+    a = rx.box("a")
+    b = rx.box("b")
+    assert a._inspector_id != b._inspector_id
diff --git a/tests/units/plugins/test_frontend_inspector.py b/tests/units/plugins/test_frontend_inspector.py
new file mode 100644
index 00000000000..3b93b37099a
--- /dev/null
+++ b/tests/units/plugins/test_frontend_inspector.py
@@ -0,0 +1,121 @@
+"""Tests for the FrontendInspectorPlugin."""
+
+from __future__ import annotations
+
+from collections.abc import Callable
+from pathlib import Path
+
+import pytest
+from reflex_base import inspector
+from reflex_base.constants import Env
+from reflex_base.plugins.frontend_inspector import (
+    FrontendInspectorPlugin,
+    _inject_inspector_into_vite_config,
+    _vite_plugin_text,
+)
+
+from reflex.utils import frontend_skeleton
+
+
+def test_vite_plugin_is_dev_only():
+    """The rendered Vite plugin file is ``apply: 'serve'`` (dev only)."""
+    rendered = _vite_plugin_text(editor="")
+    assert "apply: 'serve'" in rendered
+    assert "configureServer" in rendered
+    assert "reflexEditorMiddleware" in rendered
+
+
+def test_vite_plugin_omits_editor_when_unset():
+    rendered = _vite_plugin_text(editor="")
+    assert "REFLEX_EDITOR" not in rendered
+
+
+def test_vite_plugin_threads_editor_through():
+    rendered = _vite_plugin_text(editor="code -g")
+    assert 'process.env.REFLEX_EDITOR ||= "code -g";' in rendered
+
+
+def test_inject_inspector_into_vite_config_is_idempotent(
+    monkeypatch: pytest.MonkeyPatch,
+):
+    """Re-injecting into an already-modified Vite config is a no-op."""
+    import reflex as rx
+
+    config = rx.Config(app_name="test")
+    monkeypatch.setattr(frontend_skeleton, "get_config", lambda: config)
+    rendered = frontend_skeleton._compile_vite_config(config)
+
+    once = _inject_inspector_into_vite_config(rendered)
+    assert "reflexInspectorPlugin()" in once
+    assert './reflex-inspector-plugin.js"' in once
+    # One import + one plugin call; idempotency means counts stay at 1.
+    assert once.count("reflexInspectorPlugin()") == 1
+    twice = _inject_inspector_into_vite_config(once)
+    assert twice == once
+
+
+def test_static_assets_include_browser_files_and_plugin(
+    monkeypatch: pytest.MonkeyPatch,
+):
+    """Active plugin yields the JS/CSS assets and the Vite plugin file."""
+    monkeypatch.setenv("REFLEX_ENV_MODE", Env.DEV.value)
+    plugin = FrontendInspectorPlugin()
+    paths = {Path(p).as_posix(): content for p, content in plugin.get_static_assets()}
+    public = Path("public") / inspector.PUBLIC_DIRNAME
+    assert (public / "inspector.js").as_posix() in paths
+    assert (public / "inspector.css").as_posix() in paths
+    assert (public / "dev_server_middleware.js").as_posix() in paths
+    assert (public / inspector.SOURCE_MAP_FILENAME).as_posix() in paths
+    assert inspector.INSPECTOR_PLUGIN_FILE in paths
+    plugin_text = paths[inspector.INSPECTOR_PLUGIN_FILE]
+    assert isinstance(plugin_text, str)
+    assert "reflexInspectorPlugin" in plugin_text
+
+
+def test_inactive_plugin_yields_nothing(monkeypatch: pytest.MonkeyPatch):
+    """Every emission hook returns empty under ``REFLEX_ENV_MODE=prod``."""
+    monkeypatch.setenv("REFLEX_ENV_MODE", Env.PROD.value)
+    plugin = FrontendInspectorPlugin()
+    assert plugin.get_static_assets() == ()
+    assert plugin.get_frontend_development_dependencies() == []
+
+
+def _noop_save_task(task, /, *args, **kwargs):
+    return None
+
+
+def test_pre_compile_registers_modify_task(monkeypatch: pytest.MonkeyPatch):
+    """``pre_compile`` queues a Vite-config modify task when active."""
+    import reflex_base.constants as base_constants
+
+    monkeypatch.setenv("REFLEX_ENV_MODE", Env.DEV.value)
+    plugin = FrontendInspectorPlugin()
+    queued: list[tuple[str, Callable[[str], str]]] = []
+
+    plugin.pre_compile(
+        add_save_task=_noop_save_task,
+        add_modify_task=lambda path, fn: queued.append((path, fn)),
+        radix_themes_plugin=None,
+        unevaluated_pages=[],
+    )
+    assert queued
+    target_path, modify_fn = queued[0]
+    assert target_path == base_constants.ReactRouter.VITE_CONFIG_FILE
+    sample = (
+        'import safariCacheBustPlugin from "./vite-plugin-safari-cachebust";\n'
+        "    safariCacheBustPlugin(),\n"
+    )
+    assert "reflexInspectorPlugin()" in modify_fn(sample)
+
+
+def test_pre_compile_inactive_does_nothing(monkeypatch: pytest.MonkeyPatch):
+    monkeypatch.setenv("REFLEX_ENV_MODE", Env.PROD.value)
+    plugin = FrontendInspectorPlugin()
+    queued: list[tuple[str, Callable[[str], str]]] = []
+    plugin.pre_compile(
+        add_save_task=_noop_save_task,
+        add_modify_task=lambda path, fn: queued.append((path, fn)),
+        radix_themes_plugin=None,
+        unevaluated_pages=[],
+    )
+    assert queued == []
diff --git a/tests/units/reflex_base/inspector/__init__.py b/tests/units/reflex_base/inspector/__init__.py
new file mode 100644
index 00000000000..e69de29bb2d
diff --git a/tests/units/reflex_base/inspector/test_browser_contract.py b/tests/units/reflex_base/inspector/test_browser_contract.py
new file mode 100644
index 00000000000..b632bf463f5
--- /dev/null
+++ b/tests/units/reflex_base/inspector/test_browser_contract.py
@@ -0,0 +1,81 @@
+"""Contract test pinning the Python <-> JS inspector boundary.
+
+The browser script ``inspector.js`` is hand-written; the head ``<script>``
+tags are emitted by ``FrontendInspectorPlugin.get_head_components``. Both
+refer to the same constants (``data-rx`` attribute, ``/__reflex/...`` URLs,
+``__REFLEX_INSPECTOR_CONFIG__`` window key, ``shortcut`` payload key). This
+test asserts that every constant defined on the Python side appears verbatim
+in the JS, so a future rename on either side fails CI instead of desyncing
+silently.
+"""
+
+from __future__ import annotations
+
+import json
+from pathlib import Path
+
+import pytest
+from reflex_base import inspector
+from reflex_base.constants import Env
+from reflex_base.plugins.frontend_inspector import _asset_source_dir
+
+import reflex as rx
+
+
+@pytest.fixture
+def inspector_js_text() -> str:
+    return _asset_source_dir().joinpath("inspector.js").read_text()
+
+
+@pytest.mark.parametrize(
+    "constant",
+    [
+        inspector.DATA_ATTR,
+        inspector.SOURCE_MAP_URL,
+        inspector.INSPECTOR_CSS_URL,
+        inspector.EDITOR_URL,
+        inspector.WINDOW_CONFIG_KEY,
+        inspector.SHORTCUT_CONFIG_KEY,
+    ],
+)
+def test_browser_script_references_python_constants(
+    inspector_js_text: str, constant: str
+):
+    """Every shared constant must appear verbatim in ``inspector.js``."""
+    assert constant in inspector_js_text, (
+        f"Inspector JS does not reference Python constant {constant!r}; "
+        f"either the Python constant or the JS file drifted."
+    )
+
+
+def test_head_payload_uses_shortcut_key(monkeypatch: pytest.MonkeyPatch):
+    """The window-config payload uses the agreed ``shortcut`` key.
+
+    The browser reads ``config.shortcut`` — if the Python side ever
+    renames the key, this test fails before it ships.
+    """
+    monkeypatch.setenv("REFLEX_ENV_MODE", Env.DEV.value)
+    plugin = rx.plugins.FrontendInspectorPlugin()
+    components = plugin._build_head_components()
+    config_script = components[0].render()
+    rendered = json.dumps(config_script)
+    assert inspector.SHORTCUT_CONFIG_KEY in rendered
+    assert inspector.WINDOW_CONFIG_KEY in rendered
+
+
+def test_asset_directory_exists():
+    """The bundled asset directory must exist where the plugin reads from."""
+    src_dir = _asset_source_dir()
+    assert src_dir.is_dir(), f"Inspector asset directory missing: {src_dir}"
+    assert (src_dir / "inspector.js").is_file()
+    assert (src_dir / "inspector.css").is_file()
+    assert (src_dir / "dev_server_middleware.js").is_file()
+
+
+def test_source_map_url_matches_emit_path(tmp_path: Path):
+    """``SOURCE_MAP_URL`` must resolve to the path the plugin writes to."""
+    expected_disk_path = (
+        tmp_path / inspector.PUBLIC_DIRNAME / inspector.SOURCE_MAP_FILENAME
+    )
+    expected_url_path = inspector.SOURCE_MAP_URL.lstrip("/")
+    assert expected_disk_path.relative_to(tmp_path).as_posix() == expected_url_path
diff --git a/tests/units/reflex_base/inspector/test_browser_runtime.py b/tests/units/reflex_base/inspector/test_browser_runtime.py
new file mode 100644
index 00000000000..69bd8087022
--- /dev/null
+++ b/tests/units/reflex_base/inspector/test_browser_runtime.py
@@ -0,0 +1,301 @@
+"""Runtime tests for the browser-side inspector script."""
+
+from __future__ import annotations
+
+import json
+import shutil
+import subprocess
+import textwrap
+
+import pytest
+from reflex_base.plugins.frontend_inspector import _asset_source_dir
+
+
+def _run_inspector_harness(scenario: str):
+    """Run an inspector browser-script scenario in Node.
+
+    Args:
+        scenario: JavaScript body to run after the fake browser environment loads.
+    """
+    node = shutil.which("node")
+    if node is None:
+        pytest.skip("node is required for inspector browser runtime tests")
+
+    inspector_path = _asset_source_dir() / "inspector.js"
+    script = f"""
+const fs = require("fs");
+const vm = require("vm");
+
+const inspectorSource = fs.readFileSync({json.dumps(str(inspector_path))}, "utf8");
+
+class Element {{
+  constructor(tagName) {{
+    this.tagName = tagName.toUpperCase();
+    this.nodeType = 1;
+    this.id = "";
+    this.type = "";
+    this.rel = "";
+    this.href = "";
+    this.textContent = "";
+    this.innerHTML = "";
+    this.className = "";
+    this.parentElement = null;
+    this.children = [];
+    this.style = {{}};
+    this.dataset = {{}};
+    this.attributes = new Map();
+    this.listeners = new Map();
+  }}
+
+  appendChild(child) {{
+    child.parentElement = this;
+    this.children.push(child);
+    return child;
+  }}
+
+  addEventListener(type, listener) {{
+    const listeners = this.listeners.get(type) || [];
+    listeners.push(listener);
+    this.listeners.set(type, listeners);
+  }}
+
+  hasAttribute(name) {{
+    return this.attributes.has(name);
+  }}
+
+  getAttribute(name) {{
+    return this.attributes.get(name) || null;
+  }}
+
+  setAttribute(name, value) {{
+    this.attributes.set(name, String(value));
+  }}
+
+  getBoundingClientRect() {{
+    return {{ top: 12, left: 34, width: 56, height: 78 }};
+  }}
+}}
+
+const walk = (node, callback) => {{
+  if (callback(node)) return node;
+  for (const child of node.children) {{
+    const found = walk(child, callback);
+    if (found) return found;
+  }}
+  return null;
+}};
+
+const makeEvent = (overrides) => {{
+  const event = {{
+    target: null,
+    key: "",
+    code: "",
+    repeat: false,
+    altKey: false,
+    ctrlKey: false,
+    metaKey: false,
+    shiftKey: false,
+    defaultPrevented: false,
+    propagationStopped: false,
+    preventDefault() {{
+      this.defaultPrevented = true;
+    }},
+    stopPropagation() {{
+      this.propagationStopped = true;
+    }},
+  }};
+  return Object.assign(event, overrides);
+}};
+
+const createHarness = (config, maps) => {{
+  const documentListeners = new Map();
+  const windowListeners = new Map();
+  const sourceMapFetches = [];
+  const editorFetches = [];
+  const head = new Element("head");
+  const body = new Element("body");
+
+  const document = {{
+    readyState: "complete",
+    head,
+    body,
+    createElement(tagName) {{
+      return new Element(tagName);
+    }},
+    getElementById(id) {{
+      return (
+        walk(head, (node) => node.id === id) ||
+        walk(body, (node) => node.id === id)
+      );
+    }},
+    addEventListener(type, listener) {{
+      const listeners = documentListeners.get(type) || [];
+      listeners.push(listener);
+      documentListeners.set(type, listeners);
+    }},
+  }};
+
+  const session = new Map();
+  const sessionStorage = {{
+    getItem(key) {{
+      return session.has(key) ? session.get(key) : null;
+    }},
+    setItem(key, value) {{
+      session.set(key, String(value));
+    }},
+  }};
+
+  const window = {{
+    __REFLEX_INSPECTOR_CONFIG__: config,
+    location: {{ search: "" }},
+    addEventListener(type, listener) {{
+      const listeners = windowListeners.get(type) || [];
+      listeners.push(listener);
+      windowListeners.set(type, listeners);
+    }},
+  }};
+
+  let mapIndex = 0;
+  const fetch = async (url, options) => {{
+    const textUrl = String(url);
+    if (textUrl.startsWith(config.editorUrl)) {{
+      editorFetches.push({{ url: textUrl, options }});
+      return {{ ok: true, json: async () => ({{}}) }};
+    }}
+    sourceMapFetches.push({{ url: textUrl, options }});
+    const map = maps[Math.min(mapIndex, maps.length - 1)] || {{}};
+    mapIndex += 1;
+    return {{ ok: true, json: async () => map }};
+  }};
+
+  const context = vm.createContext({{
+    console,
+    Date,
+    document,
+    fetch,
+    navigator: {{ clipboard: {{ writeText: async () => undefined }} }},
+    sessionStorage,
+    URLSearchParams,
+    window,
+  }});
+  vm.runInContext(inspectorSource, context);
+
+  return {{
+    body,
+    document,
+    editorFetches,
+    makeEvent,
+    sourceMapFetches,
+    window,
+    dispatchDocument(type, event) {{
+      for (const listener of documentListeners.get(type) || []) {{
+        listener(event);
+      }}
+      return event;
+    }},
+  }};
+}};
+
+const assert = (condition, message) => {{
+  if (!condition) throw new Error(message);
+}};
+
+const flush = () => new Promise((resolve) => setTimeout(resolve, 0));
+
+(async () => {{
+{textwrap.indent(scenario, "  ")}
+}})().catch((error) => {{
+  console.error(error && error.stack ? error.stack : error);
+  process.exit(1);
+}});
+"""
+    result = subprocess.run(
+        [node, "-e", script],
+        capture_output=True,
+        check=False,
+        text=True,
+    )
+    assert result.returncode == 0, result.stderr + result.stdout
+
+
+def test_browser_script_uses_configured_modifier_for_hover_and_click():
+    """Hover/click inspection uses the configured shortcut modifier."""
+    _run_inspector_harness("""
+const harness = createHarness(
+  {
+    sourceMapUrl: "/__reflex/source-map.json",
+    cssUrl: "/__reflex/inspector.css",
+    editorUrl: "/__open-in-editor",
+    shortcut: { key: "x", alt: false, ctrl: true, meta: false, shift: false },
+  },
+  [{ "1": { component: "Button", file: "/app/page.py", line: 7, column: 3 } }]
+);
+
+const target = harness.document.createElement("button");
+target.setAttribute("data-rx", "1");
+harness.body.appendChild(target);
+
+harness.dispatchDocument(
+  "keydown",
+  harness.makeEvent({ key: "Control", code: "ControlLeft", ctrlKey: true })
+);
+await flush();
+
+harness.dispatchDocument(
+  "mousemove",
+  harness.makeEvent({ target, ctrlKey: true })
+);
+const label = harness.document.getElementById("__reflex_inspector_label");
+assert(label.style.display === "block", "Ctrl hover did not show the overlay");
+
+const clickEvent = harness.dispatchDocument(
+  "click",
+  harness.makeEvent({ target, ctrlKey: true })
+);
+await flush();
+assert(clickEvent.defaultPrevented, "Ctrl click did not become an inspector action");
+const openedUrl = harness.editorFetches[0] ? harness.editorFetches[0].url : "";
+assert(
+  harness.editorFetches.length === 1 &&
+    decodeURIComponent(openedUrl).includes("/app/page.py:7:3"),
+  "Ctrl click did not open the configured source location"
+);
+
+harness.dispatchDocument(
+  "keyup",
+  harness.makeEvent({ key: "Control", code: "ControlLeft" })
+);
+assert(label.style.display === "none", "Ctrl release did not hide the overlay");
+""")
+
+
+def test_browser_script_refetches_source_map_on_reactivation():
+    """Re-enabling the persistent inspector fetches a fresh source map."""
+    _run_inspector_harness("""
+const harness = createHarness(
+  {
+    sourceMapUrl: "/__reflex/source-map.json",
+    cssUrl: "/__reflex/inspector.css",
+    editorUrl: "/__open-in-editor",
+    shortcut: { key: "x", alt: true, ctrl: false, meta: false, shift: false },
+  },
+  [
+    { "1": { component: "Box", file: "/app/old.py", line: 1, column: 1 } },
+    {
+      "1": { component: "Box", file: "/app/new.py", line: 2, column: 1 },
+      "2": { component: "Text", file: "/app/new.py", line: 3, column: 1 },
+    },
+  ]
+);
+
+await harness.window.__REFLEX_INSPECTOR__.enable();
+assert(harness.window.__REFLEX_INSPECTOR__.sourceCount() === 1, "first map not loaded");
+await harness.window.__REFLEX_INSPECTOR__.disable();
+await harness.window.__REFLEX_INSPECTOR__.enable();
+
+assert(harness.sourceMapFetches.length === 2, "source map was not re-fetched");
+assert(
+  harness.window.__REFLEX_INSPECTOR__.sourceCount() === 2,
+  "reactivation kept the stale source map"
+);
+""")
diff --git a/tests/units/reflex_base/inspector/test_capture.py b/tests/units/reflex_base/inspector/test_capture.py
new file mode 100644
index 00000000000..be03756dbf9
--- /dev/null
+++ b/tests/units/reflex_base/inspector/test_capture.py
@@ -0,0 +1,75 @@
+"""Tests for the frontend inspector frame-capture machinery."""
+
+from __future__ import annotations
+
+from pathlib import Path
+
+import pytest
+from reflex_base.inspector import capture, state
+
+
+@pytest.fixture
+def enabled_inspector():
+    """Enable the inspector and clear the registry around each test."""
+    capture.reset()
+    state.set_enabled(True)
+    yield
+    state.set_enabled(False)
+    capture.reset()
+
+
+def test_capture_returns_none_when_disabled():
+    capture.reset()
+    state.set_enabled(False)
+    assert capture.capture("Box") is None
+    assert capture.snapshot() == {}
+
+
+def test_capture_records_user_frame(enabled_inspector):
+    cid = capture.capture("Box")
+    assert cid == 1
+    info = capture.snapshot()[cid]
+    assert info.component == "Box"
+    # The frame walked is this test file, not the framework.
+    assert info.file == str(Path(__file__).resolve())
+    assert info.line > 0
+    assert info.column == 1
+
+
+def test_capture_skips_framework_frames(enabled_inspector, monkeypatch):
+    # Treat every frame as framework code; the walk must run out of frames
+    # without finding user code and return None.
+    monkeypatch.setattr(capture, "_is_framework_frame", lambda _: True)
+
+    def helper():
+        return capture.capture("Box")
+
+    cid = helper()
+    assert cid is None
+    assert capture.snapshot() == {}
+
+
+def test_capture_assigns_unique_ids(enabled_inspector):
+    a = capture.capture("Box")
+    b = capture.capture("Text")
+    assert a is not None
+    assert b is not None
+    assert a != b
+    assert capture.snapshot()[a].component == "Box"
+    assert capture.snapshot()[b].component == "Text"
+
+
+def test_is_framework_frame_handles_unresolvable_paths():
+    # Bogus paths default to "framework" so we never accidentally pin a
+    # source to garbage.
+    assert capture._is_framework_frame("/does/not/exist/foo.py") in (True, False)
+
+
+def test_is_framework_package_recognises_components():
+    from reflex_base.utils import frames
+
+    assert frames.is_framework_package("reflex")
+    assert frames.is_framework_package("reflex_base")
+    assert frames.is_framework_package("reflex_components_radix")
+    assert not frames.is_framework_package("reflex_dashboard")
+    assert not frames.is_framework_package("my_app")
diff --git a/tests/units/reflex_base/inspector/test_shortcut.py b/tests/units/reflex_base/inspector/test_shortcut.py
new file mode 100644
index 00000000000..a9dacb3610e
--- /dev/null
+++ b/tests/units/reflex_base/inspector/test_shortcut.py
@@ -0,0 +1,38 @@
+"""Tests for the keyboard-shortcut parser."""
+
+from __future__ import annotations
+
+import pytest
+from reflex_base.inspector.shortcut import Shortcut, parse_shortcut
+from reflex_base.utils.exceptions import ConfigError
+
+
+def test_parse_simple_shortcut():
+    assert parse_shortcut("alt+x") == Shortcut(key="x", alt=True)
+
+
+def test_parse_normalises_modifier_aliases():
+    assert parse_shortcut("Cmd+Shift+I") == Shortcut(key="i", meta=True, shift=True)
+    assert parse_shortcut("option+/") == Shortcut(key="/", alt=True)
+    assert parse_shortcut("Control+Super+k") == Shortcut(key="k", ctrl=True, meta=True)
+
+
+def test_parse_lower_cases_key():
+    assert parse_shortcut("Alt+X").key == "x"
+
+
+def test_parse_rejects_empty_input():
+    with pytest.raises(ConfigError):
+        parse_shortcut("")
+    with pytest.raises(ConfigError):
+        parse_shortcut("   ")
+
+
+def test_parse_rejects_only_modifiers():
+    with pytest.raises(ConfigError):
+        parse_shortcut("alt+")
+
+
+def test_parse_rejects_unknown_modifier():
+    with pytest.raises(ConfigError):
+        parse_shortcut("hyper+x")
diff --git a/tests/units/reflex_base/inspector/test_state.py b/tests/units/reflex_base/inspector/test_state.py
new file mode 100644
index 00000000000..286d31f7bd7
--- /dev/null
+++ b/tests/units/reflex_base/inspector/test_state.py
@@ -0,0 +1,25 @@
+"""Tests for the global enabled flag."""
+
+from __future__ import annotations
+
+from reflex_base.inspector import state
+
+
+def test_default_disabled():
+    # State is module-level, so reset to default before checking.
+    state.set_enabled(False)
+    assert state.is_enabled() is False
+
+
+def test_set_enabled_round_trip():
+    state.set_enabled(True)
+    assert state.is_enabled() is True
+    state.set_enabled(False)
+    assert state.is_enabled() is False
+
+
+def test_is_enabled_returns_bool():
+    state.set_enabled(True)
+    assert state.is_enabled() is True
+    state.set_enabled(False)
+    assert state.is_enabled() is False
diff --git a/tests/units/test_config.py b/tests/units/test_config.py
index 68b2c64e975..a9ec7e72826 100644
--- a/tests/units/test_config.py
+++ b/tests/units/test_config.py
@@ -557,3 +557,72 @@ def test_no_disable_adds_builtin(self):
         """Test that builtin plugins are added when not disabled."""
         config = rx.Config(app_name="test")
         assert any(isinstance(p, SitemapPlugin) for p in config.plugins)
+
+
+class TestFrontendInspectorPlugin:
+    """Tests for ``FrontendInspectorPlugin`` lifecycle and gating."""
+
+    def test_plugin_defaults(self):
+        """Default shortcut and editor match the documented values."""
+        plugin = rx.plugins.FrontendInspectorPlugin()
+        assert plugin.shortcut == "alt+x"
+        assert plugin.editor == ""
+
+    def test_config_init_does_not_mutate_global_state(
+        self, monkeypatch: pytest.MonkeyPatch
+    ):
+        """Constructing the plugin is declarative; runtime state is untouched.
+
+        Runtime state is flipped later by ``start_compile`` (called from the
+        compile path). This protects tests and parallel callers from
+        order-dependent leakage.
+        """
+        from reflex_base.inspector import state as inspector_state
+
+        monkeypatch.setenv("REFLEX_ENV_MODE", Env.DEV.value)
+        inspector_state.set_enabled(False)
+        rx.plugins.FrontendInspectorPlugin()
+        assert inspector_state.is_enabled() is False
+
+    def test_active_gating_re_reads_env_mode(self, monkeypatch: pytest.MonkeyPatch):
+        """The active gate re-reads ``REFLEX_ENV_MODE`` at every call.
+
+        Regression: ``reflex export --env prod`` constructs ``Config()`` under
+        dev and only flips ``REFLEX_ENV_MODE`` later. The plugin must observe
+        the flipped env at emission time, not at construction time.
+        """
+        plugin = rx.plugins.FrontendInspectorPlugin()
+
+        monkeypatch.setenv("REFLEX_ENV_MODE", Env.DEV.value)
+        assert plugin.get_frontend_development_dependencies()
+
+        monkeypatch.setenv("REFLEX_ENV_MODE", Env.PROD.value)
+        assert plugin.get_frontend_development_dependencies() == []
+
+    def test_start_compile_syncs_state_and_resets(
+        self, monkeypatch: pytest.MonkeyPatch
+    ):
+        """``start_compile`` flips the runtime flag and clears stale captures."""
+        from reflex_base.inspector import capture as inspector_capture
+        from reflex_base.inspector import state as inspector_state
+
+        plugin = rx.plugins.FrontendInspectorPlugin()
+        app = rx.App()
+
+        monkeypatch.setenv("REFLEX_ENV_MODE", Env.DEV.value)
+        inspector_capture._REGISTRY[999] = inspector_capture.SourceInfo(
+            file="/leftover.py", line=1, column=1, component="Stale"
+        )
+        baseline = len(app.head_components)
+        plugin.start_compile(app)
+        assert inspector_state.is_enabled() is True
+        assert inspector_capture.snapshot() == {}
+        assert len(app.head_components) == baseline + 2
+
+        # Calling again on the same app is idempotent.
+        plugin.start_compile(app)
+        assert len(app.head_components) == baseline + 2
+
+        monkeypatch.setenv("REFLEX_ENV_MODE", Env.PROD.value)
+        plugin.start_compile(app)
+        assert inspector_state.is_enabled() is False
diff --git a/tests/units/utils/test_frontend_skeleton.py b/tests/units/utils/test_frontend_skeleton.py
new file mode 100644
index 00000000000..6601658d974
--- /dev/null
+++ b/tests/units/utils/test_frontend_skeleton.py
@@ -0,0 +1,35 @@
+"""Tests for the rendered frontend-skeleton output."""
+
+from __future__ import annotations
+
+import json
+
+import pytest
+
+from reflex.utils import frontend_skeleton
+
+
+def test_package_json_has_no_inspector_specific_deps():
+    """Inspector dev deps come from ``get_frontend_development_dependencies``.
+
+    They are installed via ``bun add -d`` after the base install rather than
+    being baked into the package.json template, so the rendered template
+    must not name ``launch-editor``.
+    """
+    payload = json.loads(frontend_skeleton._compile_package_json())
+    assert "launch-editor" not in payload.get("devDependencies", {})
+
+
+def test_vite_config_template_is_plugin_agnostic(monkeypatch: pytest.MonkeyPatch):
+    """The Vite template renders nothing inspector-specific by itself.
+
+    Plugin-driven extras (e.g. the inspector import + plugin call) are
+    injected later via ``add_modify_task`` from ``pre_compile``.
+    """
+    import reflex as rx
+
+    config = rx.Config(app_name="test")
+    monkeypatch.setattr(frontend_skeleton, "get_config", lambda: config)
+    rendered = frontend_skeleton._compile_vite_config(config)
+    assert "reflexInspectorPlugin" not in rendered
+    assert "reflex-inspector-plugin.js" not in rendered