From 0ed1191a35a06161823fa7f0240d6f36d6dc3086 Mon Sep 17 00:00:00 2001
From: DjDeveloperr <hey@djdev.me>
Date: Sat, 9 May 2026 10:56:00 -0400
Subject: [PATCH] Unify DevTools panels and add inspector port discovery

---
 AGENTS.md                                     |    4 +
 client/src/api/simulators.ts                  |   22 +
 client/src/api/types.ts                       |   46 +
 client/src/app/AppShell.tsx                   |   43 +-
 client/src/app/uiState.ts                     |    5 +
 .../src/features/devtools/DevToolsPanel.tsx   |  766 ++++++++
 .../src/features/simulators/SimulatorMenu.tsx |   11 -
 client/src/features/toolbar/Toolbar.tsx       |   58 +-
 .../features/viewport/SimulatorViewport.tsx   |    3 +
 client/src/styles/components.css              |  162 ++
 client/src/styles/layout.css                  |   21 +
 docs/api/rest.md                              |  110 ++
 docs/inspector/index.md                       |   52 +-
 package-lock.json                             |   15 +
 package.json                                  |    3 +
 scripts/build-client.sh                       |    7 +
 server/Cargo.lock                             |   24 +
 server/Cargo.toml                             |    2 +
 server/src/api/routes.rs                      |  341 +++-
 server/src/devtools.rs                        | 1567 +++++++++++++++++
 server/src/main.rs                            |    2 +
 server/src/static_files/mod.rs                |   33 +-
 server/src/webkit.rs                          | 1271 +++++++++++++
 23 files changed, 4507 insertions(+), 61 deletions(-)
 create mode 100644 client/src/features/devtools/DevToolsPanel.tsx
 create mode 100644 server/src/devtools.rs
 create mode 100644 server/src/webkit.rs

diff --git a/AGENTS.md b/AGENTS.md
index 7e26c2da..b4a1bf05 100644
--- a/AGENTS.md
+++ b/AGENTS.md
@@ -20,6 +20,9 @@ The native side should own anything that depends on macOS frameworks, `xcrun sim
   Defines REST routes for simulator control, health, metrics, and chrome assets.
 - `server/src/transport/webrtc.rs`
   Exposes the H.264 WebRTC offer/answer endpoint for browser live video.
+- `server/src/webkit.rs`
+  Discovers simulator WebKit Remote Inspector targets and bridges WebInspectorUI
+  WebSocket traffic to the simulator `webinspectord` binary-plist socket.
 - `server/src/simulators/registry.rs`
   Tracks Rust-side simulator session state and lazy native attachment by UDID.
 - `cli/XCWSimctl.*`
@@ -71,6 +74,7 @@ Private simulator behavior is implemented locally in:
 
 The current repo uses the private boot path, private display bridge, and private accessibility translation bridge directly. The browser streams frames from that bridge, injects touch and keyboard events through the same native session layer, inspects accessibility through `AccessibilityPlatformTranslation`, and renders device chrome from `cli/XCWChromeRenderer.*`.
 Physical chrome button support uses DeviceKit `chrome.json` input geometry for browser hit targets. Volume, action, and mute buttons dispatch through `IndigoHIDMessageForHIDArbitrary` with consumer/telephony HID usage pairs from the device chrome metadata; home, lock, and app-switcher remain on the existing SimulatorKit button paths.
+WebKit inspection uses the simulator `webinspectord` Unix socket named `com.apple.webinspectord_sim.socket` and WebKit's binary-plist Remote Inspector selectors. It lists only WebKit content that the runtime exposes as inspectable. For app-owned `WKWebView` on iOS 16.4 and newer, the app must set `isInspectable = true`.
 
 ## Build and Run
 
diff --git a/client/src/api/simulators.ts b/client/src/api/simulators.ts
index 58a80325..5e0c83b6 100644
--- a/client/src/api/simulators.ts
+++ b/client/src/api/simulators.ts
@@ -2,11 +2,13 @@ import { apiRequest } from "./client";
 import type {
   AccessibilitySourcePreference,
   AccessibilityTreeResponse,
+  ChromeDevToolsTargetDiscovery,
   ChromeProfile,
   InspectorRequestResponse,
   SimulatorLogsResponse,
   SimulatorMetadata,
   SimulatorsResponse,
+  WebKitTargetDiscovery,
 } from "./types";
 
 export async function listSimulators(
@@ -74,6 +76,26 @@ export async function fetchSimulatorLogs(
   );
 }
 
+export async function fetchWebKitTargets(
+  udid: string,
+  options: RequestInit = {},
+): Promise<WebKitTargetDiscovery> {
+  return apiRequest<WebKitTargetDiscovery>(
+    `/api/simulators/${encodeURIComponent(udid)}/webkit/targets`,
+    options,
+  );
+}
+
+export async function fetchChromeDevToolsTargets(
+  udid: string,
+  options: RequestInit = {},
+): Promise<ChromeDevToolsTargetDiscovery> {
+  return apiRequest<ChromeDevToolsTargetDiscovery>(
+    `/api/simulators/${encodeURIComponent(udid)}/devtools/targets`,
+    options,
+  );
+}
+
 export async function sendInspectorRequest<T = unknown>(
   udid: string,
   method: string,
diff --git a/client/src/api/types.ts b/client/src/api/types.ts
index e45e625f..713a0155 100644
--- a/client/src/api/types.ts
+++ b/client/src/api/types.ts
@@ -40,6 +40,52 @@ export interface SimulatorsResponse {
   simulators: SimulatorMetadata[];
 }
 
+export interface WebKitTarget {
+  id: string;
+  appId: string;
+  appName?: string | null;
+  pageId: number;
+  title?: string | null;
+  url?: string | null;
+  kind: "safari-page" | "app-web-content" | "web-content-proxy" | string;
+  inspectorUrl: string;
+  webSocketUrl: string;
+}
+
+export interface WebKitTargetDiscovery {
+  udid: string;
+  socketPath?: string | null;
+  targets: WebKitTarget[];
+  warnings: string[];
+}
+
+export interface ChromeDevToolsTarget {
+  id: string;
+  appName?: string | null;
+  bundleIdentifier?: string | null;
+  description: string;
+  devtoolsFrontendUrl: string;
+  processIdentifier: number;
+  source:
+    | "react-native"
+    | "react-native-metro"
+    | "chrome-inspector"
+    | "nativescript"
+    | "swiftui"
+    | "in-app-inspector"
+    | string;
+  title: string;
+  type: string;
+  url: string;
+  webSocketDebuggerUrl: string;
+}
+
+export interface ChromeDevToolsTargetDiscovery {
+  udid: string;
+  targets: ChromeDevToolsTarget[];
+  warnings: string[];
+}
+
 export interface HealthResponse {
   ok: boolean;
   videoCodec?: string;
diff --git a/client/src/app/AppShell.tsx b/client/src/app/AppShell.tsx
index 16cd0b20..f475fccd 100644
--- a/client/src/app/AppShell.tsx
+++ b/client/src/app/AppShell.tsx
@@ -23,7 +23,6 @@ import {
   openSimulatorUrl,
   pressHome,
   pressSimulatorButton,
-  rotateLeft,
   rotateRight,
   simulatorControlSocketUrl,
   shutdownSimulator,
@@ -41,6 +40,7 @@ import type {
   TouchPhase,
 } from "../api/types";
 import { AccessibilityInspector } from "../features/accessibility/AccessibilityInspector";
+import { DevToolsPanel } from "../features/devtools/DevToolsPanel";
 import { isEditableTarget } from "../features/input/keycodes";
 import { useKeyboardInput } from "../features/input/useKeyboardInput";
 import { usePointerInput } from "../features/input/usePointerInput";
@@ -86,9 +86,11 @@ import {
 import { useElementSize } from "../shared/hooks/useElementSize";
 import {
   ACCESSIBILITY_SOURCE_STORAGE_KEY,
+  CHROME_DEVTOOLS_VISIBLE_STORAGE_KEY,
   clearLegacyVolatileUiState,
   DEFAULT_VIEWPORT_STATE,
   DEBUG_VISIBLE_STORAGE_KEY,
+  DEVTOOLS_VISIBLE_STORAGE_KEY,
   HIERARCHY_VISIBLE_STORAGE_KEY,
   nextAccessibilitySourcePreference,
   readPersistedUiState,
@@ -97,6 +99,7 @@ import {
   sanitizeAccessibilitySources,
   TOUCH_OVERLAY_VISIBLE_STORAGE_KEY,
   viewportStateForUDID,
+  WEBKIT_INSPECTOR_VISIBLE_STORAGE_KEY,
   writePersistedUiState,
   writeStoredFlag,
 } from "./uiState";
@@ -349,6 +352,12 @@ export function AppShell({
   const [hierarchyVisible, setHierarchyVisible] = useState(() =>
     readStoredFlag(HIERARCHY_VISIBLE_STORAGE_KEY),
   );
+  const [devToolsVisible, setDevToolsVisible] = useState(
+    () =>
+      readStoredFlag(DEVTOOLS_VISIBLE_STORAGE_KEY) ||
+      readStoredFlag(CHROME_DEVTOOLS_VISIBLE_STORAGE_KEY) ||
+      readStoredFlag(WEBKIT_INSPECTOR_VISIBLE_STORAGE_KEY),
+  );
   const [selectedUDID, setSelectedUDID] = useState(initialSelectedUDID ?? "");
   const [search, setSearch] = useState("");
   const [openURLValue, setOpenURLValue] = useState(
@@ -752,10 +761,18 @@ export function AppShell({
     writeStoredFlag(HIERARCHY_VISIBLE_STORAGE_KEY, hierarchyVisible);
   }, [hierarchyVisible]);
 
+  useEffect(() => {
+    writeStoredFlag(DEVTOOLS_VISIBLE_STORAGE_KEY, devToolsVisible);
+  }, [devToolsVisible]);
+
   useEffect(() => {
     writeStoredFlag(TOUCH_OVERLAY_VISIBLE_STORAGE_KEY, touchOverlayVisible);
   }, [touchOverlayVisible]);
 
+  const toggleDevTools = useCallback(() => {
+    setDevToolsVisible((current) => !current);
+  }, []);
+
   useEffect(() => {
     window.localStorage.setItem(
       ACCESSIBILITY_SOURCE_STORAGE_KEY,
@@ -1815,20 +1832,6 @@ export function AppShell({
             );
           }
         }}
-        onRotateLeft={() => {
-          if (!selectedSimulator) {
-            return;
-          }
-          beginZoomAnimation();
-          if (sendControl(selectedSimulator.udid, { type: "rotateLeft" })) {
-            setRotationQuarterTurns((current) => (current + 3) % 4);
-            return;
-          }
-          void runAction(async () => {
-            await rotateLeft(selectedSimulator.udid);
-            setRotationQuarterTurns((current) => (current + 3) % 4);
-          }, false);
-        }}
         onOpenBundlePrompt={promptForBundleID}
         onOpenUrlPrompt={promptForURL}
         onRotateRight={() => {
@@ -1873,6 +1876,7 @@ export function AppShell({
           }
         }}
         onToggleDebug={() => setDebugVisible((current) => !current)}
+        onToggleDevTools={toggleDevTools}
         onToggleHierarchy={() => {
           setHierarchyVisible((current) => !current);
           if (hierarchyVisible) {
@@ -1902,6 +1906,7 @@ export function AppShell({
           selectedSimulator?.isBooted && !selectedSimulatorTransitionKind,
         )}
         touchOverlayVisible={touchOverlayVisible}
+        devToolsVisible={devToolsVisible}
       />
       <SimulatorViewport
         accessibilityHoveredId={accessibilityHoveredId}
@@ -2002,6 +2007,14 @@ export function AppShell({
         touchIndicators={touchIndicators}
         touchOverlayVisible={touchOverlayVisible}
         viewMode={viewMode}
+        devtoolsPanel={
+          devToolsVisible ? (
+            <DevToolsPanel
+              onClose={() => setDevToolsVisible(false)}
+              selectedSimulator={selectedSimulator}
+            />
+          ) : null
+        }
         zoomDockRef={handleZoomDockRef}
         zoomAnimating={zoomAnimating}
       />
diff --git a/client/src/app/uiState.ts b/client/src/app/uiState.ts
index 4722d13a..60956b70 100644
--- a/client/src/app/uiState.ts
+++ b/client/src/app/uiState.ts
@@ -23,6 +23,11 @@ export interface PersistedUiState {
 export const UI_STATE_STORAGE_KEY = "xcw-ui-state";
 export const DEBUG_VISIBLE_STORAGE_KEY = "xcw-debug-visible";
 export const HIERARCHY_VISIBLE_STORAGE_KEY = "xcw-hierarchy-visible";
+export const DEVTOOLS_VISIBLE_STORAGE_KEY = "xcw-devtools-visible";
+export const WEBKIT_INSPECTOR_VISIBLE_STORAGE_KEY =
+  "xcw-webkit-inspector-visible";
+export const CHROME_DEVTOOLS_VISIBLE_STORAGE_KEY =
+  "xcw-chrome-devtools-visible";
 export const ACCESSIBILITY_SOURCE_STORAGE_KEY = "xcw-hierarchy-source";
 export const TOUCH_OVERLAY_VISIBLE_STORAGE_KEY = "xcw-touch-overlay-visible";
 
diff --git a/client/src/features/devtools/DevToolsPanel.tsx b/client/src/features/devtools/DevToolsPanel.tsx
new file mode 100644
index 00000000..12db9318
--- /dev/null
+++ b/client/src/features/devtools/DevToolsPanel.tsx
@@ -0,0 +1,766 @@
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import type {
+  CSSProperties,
+  KeyboardEvent as ReactKeyboardEvent,
+  PointerEvent as ReactPointerEvent,
+} from "react";
+
+import { accessTokenFromLocation } from "../../api/client";
+import { apiUrl } from "../../api/config";
+import {
+  fetchChromeDevToolsTargets,
+  fetchWebKitTargets,
+} from "../../api/simulators";
+import type {
+  ChromeDevToolsTarget,
+  SimulatorMetadata,
+  WebKitTarget,
+} from "../../api/types";
+
+const DEVTOOLS_TARGET_REFRESH_MS = 5000;
+const CHROME_DEVTOOLS_REQUEST_TIMEOUT_MS = 6000;
+const WEBKIT_DEVTOOLS_REQUEST_TIMEOUT_MS = 2500;
+const DEVTOOLS_PANEL_WIDTH_STORAGE_KEY = "xcw-devtools-panel-width";
+const LEGACY_PANEL_WIDTH_STORAGE_KEYS = [
+  "xcw-chrome-devtools-panel-width",
+  "xcw-webkit-panel-width",
+];
+const DEVTOOLS_PANEL_DEFAULT_WIDTH = 720;
+const DEVTOOLS_PANEL_MIN_WIDTH = 420;
+const DEVTOOLS_PANEL_MIN_VIEWPORT_WIDTH = 340;
+const DEVTOOLS_PANEL_WIDTH_STEP = 40;
+
+interface DevToolsPanelProps {
+  onClose: () => void;
+  selectedSimulator: SimulatorMetadata | null;
+}
+
+interface ResizeState {
+  handle: HTMLDivElement;
+  pointerId: number;
+  startPointer: number;
+  startValue: number;
+}
+
+interface DevToolsTarget {
+  frameUrl: string;
+  id: string;
+  meta: string;
+  source: string;
+  title: string;
+}
+
+interface DevToolsDiscovery {
+  targets: DevToolsTarget[];
+  warnings: string[];
+}
+
+export function DevToolsPanel({
+  onClose,
+  selectedSimulator,
+}: DevToolsPanelProps) {
+  const [panelWidth, setPanelWidth] = useState(readStoredPanelWidth);
+  const [isResizing, setIsResizing] = useState(false);
+  const [discovery, setDiscovery] = useState<DevToolsDiscovery | null>(null);
+  const [selectedTargetId, setSelectedTargetId] = useState("");
+  const [isLoading, setIsLoading] = useState(false);
+  const [error, setError] = useState("");
+  const [frameLoaded, setFrameLoaded] = useState(false);
+  const discoveryRef = useRef<DevToolsDiscovery | null>(null);
+  const frameRef = useRef<HTMLIFrameElement | null>(null);
+  const panelWidthRef = useRef(panelWidth);
+  const requestIdRef = useRef(0);
+  const resizeStateRef = useRef<ResizeState | null>(null);
+  const selectedTargetIdRef = useRef("");
+
+  const targets = discovery?.targets ?? [];
+  const selectedTarget = useMemo(() => {
+    if (targets.length === 0) {
+      return null;
+    }
+    return (
+      targets.find((target) => target.id === selectedTargetId) ?? targets[0]
+    );
+  }, [selectedTargetId, targets]);
+  const frameUrl = selectedTarget?.frameUrl ?? "";
+
+  useEffect(() => {
+    panelWidthRef.current = panelWidth;
+  }, [panelWidth]);
+
+  const applyDiscovery = useCallback(
+    (nextDiscovery: DevToolsDiscovery | null) => {
+      discoveryRef.current = nextDiscovery;
+      setDiscovery(nextDiscovery);
+    },
+    [],
+  );
+
+  const applySelectedTargetId = useCallback((nextTargetId: string) => {
+    selectedTargetIdRef.current = nextTargetId;
+    setSelectedTargetId(nextTargetId);
+  }, []);
+
+  const loadTargets = useCallback(async () => {
+    if (!selectedSimulator) {
+      applyDiscovery(null);
+      applySelectedTargetId("");
+      setError("");
+      setIsLoading(false);
+      return;
+    }
+
+    const requestId = ++requestIdRef.current;
+    setIsLoading(true);
+    setError("");
+    try {
+      const chromeTargets = requestWithTimeout(
+        (signal) =>
+          fetchChromeDevToolsTargets(selectedSimulator.udid, { signal }),
+        CHROME_DEVTOOLS_REQUEST_TIMEOUT_MS,
+        "Timed out loading Chrome DevTools targets.",
+      );
+      const webKitTargets = selectedSimulator.isBooted
+        ? requestWithTimeout(
+            (signal) => fetchWebKitTargets(selectedSimulator.udid, { signal }),
+            WEBKIT_DEVTOOLS_REQUEST_TIMEOUT_MS,
+            "Timed out loading WebKit targets.",
+          )
+        : Promise.resolve({
+            socketPath: null,
+            targets: [],
+            udid: selectedSimulator.udid,
+            warnings: [],
+          });
+      const [chromeResult, webKitResult] = await Promise.allSettled([
+        chromeTargets,
+        webKitTargets,
+      ]);
+      if (requestId !== requestIdRef.current) {
+        return;
+      }
+
+      const nextTargets: DevToolsTarget[] = [];
+      const warnings: string[] = [];
+      const errors: string[] = [];
+      if (chromeResult.status === "fulfilled") {
+        nextTargets.push(...chromeResult.value.targets.map(mapChromeTarget));
+        warnings.push(...chromeResult.value.warnings);
+      } else {
+        errors.push(errorMessage(chromeResult.reason));
+      }
+
+      if (webKitResult.status === "fulfilled") {
+        nextTargets.push(...webKitResult.value.targets.map(mapWebKitTarget));
+        warnings.push(...webKitResult.value.warnings);
+      } else {
+        errors.push(errorMessage(webKitResult.reason));
+      }
+
+      const previousDiscovery = discoveryRef.current;
+      if (
+        nextTargets.length === 0 &&
+        previousDiscovery &&
+        previousDiscovery.targets.length > 0
+      ) {
+        applyDiscovery({
+          ...previousDiscovery,
+          warnings: mergeWarnings(
+            warnings,
+            errors,
+            previousDiscovery.warnings,
+            [
+              "DevTools target discovery returned no targets; keeping the active target while debuggers reconnect.",
+            ],
+          ),
+        });
+        return;
+      }
+
+      const nextDiscovery = {
+        targets: nextTargets,
+        warnings: mergeWarnings(warnings, errors),
+      };
+      applyDiscovery(nextDiscovery);
+      const current = selectedTargetIdRef.current;
+      const nextTargetId =
+        current && nextTargets.some((target) => target.id === current)
+          ? current
+          : (nextTargets[0]?.id ?? "");
+      applySelectedTargetId(nextTargetId);
+      if (nextTargets.length === 0 && errors.length > 0) {
+        setError(errors.join(" "));
+      }
+    } catch (targetError) {
+      if (requestId !== requestIdRef.current) {
+        return;
+      }
+      const message = errorMessage(targetError);
+      const previousDiscovery = discoveryRef.current;
+      if (previousDiscovery && previousDiscovery.targets.length > 0) {
+        applyDiscovery({
+          ...previousDiscovery,
+          warnings: mergeWarnings(previousDiscovery.warnings, [message]),
+        });
+        return;
+      }
+      applyDiscovery(null);
+      applySelectedTargetId("");
+      setError(message);
+    } finally {
+      if (requestId === requestIdRef.current) {
+        setIsLoading(false);
+      }
+    }
+  }, [
+    applyDiscovery,
+    applySelectedTargetId,
+    selectedSimulator?.isBooted,
+    selectedSimulator?.udid,
+  ]);
+
+  useEffect(() => {
+    requestIdRef.current += 1;
+    applyDiscovery(null);
+    applySelectedTargetId("");
+    setError("");
+    setFrameLoaded(false);
+  }, [applyDiscovery, applySelectedTargetId, selectedSimulator?.udid]);
+
+  useEffect(() => {
+    void loadTargets();
+    const interval = window.setInterval(() => {
+      if (!selectedTargetIdRef.current) {
+        void loadTargets();
+      }
+    }, DEVTOOLS_TARGET_REFRESH_MS);
+    return () => window.clearInterval(interval);
+  }, [loadTargets]);
+
+  useEffect(() => {
+    setFrameLoaded(false);
+  }, [frameUrl]);
+
+  useEffect(() => {
+    function handlePointerMove(event: PointerEvent) {
+      const resizeState = resizeStateRef.current;
+      if (!resizeState) {
+        return;
+      }
+
+      event.preventDefault();
+      const nextWidth = clampPanelWidth(
+        resizeState.startValue + resizeState.startPointer - event.clientX,
+      );
+      panelWidthRef.current = nextWidth;
+      setPanelWidth(nextWidth);
+    }
+
+    function finishResize() {
+      const resizeState = resizeStateRef.current;
+      resizeStateRef.current = null;
+      setIsResizing(false);
+      document.body.classList.remove("is-resizing-devtools");
+      if (!resizeState) {
+        return;
+      }
+      if (resizeState.handle.hasPointerCapture(resizeState.pointerId)) {
+        resizeState.handle.releasePointerCapture(resizeState.pointerId);
+      }
+      storePanelWidth(panelWidthRef.current);
+    }
+
+    function handleViewportResize() {
+      setPanelWidth((currentWidth) => {
+        const nextWidth = clampPanelWidth(currentWidth);
+        panelWidthRef.current = nextWidth;
+        return nextWidth;
+      });
+    }
+
+    window.addEventListener("pointermove", handlePointerMove);
+    window.addEventListener("pointerup", finishResize);
+    window.addEventListener("pointercancel", finishResize);
+    window.addEventListener("resize", handleViewportResize);
+    return () => {
+      window.removeEventListener("pointermove", handlePointerMove);
+      window.removeEventListener("pointerup", finishResize);
+      window.removeEventListener("pointercancel", finishResize);
+      window.removeEventListener("resize", handleViewportResize);
+      document.body.classList.remove("is-resizing-devtools");
+    };
+  }, []);
+
+  useEffect(() => {
+    const frame = frameRef.current;
+    if (!frame || typeof ResizeObserver === "undefined") {
+      return;
+    }
+
+    const observer = new ResizeObserver(() => {
+      frame.contentWindow?.dispatchEvent(new Event("resize"));
+    });
+    observer.observe(frame);
+    return () => observer.disconnect();
+  }, [frameUrl]);
+
+  function beginResize(event: ReactPointerEvent<HTMLDivElement>) {
+    if (event.button !== 0) {
+      return;
+    }
+
+    event.preventDefault();
+    event.currentTarget.setPointerCapture(event.pointerId);
+    resizeStateRef.current = {
+      handle: event.currentTarget,
+      pointerId: event.pointerId,
+      startPointer: event.clientX,
+      startValue: panelWidthRef.current,
+    };
+    setIsResizing(true);
+    document.body.classList.add("is-resizing-devtools");
+  }
+
+  function handleResizeKeyDown(event: ReactKeyboardEvent<HTMLDivElement>) {
+    let nextWidth: number | null = null;
+    if (event.key === "ArrowLeft") {
+      nextWidth = clampPanelWidth(
+        panelWidthRef.current + DEVTOOLS_PANEL_WIDTH_STEP,
+      );
+    } else if (event.key === "ArrowRight") {
+      nextWidth = clampPanelWidth(
+        panelWidthRef.current - DEVTOOLS_PANEL_WIDTH_STEP,
+      );
+    } else if (event.key === "Home") {
+      nextWidth = DEVTOOLS_PANEL_MIN_WIDTH;
+    } else if (event.key === "End") {
+      nextWidth = panelWidthMaximum();
+    }
+
+    if (nextWidth == null) {
+      return;
+    }
+
+    event.preventDefault();
+    panelWidthRef.current = nextWidth;
+    setPanelWidth(nextWidth);
+    storePanelWidth(nextWidth);
+  }
+
+  function openDetachedInspector() {
+    if (!frameUrl) {
+      return;
+    }
+    window.open(frameUrl, "_blank", "noopener");
+  }
+
+  const statusMessage =
+    error ||
+    (!selectedSimulator
+      ? "No simulator selected."
+      : isLoading && targets.length === 0
+        ? "Loading DevTools targets..."
+        : targets.length === 0
+          ? selectedSimulator.isBooted
+            ? "No DevTools targets. Open Safari, enable inspectable WKWebViews, start Metro, or launch a Chrome remote debugging target."
+            : "No DevTools targets. Boot the simulator for Safari/WebKit, or start Metro or Chrome remote debugging."
+          : "");
+  const panelStyle = {
+    "--webkit-panel-width": `${panelWidth}px`,
+  } as CSSProperties;
+
+  return (
+    <aside
+      aria-label="DevTools"
+      className={`webkit-panel devtools-panel ${isResizing ? "resizing" : ""}`}
+      style={panelStyle}
+    >
+      <div
+        aria-label="Resize DevTools"
+        aria-orientation="vertical"
+        aria-valuemax={panelWidthMaximum()}
+        aria-valuemin={DEVTOOLS_PANEL_MIN_WIDTH}
+        aria-valuenow={panelWidth}
+        className="webkit-resize-x"
+        onKeyDown={handleResizeKeyDown}
+        onPointerDown={beginResize}
+        role="separator"
+        tabIndex={0}
+        title="Resize DevTools"
+      />
+
+      <div className="webkit-targetbar">
+        <select
+          aria-label="DevTools Target"
+          className="webkit-target-select"
+          disabled={targets.length === 0}
+          onChange={(event) => applySelectedTargetId(event.target.value)}
+          value={selectedTarget?.id ?? ""}
+        >
+          {targets.length === 0 ? (
+            <option value="">No targets</option>
+          ) : (
+            targets.map((target) => (
+              <option key={target.id} value={target.id}>
+                {targetLabel(target)}
+              </option>
+            ))
+          )}
+        </select>
+        <button
+          aria-label="Refresh DevTools Targets"
+          className="tbtn icon-btn"
+          disabled={isLoading}
+          onClick={() => void loadTargets()}
+          title="Refresh DevTools Targets"
+          type="button"
+        >
+          <RefreshIcon />
+        </button>
+        <button
+          aria-label="Open DevTools In New Tab"
+          className="tbtn icon-btn"
+          disabled={!frameUrl}
+          onClick={openDetachedInspector}
+          title="Open DevTools In New Tab"
+          type="button"
+        >
+          <PopOutIcon />
+        </button>
+        <button
+          aria-label="Close DevTools"
+          className="tbtn icon-btn"
+          onClick={onClose}
+          title="Close DevTools"
+          type="button"
+        >
+          <CloseIcon />
+        </button>
+      </div>
+
+      {selectedTarget ? (
+        <div className="webkit-target-meta">
+          <span>{selectedTarget.source}</span>
+          {selectedTarget.meta ? <span>{selectedTarget.meta}</span> : null}
+        </div>
+      ) : null}
+
+      <div className="webkit-frame-wrap">
+        {frameUrl ? (
+          <>
+            <iframe
+              allow="clipboard-read; clipboard-write"
+              className="webkit-frame"
+              onLoad={() => setFrameLoaded(true)}
+              ref={frameRef}
+              src={frameUrl}
+              title="DevTools"
+            />
+            {!frameLoaded ? (
+              <div className="webkit-status" role="status">
+                Loading DevTools...
+              </div>
+            ) : null}
+          </>
+        ) : (
+          <div className={`webkit-status ${error ? "error" : ""}`}>
+            {statusMessage}
+          </div>
+        )}
+      </div>
+
+      {discovery?.warnings.length ? (
+        <div className="webkit-warnings">
+          {discovery.warnings.map((warning) => (
+            <div key={warning}>{warning}</div>
+          ))}
+        </div>
+      ) : null}
+    </aside>
+  );
+}
+
+function mapChromeTarget(target: ChromeDevToolsTarget): DevToolsTarget {
+  const source = sourceLabel(target.source);
+  return {
+    frameUrl: buildChromeDevToolsFrameUrl(target),
+    id: `chrome:${target.id}`,
+    meta: target.bundleIdentifier ?? target.url,
+    source,
+    title: chromeTargetLabel(target),
+  };
+}
+
+function mapWebKitTarget(target: WebKitTarget): DevToolsTarget {
+  return {
+    frameUrl: buildWebKitInspectorFrameUrl(target),
+    id: `webkit:${target.id}`,
+    meta: target.url ?? "",
+    source: webKitTargetKindLabel(target),
+    title: webKitTargetLabel(target),
+  };
+}
+
+function readStoredPanelWidth(): number {
+  if (typeof window === "undefined") {
+    return DEVTOOLS_PANEL_DEFAULT_WIDTH;
+  }
+
+  for (const storageKey of [
+    DEVTOOLS_PANEL_WIDTH_STORAGE_KEY,
+    ...LEGACY_PANEL_WIDTH_STORAGE_KEYS,
+  ]) {
+    const value = Number.parseFloat(
+      window.localStorage.getItem(storageKey) ?? "",
+    );
+    if (Number.isFinite(value)) {
+      return clampPanelWidth(value);
+    }
+  }
+  return clampPanelWidth(DEVTOOLS_PANEL_DEFAULT_WIDTH);
+}
+
+function storePanelWidth(width: number): void {
+  if (typeof window === "undefined") {
+    return;
+  }
+
+  window.localStorage.setItem(DEVTOOLS_PANEL_WIDTH_STORAGE_KEY, String(width));
+}
+
+function clampPanelWidth(width: number): number {
+  return Math.round(
+    Math.min(Math.max(width, DEVTOOLS_PANEL_MIN_WIDTH), panelWidthMaximum()),
+  );
+}
+
+function panelWidthMaximum(): number {
+  if (typeof window === "undefined") {
+    return DEVTOOLS_PANEL_DEFAULT_WIDTH;
+  }
+
+  return Math.max(
+    DEVTOOLS_PANEL_MIN_WIDTH,
+    Math.min(
+      window.innerWidth * 0.82,
+      window.innerWidth - DEVTOOLS_PANEL_MIN_VIEWPORT_WIDTH,
+    ),
+  );
+}
+
+function buildChromeDevToolsFrameUrl(target: ChromeDevToolsTarget): string {
+  const url = frontendUrl(target.devtoolsFrontendUrl);
+  const token = accessTokenFromLocation();
+  if (!token) {
+    return url.toString();
+  }
+
+  if (isSimDeckHttpUrl(url)) {
+    url.searchParams.set("simdeckToken", token);
+  }
+  for (const paramName of ["ws", "wss"]) {
+    const rawSocketUrl = url.searchParams.get(paramName);
+    if (!rawSocketUrl) {
+      continue;
+    }
+
+    const socketUrl = normalizeWebSocketUrl(rawSocketUrl, paramName, url);
+    if (isSimDeckWebSocketUrl(socketUrl)) {
+      socketUrl.searchParams.set("simdeckToken", token);
+    }
+    url.searchParams.set(paramName, devToolsSocketParam(socketUrl));
+  }
+  return url.toString();
+}
+
+function buildWebKitInspectorFrameUrl(target: WebKitTarget): string {
+  const url = frontendUrl(target.inspectorUrl);
+  const token = accessTokenFromLocation();
+  if (!token) {
+    return url.toString();
+  }
+
+  if (isSimDeckHttpUrl(url)) {
+    url.searchParams.set("simdeckToken", token);
+  }
+  const rawSocketUrl = url.searchParams.get("ws");
+  if (rawSocketUrl) {
+    const socketUrl = normalizeWebSocketUrl(rawSocketUrl, "ws", url);
+    if (isSimDeckWebSocketUrl(socketUrl)) {
+      socketUrl.searchParams.set("simdeckToken", token);
+    }
+    url.searchParams.set("ws", socketUrl.toString());
+  }
+  return url.toString();
+}
+
+function frontendUrl(value: string): URL {
+  if (value.startsWith("http://") || value.startsWith("https://")) {
+    return new URL(value);
+  }
+  return new URL(apiUrl(value), window.location.href);
+}
+
+function normalizeWebSocketUrl(
+  rawUrl: string,
+  paramName: string,
+  frontendUrlValue: URL,
+): URL {
+  if (rawUrl.startsWith("ws://") || rawUrl.startsWith("wss://")) {
+    return new URL(rawUrl);
+  }
+
+  const base = new URL(frontendUrlValue);
+  base.protocol =
+    paramName === "wss" || base.protocol === "https:" ? "wss:" : "ws:";
+  if (rawUrl.startsWith("/")) {
+    return new URL(rawUrl, base);
+  }
+  return new URL(`${base.protocol}//${rawUrl}`);
+}
+
+function isSimDeckHttpUrl(url: URL): boolean {
+  return url.host === simDeckBaseUrl().host;
+}
+
+function isSimDeckWebSocketUrl(url: URL): boolean {
+  return url.host === simDeckBaseUrl().host;
+}
+
+function simDeckBaseUrl(): URL {
+  return new URL(apiUrl("/"), window.location.href);
+}
+
+function devToolsSocketParam(socketUrl: URL): string {
+  return `${socketUrl.host}${socketUrl.pathname}${socketUrl.search}${socketUrl.hash}`;
+}
+
+function targetLabel(target: DevToolsTarget): string {
+  if (target.title.startsWith(`${target.source}:`)) {
+    return target.title;
+  }
+  return `${target.source}: ${target.title}`;
+}
+
+function chromeTargetLabel(target: ChromeDevToolsTarget): string {
+  const title = target.title?.trim();
+  const appName = target.appName?.trim();
+  if (title && appName && !title.includes(appName)) {
+    return `${appName}: ${title}`;
+  }
+  return title || appName || `Process ${target.processIdentifier}`;
+}
+
+function webKitTargetLabel(target: WebKitTarget): string {
+  const title = target.title?.trim();
+  const url = target.url?.trim();
+  const appName = target.appName?.trim();
+  if (title && appName) {
+    return `${appName}: ${title}`;
+  }
+  return title || url || appName || `Page ${target.pageId}`;
+}
+
+function sourceLabel(source: string): string {
+  switch (source) {
+    case "react-native":
+      return "React Native";
+    case "react-native-metro":
+      return "React Native Metro";
+    case "chrome-inspector":
+      return "Chrome Inspector";
+    case "nativescript":
+      return "NativeScript";
+    case "swiftui":
+      return "SwiftUI";
+    case "in-app-inspector":
+      return "UIKit";
+    default:
+      return "App runtime";
+  }
+}
+
+function webKitTargetKindLabel(target: WebKitTarget): string {
+  if (target.kind === "safari-page" || target.appName === "Safari") {
+    return "Safari";
+  }
+  if (target.kind === "web-content-proxy") {
+    return "WebKit proxy";
+  }
+  return target.appName ?? "WebKit";
+}
+
+function errorMessage(error: unknown): string {
+  return error instanceof Error
+    ? error.message
+    : "Failed to load DevTools targets.";
+}
+
+function requestWithTimeout<T>(
+  request: (signal: AbortSignal) => Promise<T>,
+  timeoutMs: number,
+  message: string,
+): Promise<T> {
+  const controller = new AbortController();
+  const timer = window.setTimeout(() => controller.abort(), timeoutMs);
+  return request(controller.signal)
+    .catch((error: unknown) => {
+      if (controller.signal.aborted) {
+        throw new Error(message);
+      }
+      throw error;
+    })
+    .finally(() => window.clearTimeout(timer));
+}
+
+function mergeWarnings(...groups: string[][]): string[] {
+  const seen = new Set<string>();
+  return groups.flat().filter((warning) => {
+    if (seen.has(warning)) {
+      return false;
+    }
+    seen.add(warning);
+    return true;
+  });
+}
+
+function RefreshIcon() {
+  return (
+    <svg fill="none" height="16" viewBox="0 0 16 16" width="16">
+      <path
+        d="M13 4.5V2h-2.5M3 11.5V14h2.5M12.4 6A4.7 4.7 0 0 0 4.2 4.2L3 5.4m.6 4.6a4.7 4.7 0 0 0 8.2 1.8L13 10.6"
+        stroke="currentColor"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        strokeWidth="1.4"
+      />
+    </svg>
+  );
+}
+
+function CloseIcon() {
+  return (
+    <svg fill="none" height="16" viewBox="0 0 16 16" width="16">
+      <path
+        d="M4.5 4.5 11.5 11.5M11.5 4.5 4.5 11.5"
+        stroke="currentColor"
+        strokeLinecap="round"
+        strokeWidth="1.5"
+      />
+    </svg>
+  );
+}
+
+function PopOutIcon() {
+  return (
+    <svg fill="none" height="16" viewBox="0 0 16 16" width="16">
+      <path
+        d="M6 4H3.8c-.4 0-.8.4-.8.8v7.4c0 .4.4.8.8.8h7.4c.4 0 .8-.4.8-.8V10M9 3h4v4M8 8l5-5"
+        stroke="currentColor"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        strokeWidth="1.4"
+      />
+    </svg>
+  );
+}
diff --git a/client/src/features/simulators/SimulatorMenu.tsx b/client/src/features/simulators/SimulatorMenu.tsx
index 5c6f0fb3..8697872d 100644
--- a/client/src/features/simulators/SimulatorMenu.tsx
+++ b/client/src/features/simulators/SimulatorMenu.tsx
@@ -22,7 +22,6 @@ interface SimulatorMenuProps {
   onDismissKeyboard: () => void;
   onOpenBundlePrompt: () => void;
   onOpenUrlPrompt: () => void;
-  onRotateLeft: () => void;
   onStreamEncoderChange: (encoder: StreamEncoder) => void;
   onStreamFpsChange: (fps: StreamFps) => void;
   onStreamQualityChange: (quality: StreamQualityPreset) => void;
@@ -52,7 +51,6 @@ export function SimulatorMenu({
   onDismissKeyboard,
   onOpenBundlePrompt,
   onOpenUrlPrompt,
-  onRotateLeft,
   onStreamEncoderChange,
   onStreamFpsChange,
   onStreamQualityChange,
@@ -236,15 +234,6 @@ export function SimulatorMenu({
                 >
                   Toggle Appearance
                 </button>
-                <button
-                  className="menu-action mobile-menu-action"
-                  onClick={() => {
-                    onRotateLeft();
-                    onCloseMenu();
-                  }}
-                >
-                  Rotate Left
-                </button>
                 <button className="menu-action" onClick={onToggleDebug}>
                   {debugVisible ? "Hide Debug Info" : "Show Debug Info"}
                 </button>
diff --git a/client/src/features/toolbar/Toolbar.tsx b/client/src/features/toolbar/Toolbar.tsx
index 5606c235..8023453f 100644
--- a/client/src/features/toolbar/Toolbar.tsx
+++ b/client/src/features/toolbar/Toolbar.tsx
@@ -12,6 +12,7 @@ import { SimulatorMenu } from "../simulators/SimulatorMenu";
 
 interface ToolbarProps {
   debugVisible: boolean;
+  devToolsVisible: boolean;
   error: string;
   filteredSimulators: SimulatorMetadata[];
   hierarchyVisible: boolean;
@@ -24,7 +25,6 @@ interface ToolbarProps {
   onOpenAppSwitcher: () => void;
   onOpenBundlePrompt: () => void;
   onOpenUrlPrompt: () => void;
-  onRotateLeft: () => void;
   onRotateRight: () => void;
   onShutdown: () => void;
   onStreamEncoderChange: (encoder: StreamEncoder) => void;
@@ -33,6 +33,7 @@ interface ToolbarProps {
   onStreamTransportChange: (transport: StreamTransport) => void;
   onToggleAppearance: () => void;
   onToggleDebug: () => void;
+  onToggleDevTools: () => void;
   onToggleHierarchy: () => void;
   onToggleMenu: () => void;
   onToggleTouchOverlay: () => void;
@@ -54,6 +55,7 @@ interface ToolbarProps {
 export function Toolbar({
   closeMenu,
   debugVisible,
+  devToolsVisible,
   error,
   filteredSimulators,
   hierarchyVisible,
@@ -68,7 +70,6 @@ export function Toolbar({
   onOpenAppSwitcher,
   onOpenBundlePrompt,
   onOpenUrlPrompt,
-  onRotateLeft,
   onRotateRight,
   onShutdown,
   onStreamEncoderChange,
@@ -77,6 +78,7 @@ export function Toolbar({
   onStreamTransportChange,
   onToggleAppearance,
   onToggleDebug,
+  onToggleDevTools,
   onToggleHierarchy,
   onToggleMenu,
   onToggleTouchOverlay,
@@ -134,7 +136,6 @@ export function Toolbar({
           onDismissKeyboard={onDismissKeyboard}
           onOpenBundlePrompt={onOpenBundlePrompt}
           onOpenUrlPrompt={onOpenUrlPrompt}
-          onRotateLeft={onRotateLeft}
           onStreamEncoderChange={onStreamEncoderChange}
           onStreamFpsChange={onStreamFpsChange}
           onStreamQualityChange={onStreamQualityChange}
@@ -221,14 +222,6 @@ export function Toolbar({
             >
               <AppearanceIcon />
             </button>
-            <button
-              aria-label="Rotate Left"
-              className="tbtn icon-btn toolbar-mobile-hidden"
-              onClick={onRotateLeft}
-              title="Rotate Left"
-            >
-              <RotateLeftIcon />
-            </button>
             <button
               aria-label="Rotate Right"
               className="tbtn icon-btn"
@@ -249,6 +242,15 @@ export function Toolbar({
             {errorCopied ? "Copied" : error}
           </button>
         ) : null}
+        <button
+          aria-label="Toggle DevTools"
+          className={`tbtn icon-btn ${devToolsVisible ? "active" : ""}`}
+          onClick={onToggleDevTools}
+          title="Toggle DevTools"
+          type="button"
+        >
+          <DevToolsIcon />
+        </button>
       </div>
     </header>
   );
@@ -314,20 +316,6 @@ function AppearanceIcon() {
   );
 }
 
-function RotateLeftIcon() {
-  return (
-    <svg fill="none" height="16" viewBox="0 0 16 16" width="16">
-      <path
-        d="M5.2 4H3.3V2.1M3.5 4A5.4 5.4 0 1 1 2.9 10"
-        stroke="currentColor"
-        strokeLinecap="round"
-        strokeLinejoin="round"
-        strokeWidth="1.45"
-      />
-    </svg>
-  );
-}
-
 function RotateRightIcon() {
   return (
     <svg fill="none" height="16" viewBox="0 0 16 16" width="16">
@@ -363,3 +351,23 @@ function HierarchyIcon() {
     </svg>
   );
 }
+
+function DevToolsIcon() {
+  return (
+    <svg fill="none" height="16" viewBox="0 0 16 16" width="16">
+      <path
+        d="M3.3 3.3h9.4c.6 0 1 .4 1 1v7.4c0 .6-.4 1-1 1H3.3c-.6 0-1-.4-1-1V4.3c0-.6.4-1 1-1Z"
+        stroke="currentColor"
+        strokeLinejoin="round"
+        strokeWidth="1.35"
+      />
+      <path
+        d="M5.4 6.2 3.9 8l1.5 1.8M10.6 6.2 12.1 8l-1.5 1.8M8.8 5.9 7.2 10.1"
+        stroke="currentColor"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        strokeWidth="1.25"
+      />
+    </svg>
+  );
+}
diff --git a/client/src/features/viewport/SimulatorViewport.tsx b/client/src/features/viewport/SimulatorViewport.tsx
index 0385848e..d8ac031a 100644
--- a/client/src/features/viewport/SimulatorViewport.tsx
+++ b/client/src/features/viewport/SimulatorViewport.tsx
@@ -65,6 +65,7 @@ interface SimulatorViewportProps {
   touchIndicators: TouchIndicator[];
   touchOverlayVisible: boolean;
   viewMode: ViewMode;
+  devtoolsPanel: ReactNode;
   zoomDockRef: Ref<HTMLDivElement | null>;
   zoomAnimating: boolean;
 }
@@ -120,6 +121,7 @@ export function SimulatorViewport({
   touchIndicators,
   touchOverlayVisible,
   viewMode,
+  devtoolsPanel,
   zoomDockRef,
   zoomAnimating,
 }: SimulatorViewportProps) {
@@ -238,6 +240,7 @@ export function SimulatorViewport({
           </div>
         ) : null}
       </div>
+      {devtoolsPanel}
     </div>
   );
 }
diff --git a/client/src/styles/components.css b/client/src/styles/components.css
index d993606c..9e69f76b 100644
--- a/client/src/styles/components.css
+++ b/client/src/styles/components.css
@@ -915,6 +915,168 @@
   line-height: 1.35;
 }
 
+.webkit-panel {
+  position: relative;
+  box-sizing: border-box;
+  flex: 0 0 var(--webkit-panel-width, clamp(420px, 42vw, 760px));
+  width: var(--webkit-panel-width, clamp(420px, 42vw, 760px));
+  min-width: 360px;
+  max-width: min(82vw, max(360px, calc(100vw - 340px)));
+  display: flex;
+  flex-direction: column;
+  border-left: 1px solid var(--border);
+  background: var(--surface);
+  overflow: hidden;
+}
+
+.webkit-panel.resizing .webkit-frame,
+.is-resizing-devtools .webkit-frame {
+  pointer-events: none;
+}
+
+.webkit-resize-x {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: -4px;
+  z-index: 6;
+  width: 8px;
+  cursor: col-resize;
+  touch-action: none;
+}
+
+.webkit-resize-x::after {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 3px;
+  width: 1px;
+  content: "";
+  background: transparent;
+}
+
+.webkit-resize-x:hover::after,
+.webkit-resize-x:focus-visible::after,
+.webkit-panel.resizing .webkit-resize-x::after {
+  background: color-mix(in srgb, var(--accent) 55%, transparent);
+}
+
+.webkit-resize-x:focus-visible {
+  outline: 2px solid color-mix(in srgb, var(--accent) 50%, transparent);
+  outline-offset: -1px;
+}
+
+.is-resizing-devtools {
+  cursor: col-resize;
+  user-select: none;
+}
+
+.webkit-targetbar {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  min-height: 38px;
+  padding: 6px 8px;
+  border-bottom: 1px solid var(--border-subtle);
+}
+
+.webkit-target-select {
+  flex: 1;
+  min-width: 0;
+  height: 28px;
+  padding: 0 26px 0 8px;
+  border: 1px solid var(--border-subtle);
+  border-radius: 6px;
+  outline: none;
+  background: var(--surface);
+  color: var(--text);
+  font: inherit;
+  font-size: 12px;
+}
+
+.webkit-target-select:hover:not(:disabled) {
+  background: var(--surface-hover);
+}
+
+.webkit-target-select:focus-visible {
+  outline: 2px solid color-mix(in srgb, var(--accent) 45%, transparent);
+  outline-offset: 2px;
+}
+
+.webkit-target-select:disabled {
+  color: var(--text-muted);
+  opacity: 0.7;
+}
+
+.webkit-target-meta {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  min-height: 28px;
+  padding: 4px 10px;
+  border-bottom: 1px solid var(--border-subtle);
+  color: var(--text-muted);
+  font-size: 11px;
+}
+
+.webkit-target-meta span {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.webkit-target-meta span:first-child {
+  flex: 0 0 auto;
+  color: var(--text-secondary);
+  font-weight: 650;
+}
+
+.webkit-frame-wrap {
+  position: relative;
+  flex: 1;
+  min-height: 0;
+  background: var(--bg);
+}
+
+.webkit-frame {
+  position: absolute;
+  inset: 0;
+  display: block;
+  width: 100%;
+  height: 100%;
+  border: 0;
+  background: var(--bg);
+}
+
+.webkit-status {
+  position: absolute;
+  inset: 0;
+  display: grid;
+  place-items: center;
+  padding: 18px;
+  color: var(--text-muted);
+  font-size: 12px;
+  line-height: 1.4;
+  text-align: center;
+  background: color-mix(in srgb, var(--surface) 96%, transparent);
+}
+
+.webkit-status.error {
+  color: var(--error);
+}
+
+.webkit-warnings {
+  flex: 0 0 auto;
+  max-height: 96px;
+  overflow: auto;
+  padding: 7px 10px;
+  border-top: 1px solid var(--border-subtle);
+  color: var(--text-muted);
+  font-size: 11px;
+  line-height: 1.35;
+}
+
 .console-panel {
   flex: 1;
   overflow: auto;
diff --git a/client/src/styles/layout.css b/client/src/styles/layout.css
index 063de2f3..f8ebae27 100644
--- a/client/src/styles/layout.css
+++ b/client/src/styles/layout.css
@@ -180,6 +180,27 @@
     box-shadow: 0 16px 40px rgba(0, 0, 0, 0.28);
   }
 
+  .webkit-panel {
+    position: absolute;
+    top: 8px;
+    right: 8px;
+    bottom: 8px;
+    z-index: 18;
+    flex: none;
+    width: min(720px, calc(100vw - 16px));
+    min-width: 0;
+    max-width: calc(100vw - 16px);
+    max-height: none;
+    height: calc(100% - 16px);
+    border: 1px solid var(--border);
+    border-radius: 8px;
+    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.28);
+  }
+
+  .webkit-resize-x {
+    display: none;
+  }
+
   .toolbar-sim-detail {
     display: none;
   }
diff --git a/docs/api/rest.md b/docs/api/rest.md
index a334f517..6955ee44 100644
--- a/docs/api/rest.md
+++ b/docs/api/rest.md
@@ -518,6 +518,116 @@ The response includes both the inspector's `result` and metadata about the inspe
 
 For the full method semantics, see the [Inspector Protocol](/api/inspector-protocol).
 
+## DevTools inspectors
+
+SimDeck serves WebKit Remote Inspector targets and Chrome DevTools Protocol
+targets separately at the API layer. The browser UI combines both sources into
+one resizeable DevTools panel with a single target list.
+
+## WebKit inspector
+
+### `GET /api/simulators/{udid}/webkit/targets`
+
+Discovers inspectable WebKit targets exposed by the simulator's `webinspectord`
+Remote Inspector socket. These are Safari pages and app web content that WebKit
+has made inspectable. On iOS 16.4 and newer, app-owned `WKWebView` instances must
+set `isInspectable = true` before they appear here.
+
+```json
+{
+  "udid": "4889B81C-FD88-49A9-BC1D-2087E7C451A2",
+  "socketPath": "/private/var/tmp/.../com.apple.webinspectord_sim.socket",
+  "targets": [
+    {
+      "id": "5049443a3731353731-1",
+      "appId": "PID:71571",
+      "appName": "Example",
+      "pageId": 1,
+      "title": "Example",
+      "url": "https://example.com/",
+      "kind": "app-web-content",
+      "inspectorUrl": "/webkit-inspector-ui/Main.html?ws=127.0.0.1:4310/api/simulators/{udid}/webkit/targets/5049443a3731353731-1/socket",
+      "webSocketUrl": "/api/simulators/{udid}/webkit/targets/5049443a3731353731-1/socket"
+    }
+  ],
+  "warnings": []
+}
+```
+
+`kind` is best-effort metadata:
+
+- `safari-page` for Mobile Safari targets.
+- `app-web-content` for app-owned inspectable web content.
+- `web-content-proxy` for WebKit proxy targets.
+
+This endpoint lists **inspectable WebKit targets**, not every `WKWebView` object
+in UIKit. AX can still reveal visible web areas that are not inspectable.
+
+### `GET /api/simulators/{udid}/webkit/targets/{targetId}/socket`
+
+Upgrades to a WebSocket. The server bridges JSON Web Inspector frontend messages
+to the simulator's binary-plist WebKit Remote Inspector protocol for the selected
+target. The `inspectorUrl` returned by `webkit/targets` points WebInspectorUI at
+this socket.
+
+### `GET /webkit-inspector-ui/Main.html`
+
+Serves the local macOS WebInspectorUI resources with a SimDeck browser host shim.
+This is authenticated like the rest of the server routes.
+
+## Chrome DevTools inspector
+
+### `GET /api/simulators/{udid}/devtools/targets`
+
+Discovers app runtime inspector sessions that can be opened with the embedded
+Chrome DevTools frontend. This includes SimDeck's in-app inspector protocol for
+React Native and NativeScript runtimes, UIKit/SwiftUI fallback metadata when
+those are the only connected logical sources, Metro React Native DevTools
+targets, and generic local Chrome Inspector targets.
+
+```json
+{
+  "udid": "4889B81C-FD88-49A9-BC1D-2087E7C451A2",
+  "targets": [
+    {
+      "id": "sdi-73214",
+      "title": "React Native: Example",
+      "type": "page",
+      "url": "simdeck://com.example.Example",
+      "description": "SimDeck React Native inspector target",
+      "devtoolsFrontendUrl": "/chrome-devtools-ui/inspector.html?ws=127.0.0.1:4310/api/simulators/{udid}/devtools/targets/sdi-73214/socket",
+      "webSocketDebuggerUrl": "ws://127.0.0.1:4310/api/simulators/{udid}/devtools/targets/sdi-73214/socket",
+      "source": "react-native",
+      "processIdentifier": 73214,
+      "bundleIdentifier": "com.example.Example",
+      "appName": "Example"
+    }
+  ],
+  "warnings": []
+}
+```
+
+Metro-discovered targets use `source: "react-native-metro"` and point at
+`/chrome-devtools-ui/rn_fusebox.html` when the target supports the React Native
+Fusebox frontend. SimDeck probes common Metro ports and matching local
+Node/React Native listener ports instead of assuming one fixed port. Generic
+Chrome Inspector targets use `source: "chrome-inspector"` and are discovered from
+common Inspector ports such as `9222-9230` plus matching local Chrome/Node
+listener ports. Proxied targets return a SimDeck `webSocketDebuggerUrl`; SimDeck
+then connects to the upstream `/inspector/debug` or Chrome DevTools WebSocket.
+
+### `GET /api/simulators/{udid}/devtools/targets/{targetId}/socket`
+
+Upgrades to a WebSocket speaking enough of the Chrome DevTools Protocol for the
+frontend to open a target, evaluate console expressions through
+`View.evaluateScript`, and render the published logical hierarchy as DOM nodes.
+
+### `GET /chrome-devtools-ui/inspector.html`
+
+Serves the bundled Chrome DevTools frontend. SimDeck uses the React Native
+debugger frontend package for these static assets and copies them into
+`client/dist/chrome-devtools-ui` during the client build.
+
 ## NativeScript inspector hub
 
 ### `GET /api/inspector/connect`
diff --git a/docs/inspector/index.md b/docs/inspector/index.md
index 87856e24..e8f26e31 100644
--- a/docs/inspector/index.md
+++ b/docs/inspector/index.md
@@ -2,12 +2,13 @@
 
 SimDeck blends three different ways to inspect what an iOS app is rendering:
 
-| Source                   | Coverage                                                         | When to use it                                                              |
-| ------------------------ | ---------------------------------------------------------------- | --------------------------------------------------------------------------- |
-| **Native AX**            | Any simulator app via the Simulator accessibility stack.         | Default fallback.                                                           |
-| **Swift in-app agent**   | Apps that link `SimDeckInspectorAgent` in DEBUG.                 | Best for native iOS apps you control.                                       |
-| **NativeScript runtime** | NativeScript apps that import `@nativescript/simdeck-inspector`. | Best for NativeScript apps — exposes the logical view tree, not just UIKit. |
-| **React Native runtime** | React Native apps that import `react-native-simdeck`.            | Best for React Native apps — exposes components and Metro source locations. |
+| Source                   | Coverage                                                                                                                 | When to use it                                                                   |
+| ------------------------ | ------------------------------------------------------------------------------------------------------------------------ | -------------------------------------------------------------------------------- |
+| **Native AX**            | Any simulator app via the Simulator accessibility stack.                                                                 | Default fallback.                                                                |
+| **Swift in-app agent**   | Apps that link `SimDeckInspectorAgent` in DEBUG.                                                                         | Best for native iOS apps you control.                                            |
+| **NativeScript runtime** | NativeScript apps that import `@nativescript/simdeck-inspector`.                                                         | Best for NativeScript apps — exposes the logical view tree, not just UIKit.      |
+| **React Native runtime** | React Native apps that import `react-native-simdeck`.                                                                    | Best for React Native apps — exposes components and Metro source locations.      |
+| **DevTools panel**       | Safari/WebKit targets, Metro React Native targets, Chrome Inspector targets, and SimDeck app runtime inspector sessions. | Best when you want a familiar browser inspector for app runtimes or web content. |
 
 The HTTP API picks the most specific source available, falls back to the next one when something goes wrong, and tells the client which sources were available so the UI can offer a switch.
 
@@ -55,6 +56,7 @@ Every accessibility tree response includes:
 - **You own the iOS app and write Swift / Objective-C.** Link the [Swift in-app agent](/inspector/swift). It exposes the most semantic data — UIView properties, SwiftUI view trees/probes, custom actions — and lets the browser client edit values in place.
 - **You ship a NativeScript app.** Use the [NativeScript runtime inspector](/inspector/nativescript). It connects outbound to the SimDeck server and publishes both the NativeScript logical tree and the underlying UIKit hierarchy.
 - **You ship a React Native app.** Use the [React Native runtime inspector](/inspector/react-native). It connects outbound to the SimDeck server and publishes the React component tree with dev-mode source locations.
+- **You want DevTools for React Native, Safari/WebKit, Chrome Inspector, or a connected app runtime.** Use the DevTools toolbar toggle. It shows one target list for WebKit Remote Inspector targets, Metro React Native targets, local Chrome Inspector ports, and connected React Native or NativeScript SimDeck inspector sessions.
 - **You can't link anything into the app.** Stick with [AX snapshot](/inspector/accessibility). It only sees what the iOS accessibility stack exposes, but it works for every app.
 
 ## Editing properties
@@ -66,3 +68,41 @@ When the in-app inspector is reachable, the browser client can:
 - Set those properties live, with structured value coercion for `UIColor`, `CGRect`, `CGPoint`, `CGSize`, and `UIEdgeInsets`.
 
 These calls go through the HTTP proxy at `POST /api/simulators/{udid}/inspector/request`, which only accepts a small allow-list of methods. Direct TCP and WebSocket clients can use the full method list documented in the [Inspector Protocol](/api/inspector-protocol).
+
+## WebKit targets
+
+WebKit inspection is separate from the accessibility tree. The server discovers
+inspectable targets through the simulator's `webinspectord` socket:
+
+```http
+GET /api/simulators/{udid}/webkit/targets
+```
+
+Each target includes an `inspectorUrl` that opens WebInspectorUI through SimDeck.
+The browser client also exposes the same flow through the unified DevTools
+toolbar toggle, which opens a resizeable right-side panel and attaches to the
+first discovered target by default.
+This only finds WebKit content that WebKit exposes to the Remote Inspector. On
+iOS 16.4 and newer, app-owned `WKWebView` instances must set
+`isInspectable = true`; otherwise AX may show the web area, but WebInspectorUI
+cannot attach to it.
+
+## Chrome DevTools targets
+
+Chrome DevTools inspection is also separate from the accessibility tree. The
+server exposes Metro React Native DevTools pages, local Chrome Inspector targets,
+and connected React Native or NativeScript runtimes as Chrome DevTools targets:
+
+```http
+GET /api/simulators/{udid}/devtools/targets
+```
+
+Metro targets are discovered from common Metro ports plus matching local
+Node/React Native listener ports, then matched to the selected simulator by
+device name. Generic Chrome Inspector targets are discovered from common
+Inspector ports such as `9222-9230` plus matching local Chrome/Node listener
+ports. SimDeck proxies target WebSockets so the embedded frontend connects back
+to the SimDeck server instead of opening cross-origin browser sockets. Each
+target includes a `devtoolsFrontendUrl` that opens the bundled Chrome DevTools UI
+through SimDeck. The browser client exposes these targets in the same DevTools
+panel as WebKit inspection.
diff --git a/package-lock.json b/package-lock.json
index 012c4815..75599180 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -7,11 +7,17 @@
     "": {
       "name": "simdeck",
       "version": "0.1.4",
+      "cpu": [
+        "arm64"
+      ],
       "hasInstallScript": true,
       "license": "Apache-2.0",
       "os": [
         "darwin"
       ],
+      "dependencies": {
+        "@react-native/debugger-frontend": "^0.85.2"
+      },
       "bin": {
         "simdeck": "bin/simdeck.mjs"
       },
@@ -1097,6 +1103,15 @@
         "node": ">= 8"
       }
     },
+    "node_modules/@react-native/debugger-frontend": {
+      "version": "0.85.2",
+      "resolved": "https://registry.npmjs.org/@react-native/debugger-frontend/-/debugger-frontend-0.85.2.tgz",
+      "integrity": "sha512-j+0b9H5f5hGTLQxHIhJU/b/W6ijuxJF+ZTLHB0se2kzUBNxFKd7DkIc6753qk3CJdiv55vxG3XDgmlpbHxOpmA==",
+      "license": "BSD-3-Clause",
+      "engines": {
+        "node": "^20.19.4 || ^22.13.0 || ^24.3.0 || >= 25.0.0"
+      }
+    },
     "node_modules/@rollup/rollup-android-arm-eabi": {
       "version": "4.60.2",
       "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm-eabi/-/rollup-android-arm-eabi-4.60.2.tgz",
diff --git a/package.json b/package.json
index 78764404..2cb86682 100644
--- a/package.json
+++ b/package.json
@@ -92,5 +92,8 @@
     "prettier": "^3.6.2",
     "typescript": "^5.9.2",
     "vitepress": "^1.6.4"
+  },
+  "dependencies": {
+    "@react-native/debugger-frontend": "^0.85.2"
   }
 }
diff --git a/scripts/build-client.sh b/scripts/build-client.sh
index 977e8780..7323b16c 100755
--- a/scripts/build-client.sh
+++ b/scripts/build-client.sh
@@ -9,3 +9,10 @@ if [[ ! -d "$CLIENT_DIR/node_modules" ]]; then
 fi
 
 npm run --prefix "$CLIENT_DIR" build
+
+DEVTOOLS_FRONTEND="$ROOT_DIR/node_modules/@react-native/debugger-frontend/dist/third-party/front_end"
+if [[ -d "$DEVTOOLS_FRONTEND" ]]; then
+  rm -rf "$CLIENT_DIR/dist/chrome-devtools-ui"
+  mkdir -p "$CLIENT_DIR/dist/chrome-devtools-ui"
+  cp -R "$DEVTOOLS_FRONTEND/." "$CLIENT_DIR/dist/chrome-devtools-ui/"
+fi
diff --git a/server/Cargo.lock b/server/Cargo.lock
index 3b8e980d..a0120b67 100644
--- a/server/Cargo.lock
+++ b/server/Cargo.lock
@@ -1400,6 +1400,19 @@ dependencies = [
  "spki",
 ]
 
+[[package]]
+name = "plist"
+version = "1.9.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "092791278e026273c1b65bbdcfbba3a300f2994c896bd01ab01da613c29c46f1"
+dependencies = [
+ "base64",
+ "indexmap",
+ "quick-xml",
+ "serde",
+ "time",
+]
+
 [[package]]
 name = "polyval"
 version = "0.6.2"
@@ -1470,6 +1483,15 @@ dependencies = [
  "unicode-ident",
 ]
 
+[[package]]
+name = "quick-xml"
+version = "0.39.4"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "cdcc8dd4e2f670d309a5f0e83fe36dfdc05af317008fea29144da1a2ac858e5e"
+dependencies = [
+ "memchr",
+]
+
 [[package]]
 name = "quote"
 version = "1.0.45"
@@ -1891,12 +1913,14 @@ dependencies = [
  "hex",
  "http",
  "libc",
+ "plist",
  "serde",
  "serde_json",
  "sha2",
  "thiserror 2.0.18",
  "tokio",
  "tokio-stream",
+ "tokio-tungstenite",
  "tower-http",
  "tracing",
  "tracing-subscriber",
diff --git a/server/Cargo.toml b/server/Cargo.toml
index 37fd0c43..90270a9b 100644
--- a/server/Cargo.toml
+++ b/server/Cargo.toml
@@ -14,12 +14,14 @@ futures = "0.3"
 hex = "0.4"
 http = "1.1"
 libc = "0.2"
+plist = "1.7"
 serde = { version = "1.0", features = ["derive"] }
 serde_json = "1.0"
 sha2 = "0.10"
 thiserror = "2.0"
 tokio = { version = "1.42", features = ["fs", "io-util", "macros", "process", "rt-multi-thread", "signal", "sync", "time"] }
 tokio-stream = "0.1"
+tokio-tungstenite = "0.29"
 tower-http = { version = "0.6", features = ["cors", "fs", "trace"] }
 tracing = "0.1"
 tracing-subscriber = { version = "0.3", features = ["env-filter", "fmt"] }
diff --git a/server/src/api/routes.rs b/server/src/api/routes.rs
index c10eb337..153c9b44 100644
--- a/server/src/api/routes.rs
+++ b/server/src/api/routes.rs
@@ -1,6 +1,7 @@
 use crate::api::json::json;
 use crate::auth;
 use crate::config::Config;
+use crate::devtools;
 use crate::error::AppError;
 use crate::inspector::{InspectorHub, PublishedInspector};
 use crate::logs::LogRegistry;
@@ -8,13 +9,15 @@ use crate::metrics::counters::{ClientStreamStats, Metrics};
 use crate::native::bridge::{LogFilters, NativeBridge};
 use crate::simulators::registry::SessionRegistry;
 use crate::simulators::session::SimulatorSession;
+use crate::static_files;
 use crate::transport::packet::FramePacket;
+use crate::webkit;
 use axum::body::Body;
 use axum::extract::ws::{Message, WebSocket, WebSocketUpgrade};
 use axum::extract::{ConnectInfo, Path, Query, State};
-use axum::http::{header, HeaderMap, Method, Request, StatusCode};
+use axum::http::{header, HeaderMap, Method, Request, StatusCode, Uri};
 use axum::middleware::{from_fn_with_state, Next};
-use axum::response::{IntoResponse, Response};
+use axum::response::{IntoResponse, Redirect, Response};
 use axum::routing::{get, post};
 use axum::{Json, Router};
 use bytes::{Bytes, BytesMut};
@@ -544,6 +547,13 @@ pub fn router(state: AppState) -> Router {
         .route("/api/inspector/poll", get(inspector_poll))
         .route("/api/inspector/request", post(inspector_direct_request))
         .route("/api/inspector/response", post(inspector_response))
+        .route("/chrome-devtools-ui", get(chrome_devtools_ui_redirect))
+        .route("/chrome-devtools-ui/{*path}", get(chrome_devtools_ui_file))
+        .route("/webkit-inspector-ui", get(webkit_inspector_ui_redirect))
+        .route(
+            "/webkit-inspector-ui/{*path}",
+            get(webkit_inspector_ui_file),
+        )
         .route("/api/simulators", get(list_simulators))
         .route("/api/simulators/{udid}/boot", post(boot_simulator))
         .route("/api/simulators/{udid}/shutdown", post(shutdown_simulator))
@@ -615,6 +625,19 @@ pub fn router(state: AppState) -> Router {
             "/api/simulators/{udid}/inspector/request",
             post(inspector_request),
         )
+        .route("/api/simulators/{udid}/webkit/targets", get(webkit_targets))
+        .route(
+            "/api/simulators/{udid}/webkit/targets/{target_id}/socket",
+            get(webkit_target_socket),
+        )
+        .route(
+            "/api/simulators/{udid}/devtools/targets",
+            get(chrome_devtools_targets),
+        )
+        .route(
+            "/api/simulators/{udid}/devtools/targets/{target_id}/socket",
+            get(chrome_devtools_target_socket),
+        )
         .route("/api/simulators/{udid}/logs", get(simulator_logs))
         .route_layer(from_fn_with_state(state.clone(), require_api_auth))
         .with_state(state)
@@ -735,6 +758,245 @@ async fn metrics(State(state): State<AppState>) -> Json<Value> {
     json(snapshot)
 }
 
+async fn webkit_targets(
+    State(_state): State<AppState>,
+    Path(udid): Path<String>,
+    headers: HeaderMap,
+) -> Result<Json<webkit::WebKitTargetDiscovery>, AppError> {
+    let origin = request_origin(&headers);
+    let targets = webkit::discover_targets(&udid, origin.as_deref()).await?;
+    Ok(Json(targets))
+}
+
+async fn webkit_target_socket(
+    Path((udid, target_id)): Path<(String, String)>,
+    ws: WebSocketUpgrade,
+) -> Response {
+    ws.on_upgrade(move |socket| webkit::attach_websocket(udid, target_id, socket))
+}
+
+async fn chrome_devtools_targets(
+    State(state): State<AppState>,
+    Path(udid): Path<String>,
+    headers: HeaderMap,
+) -> Result<Json<devtools::ChromeDevToolsTargetDiscovery>, AppError> {
+    let origin = request_origin(&headers);
+    let mut warnings = Vec::new();
+    let mut inspector_warnings = Vec::new();
+    let simulator = match list_simulators_cached(state.clone(), false).await {
+        Ok(simulators) => simulators
+            .into_iter()
+            .find(|simulator| simulator.udid == udid),
+        Err(error) => {
+            warnings.push(format!(
+                "Unable to load simulator metadata for DevTools discovery: {error}"
+            ));
+            None
+        }
+    };
+    let mut sessions = match inspector_sessions_for_udid(&state, &udid).await {
+        Ok(sessions) => sessions,
+        Err(error) => {
+            inspector_warnings.push(error);
+            Vec::new()
+        }
+    };
+    if sessions.is_empty() {
+        match inspector_session_for_state(&state, &udid).await {
+            Ok(session) => sessions.push(session),
+            Err(error) => inspector_warnings.push(error),
+        }
+    }
+    let mut targets: Vec<devtools::ChromeDevToolsTarget> = sessions
+        .iter()
+        .map(|session| {
+            let source = chrome_devtools_source_for_session(session);
+            devtools::build_target(
+                &udid,
+                origin.as_deref(),
+                &session.info,
+                session.process_identifier,
+                source,
+            )
+        })
+        .collect();
+    let (mut external_targets, external_warnings) = devtools::discover_external_devtools_targets(
+        &udid,
+        origin.as_deref(),
+        simulator.as_ref().map(|simulator| simulator.name.as_str()),
+        simulator
+            .as_ref()
+            .map(|simulator| simulator.device_type_name.as_str()),
+    )
+    .await;
+    targets.append(&mut external_targets);
+    if targets.is_empty() {
+        warnings.extend(inspector_warnings);
+    }
+    warnings.extend(external_warnings);
+    Ok(Json(devtools::ChromeDevToolsTargetDiscovery {
+        udid,
+        targets,
+        warnings,
+    }))
+}
+
+async fn chrome_devtools_target_socket(
+    State(state): State<AppState>,
+    Path((udid, target_id)): Path<(String, String)>,
+    websocket: WebSocketUpgrade,
+) -> Response {
+    websocket.on_upgrade(move |socket| async move {
+        if target_id.starts_with("metro-") || target_id.starts_with("cdp-") {
+            match devtools::proxied_websocket_url_for_target(&target_id).await {
+                Ok(upstream_url) => devtools::proxy_websocket(socket, upstream_url).await,
+                Err(error) => {
+                    tracing::debug!(
+                        "Proxied DevTools target socket failed for {udid}/{target_id}: {error}"
+                    );
+                }
+            }
+        } else {
+            match chrome_devtools_socket_session(&state, &udid, &target_id).await {
+                Ok((runtime, query)) => devtools::handle_socket(socket, runtime, query).await,
+                Err(error) => {
+                    tracing::debug!(
+                        "Chrome DevTools target socket failed for {udid}/{target_id}: {error}"
+                    );
+                }
+            }
+        }
+    })
+}
+
+async fn chrome_devtools_socket_session(
+    state: &AppState,
+    udid: &str,
+    target_id: &str,
+) -> Result<
+    (
+        devtools::ChromeDevToolsTargetRuntime,
+        devtools::DevToolsQuery,
+    ),
+    String,
+> {
+    let process_identifier = target_id
+        .strip_prefix("sdi-")
+        .and_then(|value| value.parse::<i64>().ok())
+        .ok_or_else(|| "Invalid Chrome DevTools target id.".to_owned())?;
+    let session = inspector_session_for_process(state, udid, process_identifier).await?;
+    let source = chrome_devtools_source_for_session(&session);
+    let target = devtools::build_target(
+        udid,
+        None,
+        &session.info,
+        session.process_identifier,
+        source,
+    );
+    let runtime = devtools::runtime_from_target(&target);
+    let query_state = state.clone();
+    let query_session = session.clone();
+    let query: devtools::DevToolsQuery = Arc::new(move |method, params| {
+        let state = query_state.clone();
+        let session = query_session.clone();
+        Box::pin(async move { query_inspector_session(&state, &session, &method, params).await })
+    });
+    Ok((runtime, query))
+}
+
+fn chrome_devtools_source_for_session(session: &InspectorSession) -> &str {
+    if session
+        .available_sources
+        .iter()
+        .any(|source| source == SOURCE_REACT_NATIVE)
+    {
+        return SOURCE_REACT_NATIVE;
+    }
+    if session
+        .available_sources
+        .iter()
+        .any(|source| source == SOURCE_NATIVE_SCRIPT)
+    {
+        return SOURCE_NATIVE_SCRIPT;
+    }
+    if session
+        .available_sources
+        .iter()
+        .any(|source| source == SOURCE_SWIFTUI)
+    {
+        return SOURCE_SWIFTUI;
+    }
+    SOURCE_UIKIT
+}
+
+async fn chrome_devtools_ui_redirect() -> Redirect {
+    Redirect::temporary("/chrome-devtools-ui/inspector.html")
+}
+
+async fn chrome_devtools_ui_file(method: Method, uri: Uri) -> Response {
+    let Some(root) = devtools::chrome_devtools_frontend_root() else {
+        return AppError::not_found("Chrome DevTools frontend resources are not available.")
+            .into_response();
+    };
+    match static_files::serve_static_under(root, "/chrome-devtools-ui", method, uri, None).await {
+        Ok(response) => response,
+        Err(status) => status.into_response(),
+    }
+}
+
+async fn webkit_inspector_ui_redirect() -> Redirect {
+    Redirect::temporary("/webkit-inspector-ui/Main.html")
+}
+
+async fn webkit_inspector_ui_file(method: Method, uri: Uri) -> Response {
+    let Some(root) = webkit::webkit_inspector_ui_root() else {
+        return AppError::not_found("WebInspectorUI resources are not available on this Mac.")
+            .into_response();
+    };
+    if uri.path().trim_end_matches('/') == "/webkit-inspector-ui/Main.html" {
+        if method != Method::GET && method != Method::HEAD {
+            return StatusCode::METHOD_NOT_ALLOWED.into_response();
+        }
+        let main_html = match tokio::fs::read_to_string(root.join("Main.html")).await {
+            Ok(main_html) => main_html,
+            Err(_) => return StatusCode::NOT_FOUND.into_response(),
+        };
+        let body = if method == Method::HEAD {
+            Body::empty()
+        } else {
+            Body::from(webkit::inject_frontend_host(&main_html))
+        };
+        return Response::builder()
+            .status(StatusCode::OK)
+            .header(header::CONTENT_TYPE, "text/html; charset=utf-8")
+            .header(
+                header::CACHE_CONTROL,
+                "no-store, no-cache, must-revalidate, max-age=0",
+            )
+            .header(header::PRAGMA, "no-cache")
+            .header(header::EXPIRES, "0")
+            .body(body)
+            .unwrap_or_else(|_| StatusCode::INTERNAL_SERVER_ERROR.into_response());
+    }
+    match static_files::serve_static_under(root, "/webkit-inspector-ui", method, uri, None).await {
+        Ok(response) => response,
+        Err(status) => status.into_response(),
+    }
+}
+
+fn request_origin(headers: &HeaderMap) -> Option<String> {
+    headers
+        .get(header::ORIGIN)
+        .and_then(|value| value.to_str().ok())
+        .map(ToOwned::to_owned)
+        .or_else(|| {
+            headers
+                .get(header::HOST)
+                .and_then(|value| value.to_str().ok())
+                .map(|host| format!("http://{host}"))
+        })
+}
+
 async fn stream_quality(State(state): State<AppState>) -> Json<Value> {
     json(json_value!(stream_quality_response(&state.config)))
 }
@@ -3097,6 +3359,23 @@ async fn inspector_session_for_state(
     }
 }
 
+async fn inspector_session_for_process(
+    state: &AppState,
+    udid: &str,
+    process_identifier: i64,
+) -> Result<InspectorSession, String> {
+    let connected_error =
+        match connected_inspector_session(state, udid, Some(process_identifier)).await {
+            Ok(session) => return Ok(session),
+            Err(error) => error,
+        };
+
+    match inspector_session(udid, Some(process_identifier)).await {
+        Ok(session) => Ok(session),
+        Err(tcp_error) => Err(format!("{connected_error} {tcp_error}")),
+    }
+}
+
 async fn connected_inspector_session(
     state: &AppState,
     udid: &str,
@@ -3202,6 +3481,64 @@ fn inspector_session_from_published(inspector: PublishedInspector) -> InspectorS
     }
 }
 
+async fn inspector_sessions_for_udid(
+    state: &AppState,
+    udid: &str,
+) -> Result<Vec<InspectorSession>, String> {
+    let mut probed_inspectors = Vec::new();
+    let mut candidates = Vec::new();
+    for inspector in state.inspectors.connected().await {
+        if inspector_process_belongs_to_udid(udid, inspector.process_identifier).await? {
+            candidates.push(InspectorSession {
+                transport: InspectorSessionTransport::Connected,
+                available_sources: inspector_available_sources(&inspector.info),
+                info: inspector.info,
+                process_identifier: inspector.process_identifier,
+            });
+            continue;
+        }
+
+        probed_inspectors.push(format!("process {}", inspector.process_identifier));
+    }
+
+    for inspector in state.inspectors.published_inspectors().await {
+        if !inspector_process_belongs_to_udid(udid, inspector.process_identifier).await? {
+            probed_inspectors.push(format!("registry process {}", inspector.process_identifier));
+            continue;
+        }
+        if candidates.iter().any(|session: &InspectorSession| {
+            session.process_identifier == inspector.process_identifier
+        }) {
+            continue;
+        }
+        let session = inspector_session_from_published(inspector);
+        if query_inspector_session(state, &session, "Runtime.ping", Value::Null)
+            .await
+            .is_err()
+        {
+            probed_inspectors.push(format!(
+                "unreachable registry process {}",
+                session.process_identifier
+            ));
+            continue;
+        }
+        candidates.push(session);
+    }
+
+    if candidates.is_empty() {
+        if probed_inspectors.is_empty() {
+            return Err(format!("No app inspector found for simulator {udid}."));
+        }
+        return Err(format!(
+            "No app inspector matched simulator {udid}. Found inspectors for {}.",
+            probed_inspectors.join(", ")
+        ));
+    }
+
+    candidates.sort_by_key(inspector_session_score);
+    Ok(candidates)
+}
+
 async fn inspector_session(
     udid: &str,
     frontmost_pid: Option<i64>,
diff --git a/server/src/devtools.rs b/server/src/devtools.rs
new file mode 100644
index 00000000..2b7669cf
--- /dev/null
+++ b/server/src/devtools.rs
@@ -0,0 +1,1567 @@
+use axum::extract::ws::{Message, WebSocket};
+use futures::{SinkExt, StreamExt};
+use serde::Serialize;
+use serde_json::{json, Value};
+use std::collections::{BTreeSet, HashMap};
+use std::future::Future;
+use std::path::{Path, PathBuf};
+use std::pin::Pin;
+use std::sync::Arc;
+use std::time::{Duration, SystemTime, UNIX_EPOCH};
+use tokio::io::{AsyncReadExt, AsyncWriteExt};
+use tokio::net::TcpStream;
+use tokio::process::Command;
+use tokio::time::timeout;
+use tokio_tungstenite::tungstenite::Message as UpstreamMessage;
+use tracing::debug;
+
+pub type DevToolsQuery = Arc<
+    dyn Fn(String, Value) -> Pin<Box<dyn Future<Output = Result<Value, String>> + Send>>
+        + Send
+        + Sync,
+>;
+
+#[derive(Clone, Debug, Serialize)]
+#[serde(rename_all = "camelCase")]
+pub struct ChromeDevToolsTarget {
+    pub id: String,
+    pub title: String,
+    #[serde(rename = "type")]
+    pub target_type: String,
+    pub url: String,
+    pub description: String,
+    pub devtools_frontend_url: String,
+    pub web_socket_debugger_url: String,
+    pub source: String,
+    pub process_identifier: i64,
+    pub bundle_identifier: Option<String>,
+    pub app_name: Option<String>,
+}
+
+#[derive(Clone, Debug, Serialize)]
+#[serde(rename_all = "camelCase")]
+pub struct ChromeDevToolsTargetDiscovery {
+    pub udid: String,
+    pub targets: Vec<ChromeDevToolsTarget>,
+    pub warnings: Vec<String>,
+}
+
+#[derive(Clone, Debug)]
+pub struct ChromeDevToolsTargetRuntime {
+    pub id: String,
+    pub title: String,
+    pub url: String,
+    pub process_identifier: i64,
+}
+
+#[derive(Default)]
+struct CdpState {
+    dom: DomCache,
+    execution_context_sent: bool,
+}
+
+#[derive(Default)]
+struct DomCache {
+    document_children: Vec<u64>,
+    nodes: HashMap<u64, DomNode>,
+    next_node_id: u64,
+}
+
+struct DomNode {
+    backend_node_id: u64,
+    children: Vec<u64>,
+    frame: Option<Rect>,
+    inspector_id: Option<String>,
+    node: Value,
+    node_id: u64,
+}
+
+#[derive(Clone, Copy)]
+struct Rect {
+    x: f64,
+    y: f64,
+    width: f64,
+    height: f64,
+}
+
+struct CdpResponse {
+    events: Vec<Value>,
+    result: Value,
+}
+
+const DEVTOOLS_HOST: &str = "127.0.0.1";
+const DEVTOOLS_DISCOVERY_TIMEOUT: Duration = Duration::from_millis(450);
+const DEVTOOLS_LISTENERS_TIMEOUT: Duration = Duration::from_secs(1);
+const DEVTOOLS_MAX_RESPONSE_BYTES: usize = 4 * 1024 * 1024;
+const COMMON_METRO_PORTS: &[u16] = &[8081, 8082, 8083, 19000, 19001, 19002];
+const COMMON_CHROME_INSPECTOR_PORTS: &[u16] =
+    &[9222, 9223, 9224, 9225, 9226, 9227, 9228, 9229, 9230];
+const SOURCE_REACT_NATIVE_METRO: &str = "react-native-metro";
+const SOURCE_CHROME_INSPECTOR: &str = "chrome-inspector";
+
+pub fn chrome_devtools_frontend_root() -> Option<PathBuf> {
+    if let Ok(path) = std::env::var("SIMDECK_CHROME_DEVTOOLS_FRONTEND_ROOT") {
+        let path = PathBuf::from(path);
+        if is_devtools_frontend_root(&path) {
+            return Some(path);
+        }
+    }
+
+    let mut roots = Vec::new();
+    if let Ok(current_dir) = std::env::current_dir() {
+        roots.extend(devtools_frontend_candidates_from(&current_dir));
+    }
+    if let Ok(exe) = std::env::current_exe() {
+        if let Some(parent) = exe.parent() {
+            roots.extend(devtools_frontend_candidates_from(parent));
+        }
+    }
+
+    roots
+        .into_iter()
+        .find(|path| is_devtools_frontend_root(path))
+}
+
+fn devtools_frontend_candidates_from(start: &Path) -> Vec<PathBuf> {
+    start
+        .ancestors()
+        .flat_map(|ancestor| {
+            [
+                ancestor.join(
+                    "node_modules/@react-native/debugger-frontend/dist/third-party/front_end",
+                ),
+                ancestor.join("chrome-devtools-ui"),
+                ancestor.join("client/dist/chrome-devtools-ui"),
+            ]
+        })
+        .collect()
+}
+
+fn is_devtools_frontend_root(path: &Path) -> bool {
+    path.join("inspector.html").is_file()
+        && path.join("entrypoints/inspector/inspector.js").is_file()
+}
+
+pub fn target_id(process_identifier: i64) -> String {
+    format!("sdi-{process_identifier}")
+}
+
+pub fn runtime_from_target(target: &ChromeDevToolsTarget) -> ChromeDevToolsTargetRuntime {
+    ChromeDevToolsTargetRuntime {
+        id: target.id.clone(),
+        title: target.title.clone(),
+        url: target.url.clone(),
+        process_identifier: target.process_identifier,
+    }
+}
+
+pub fn build_target(
+    udid: &str,
+    http_origin: Option<&str>,
+    info: &Value,
+    process_identifier: i64,
+    source: &str,
+) -> ChromeDevToolsTarget {
+    let id = target_id(process_identifier);
+    let bundle_identifier = string_value(info, "bundleIdentifier");
+    let app_name = string_value(info, "bundleName")
+        .or_else(|| bundle_identifier.clone())
+        .or_else(|| Some(format!("Process {process_identifier}")));
+    let source_label = source_label(source);
+    let title = app_name
+        .as_deref()
+        .map(|name| format!("{source_label}: {name}"))
+        .unwrap_or_else(|| format!("{source_label}: Process {process_identifier}"));
+    let url = bundle_identifier
+        .as_deref()
+        .map(|bundle_id| format!("simdeck://{bundle_id}"))
+        .unwrap_or_else(|| format!("simdeck://process/{process_identifier}"));
+    let web_socket_path = format!("/api/simulators/{udid}/devtools/targets/{id}/socket");
+    let web_socket_debugger_url = websocket_url(http_origin.unwrap_or(""), &web_socket_path);
+    let devtools_frontend_url = format!(
+        "/chrome-devtools-ui/inspector.html?ws={}",
+        web_socket_debugger_url
+            .trim_start_matches("ws://")
+            .trim_start_matches("wss://")
+    );
+
+    ChromeDevToolsTarget {
+        id,
+        title,
+        target_type: "page".to_owned(),
+        url,
+        description: format!("SimDeck {source_label} inspector target"),
+        devtools_frontend_url,
+        web_socket_debugger_url,
+        source: source.to_owned(),
+        process_identifier,
+        bundle_identifier,
+        app_name,
+    }
+}
+
+pub async fn discover_external_devtools_targets(
+    udid: &str,
+    http_origin: Option<&str>,
+    simulator_name: Option<&str>,
+    simulator_device_type_name: Option<&str>,
+) -> (Vec<ChromeDevToolsTarget>, Vec<String>) {
+    let mut warnings = Vec::new();
+    let mut targets = Vec::new();
+    let mut seen_ids = BTreeSet::new();
+    let ports = candidate_devtools_ports().await;
+    for port in ports {
+        let list = match fetch_devtools_target_list(port).await {
+            Ok(value) => value,
+            Err(error) => {
+                debug!("DevTools discovery skipped {DEVTOOLS_HOST}:{port}: {error}");
+                continue;
+            }
+        };
+
+        let Some(entries) = list.as_array() else {
+            warnings.push(format!(
+                "DevTools endpoint on {DEVTOOLS_HOST}:{port} did not return a target list."
+            ));
+            continue;
+        };
+
+        let metro_entries = entries
+            .iter()
+            .filter(|entry| is_react_native_metro_target(entry))
+            .collect::<Vec<_>>();
+        let mut matched_metro_count = 0;
+        for entry in &metro_entries {
+            if !metro_target_matches_simulator(entry, simulator_name, simulator_device_type_name) {
+                continue;
+            }
+            let target = build_metro_target(udid, http_origin, port, entry);
+            if seen_ids.insert(target.id.clone()) {
+                targets.push(target);
+            }
+            matched_metro_count += 1;
+        }
+
+        if matched_metro_count == 0 && !metro_entries.is_empty() {
+            let device_names = metro_entries
+                .iter()
+                .filter_map(|entry| string_value(entry, "deviceName"))
+                .collect::<Vec<_>>();
+            if !device_names.is_empty() {
+                warnings.push(format!(
+                    "Metro on {DEVTOOLS_HOST}:{port} has React Native targets for {}, but none matched simulator {}.",
+                    unique_strings(device_names).join(", "),
+                    simulator_name.unwrap_or(udid)
+                ));
+            }
+        }
+
+        for entry in entries {
+            if is_react_native_metro_target(entry) {
+                continue;
+            }
+            let Some(target) = build_chrome_inspector_target(udid, http_origin, port, entry) else {
+                continue;
+            };
+            if seen_ids.insert(target.id.clone()) {
+                targets.push(target);
+            }
+        }
+    }
+
+    (targets, warnings)
+}
+
+pub async fn proxied_websocket_url_for_target(target_id: &str) -> Result<String, String> {
+    let port = proxied_target_port(target_id)?;
+    let list = fetch_devtools_target_list(port).await?;
+    let entries = list.as_array().ok_or_else(|| {
+        format!("DevTools endpoint on {DEVTOOLS_HOST}:{port} did not return a target list.")
+    })?;
+    for entry in entries {
+        let target = if target_id.starts_with("metro-") {
+            build_metro_target("", None, port, entry)
+        } else if target_id.starts_with("cdp-") {
+            let Some(target) = build_chrome_inspector_target("", None, port, entry) else {
+                continue;
+            };
+            target
+        } else {
+            return Err("Not a proxied DevTools target id.".to_owned());
+        };
+        if target.id == target_id {
+            if target_id.starts_with("metro-") {
+                return Ok(metro_websocket_debugger_url(port, entry));
+            }
+            return chrome_inspector_websocket_debugger_url(port, entry).ok_or_else(|| {
+                format!("DevTools target {target_id} does not expose a WebSocket URL.")
+            });
+        }
+    }
+    Err(format!(
+        "DevTools target {target_id} is no longer available."
+    ))
+}
+
+pub async fn proxy_websocket(socket: WebSocket, upstream_url: String) {
+    if let Err(error) = proxy_websocket_inner(socket, upstream_url).await {
+        debug!("DevTools proxy socket closed: {error}");
+    }
+}
+
+async fn proxy_websocket_inner(socket: WebSocket, upstream_url: String) -> Result<(), String> {
+    let (upstream, _) = tokio_tungstenite::connect_async(&upstream_url)
+        .await
+        .map_err(|error| format!("Unable to connect to DevTools socket: {error}"))?;
+    let (mut downstream_writer, mut downstream_reader) = socket.split();
+    let (mut upstream_writer, mut upstream_reader) = upstream.split();
+
+    loop {
+        tokio::select! {
+            downstream = downstream_reader.next() => {
+                let Some(message) = downstream else {
+                    break;
+                };
+                let message = message.map_err(|error| format!("Browser WebSocket error: {error}"))?;
+                let Some(message) = to_upstream_message(message) else {
+                    break;
+                };
+                upstream_writer
+                    .send(message)
+                    .await
+                    .map_err(|error| format!("Unable to forward browser message to DevTools: {error}"))?;
+            }
+            upstream = upstream_reader.next() => {
+                let Some(message) = upstream else {
+                    break;
+                };
+                let message = message.map_err(|error| format!("DevTools WebSocket error: {error}"))?;
+                let Some(message) = to_downstream_message(message) else {
+                    break;
+                };
+                downstream_writer
+                    .send(message)
+                    .await
+                    .map_err(|error| format!("Unable to forward DevTools message to browser: {error}"))?;
+            }
+        }
+    }
+
+    Ok(())
+}
+
+fn to_upstream_message(message: Message) -> Option<UpstreamMessage> {
+    match message {
+        Message::Text(text) => Some(UpstreamMessage::Text(text.to_string().into())),
+        Message::Binary(bytes) => Some(UpstreamMessage::Binary(bytes)),
+        Message::Ping(bytes) => Some(UpstreamMessage::Ping(bytes)),
+        Message::Pong(bytes) => Some(UpstreamMessage::Pong(bytes)),
+        Message::Close(_) => None,
+    }
+}
+
+fn to_downstream_message(message: UpstreamMessage) -> Option<Message> {
+    match message {
+        UpstreamMessage::Text(text) => Some(Message::Text(text.to_string().into())),
+        UpstreamMessage::Binary(bytes) => Some(Message::Binary(bytes)),
+        UpstreamMessage::Ping(bytes) => Some(Message::Ping(bytes)),
+        UpstreamMessage::Pong(bytes) => Some(Message::Pong(bytes)),
+        UpstreamMessage::Close(_) | UpstreamMessage::Frame(_) => None,
+    }
+}
+
+async fn fetch_devtools_target_list(port: u16) -> Result<Value, String> {
+    match fetch_devtools_json(port, "/json/list").await {
+        Ok(value) => Ok(value),
+        Err(list_error) => match fetch_devtools_json(port, "/json").await {
+            Ok(value) => Ok(value),
+            Err(json_error) => Err(format!("{list_error}; {json_error}")),
+        },
+    }
+}
+
+async fn fetch_devtools_json(port: u16, path: &str) -> Result<Value, String> {
+    let address = format!("{DEVTOOLS_HOST}:{port}");
+    let mut stream = timeout(DEVTOOLS_DISCOVERY_TIMEOUT, TcpStream::connect(&address))
+        .await
+        .map_err(|_| format!("Timed out connecting to DevTools endpoint at {address}."))?
+        .map_err(|error| format!("Unable to connect to DevTools endpoint at {address}: {error}"))?;
+
+    let request = format!(
+        "GET {path} HTTP/1.1\r\nHost: {address}\r\nAccept: application/json\r\nConnection: close\r\n\r\n"
+    );
+    timeout(
+        DEVTOOLS_DISCOVERY_TIMEOUT,
+        stream.write_all(request.as_bytes()),
+    )
+    .await
+    .map_err(|_| format!("Timed out requesting DevTools {path}."))?
+    .map_err(|error| format!("Unable to request DevTools {path}: {error}"))?;
+
+    let mut response = Vec::new();
+    let mut chunk = [0_u8; 8192];
+    loop {
+        let count = timeout(DEVTOOLS_DISCOVERY_TIMEOUT, stream.read(&mut chunk))
+            .await
+            .map_err(|_| format!("Timed out reading DevTools {path}."))?
+            .map_err(|error| format!("Unable to read DevTools {path}: {error}"))?;
+        if count == 0 {
+            break;
+        }
+        response.extend_from_slice(&chunk[..count]);
+        if response.len() > DEVTOOLS_MAX_RESPONSE_BYTES {
+            return Err(format!("DevTools {path} response exceeded the size limit."));
+        }
+        if response_has_complete_body(&response) {
+            break;
+        }
+    }
+
+    let (headers, body) = split_http_response(&response)
+        .ok_or_else(|| format!("DevTools {path} returned a malformed HTTP response."))?;
+    let status = headers
+        .lines()
+        .next()
+        .and_then(|line| line.split_whitespace().nth(1))
+        .and_then(|status| status.parse::<u16>().ok())
+        .unwrap_or(0);
+    if !(200..300).contains(&status) {
+        return Err(format!("DevTools {path} returned HTTP {status}."));
+    }
+
+    let body = content_length(&headers)
+        .and_then(|length| body.get(..length))
+        .unwrap_or(body);
+    serde_json::from_slice(body)
+        .map_err(|error| format!("DevTools {path} returned malformed JSON: {error}"))
+}
+
+async fn candidate_devtools_ports() -> Vec<u16> {
+    let mut ports = BTreeSet::new();
+    ports.extend(COMMON_METRO_PORTS.iter().copied());
+    ports.extend(COMMON_CHROME_INSPECTOR_PORTS.iter().copied());
+    ports.extend(discover_listening_devtools_ports().await);
+    ports.into_iter().collect()
+}
+
+async fn discover_listening_devtools_ports() -> Vec<u16> {
+    let output = match timeout(
+        DEVTOOLS_LISTENERS_TIMEOUT,
+        Command::new("lsof")
+            .args(["-nP", "-iTCP", "-sTCP:LISTEN"])
+            .output(),
+    )
+    .await
+    {
+        Ok(Ok(output)) => output,
+        Ok(Err(error)) => {
+            debug!("Unable to discover local DevTools listener ports with lsof: {error}");
+            return Vec::new();
+        }
+        Err(_) => {
+            debug!("Timed out discovering local DevTools listener ports with lsof");
+            return Vec::new();
+        }
+    };
+
+    if !output.status.success() {
+        debug!(
+            "lsof DevTools listener discovery exited with status {}",
+            output.status
+        );
+        return Vec::new();
+    }
+
+    parse_lsof_devtools_ports(&String::from_utf8_lossy(&output.stdout))
+}
+
+fn parse_lsof_devtools_ports(output: &str) -> Vec<u16> {
+    let mut ports = BTreeSet::new();
+    for line in output.lines().skip(1) {
+        if !is_devtools_listener_process(line) {
+            continue;
+        }
+        if let Some(port) = tcp_listener_port(line) {
+            ports.insert(port);
+        }
+    }
+    ports.into_iter().collect()
+}
+
+fn is_devtools_listener_process(line: &str) -> bool {
+    let lower = line.to_ascii_lowercase();
+    [
+        "node", "bun", "deno", "chrome", "chromium", "google", "electron", "metro", "react",
+        "native", "tns",
+    ]
+    .iter()
+    .any(|needle| lower.contains(needle))
+}
+
+fn tcp_listener_port(line: &str) -> Option<u16> {
+    let tcp = line.split_once("TCP ")?.1;
+    let endpoint = tcp.split_whitespace().next()?;
+    endpoint.rsplit(':').next()?.parse::<u16>().ok()
+}
+
+fn split_http_response(response: &[u8]) -> Option<(String, &[u8])> {
+    let separator = response
+        .windows(4)
+        .position(|window| window == b"\r\n\r\n")?;
+    let headers = String::from_utf8_lossy(&response[..separator]).into_owned();
+    Some((headers, &response[separator + 4..]))
+}
+
+fn response_has_complete_body(response: &[u8]) -> bool {
+    let Some((headers, body)) = split_http_response(response) else {
+        return false;
+    };
+    content_length(&headers).is_some_and(|length| body.len() >= length)
+}
+
+fn content_length(headers: &str) -> Option<usize> {
+    headers.lines().find_map(|line| {
+        let (name, value) = line.split_once(':')?;
+        if !name.trim().eq_ignore_ascii_case("content-length") {
+            return None;
+        }
+        value.trim().parse::<usize>().ok()
+    })
+}
+
+fn metro_target_matches_simulator(
+    entry: &Value,
+    simulator_name: Option<&str>,
+    simulator_device_type_name: Option<&str>,
+) -> bool {
+    let Some(device_name) = string_value(entry, "deviceName") else {
+        return true;
+    };
+    let device_name = normalized_device_name(&device_name);
+    [simulator_name, simulator_device_type_name]
+        .into_iter()
+        .flatten()
+        .map(normalized_device_name)
+        .any(|candidate| candidate == device_name)
+}
+
+fn is_react_native_metro_target(entry: &Value) -> bool {
+    entry.get("reactNative").is_some()
+        || string_value(entry, "devtoolsFrontendUrl")
+            .is_some_and(|url| url.contains("/debugger-frontend/"))
+        || string_value(entry, "webSocketDebuggerUrl")
+            .is_some_and(|url| url.contains("/inspector/debug"))
+        || string_value(entry, "description")
+            .is_some_and(|description| description.to_ascii_lowercase().contains("react native"))
+}
+
+fn build_metro_target(
+    udid: &str,
+    http_origin: Option<&str>,
+    port: u16,
+    entry: &Value,
+) -> ChromeDevToolsTarget {
+    let metro_id = string_value(entry, "id").unwrap_or_else(|| "target".to_owned());
+    let id = format!("metro-{port}-{}", path_safe_id(&metro_id));
+    let app_id = string_value(entry, "appId");
+    let title = string_value(entry, "title")
+        .or_else(|| app_id.clone())
+        .unwrap_or_else(|| "React Native".to_owned());
+    let description = string_value(entry, "description")
+        .unwrap_or_else(|| "React Native Metro DevTools target".to_owned());
+    let web_socket_path = format!("/api/simulators/{udid}/devtools/targets/{id}/socket");
+    let web_socket_debugger_url = websocket_url(http_origin.unwrap_or(""), &web_socket_path);
+    let devtools_frontend_url = metro_devtools_frontend_url(port, entry, &web_socket_debugger_url);
+    let app_name = app_id.clone().or_else(|| Some(title.clone()));
+
+    ChromeDevToolsTarget {
+        id,
+        title,
+        target_type: string_value(entry, "type").unwrap_or_else(|| "node".to_owned()),
+        url: app_id
+            .as_deref()
+            .map(|app_id| format!("metro://{app_id}/{udid}"))
+            .unwrap_or_else(|| format!("metro://{udid}/{metro_id}")),
+        description,
+        devtools_frontend_url,
+        web_socket_debugger_url,
+        source: SOURCE_REACT_NATIVE_METRO.to_owned(),
+        process_identifier: 0,
+        bundle_identifier: app_id,
+        app_name,
+    }
+}
+
+fn metro_websocket_debugger_url(port: u16, entry: &Value) -> String {
+    chrome_inspector_websocket_debugger_url(port, entry)
+        .unwrap_or_else(|| format!("ws://{DEVTOOLS_HOST}:{port}/inspector/debug"))
+}
+
+fn build_chrome_inspector_target(
+    udid: &str,
+    http_origin: Option<&str>,
+    port: u16,
+    entry: &Value,
+) -> Option<ChromeDevToolsTarget> {
+    let target_key = string_value(entry, "id")
+        .or_else(|| string_value(entry, "webSocketDebuggerUrl"))
+        .or_else(|| string_value(entry, "url"))
+        .or_else(|| string_value(entry, "title"))?;
+    chrome_inspector_websocket_debugger_url(port, entry)?;
+    let id = format!("cdp-{port}-{}", path_safe_id(&target_key));
+    let title = string_value(entry, "title")
+        .or_else(|| string_value(entry, "url"))
+        .unwrap_or_else(|| format!("DevTools target on {DEVTOOLS_HOST}:{port}"));
+    let description = string_value(entry, "description")
+        .unwrap_or_else(|| format!("Chrome DevTools target on {DEVTOOLS_HOST}:{port}"));
+    let web_socket_path = format!("/api/simulators/{udid}/devtools/targets/{id}/socket");
+    let proxied_web_socket_url = websocket_url(http_origin.unwrap_or(""), &web_socket_path);
+    let devtools_frontend_url = chrome_inspector_frontend_url(&proxied_web_socket_url);
+    let url = string_value(entry, "url")
+        .unwrap_or_else(|| format!("devtools://{DEVTOOLS_HOST}:{port}/{target_key}"));
+
+    Some(ChromeDevToolsTarget {
+        id,
+        title,
+        target_type: string_value(entry, "type").unwrap_or_else(|| "page".to_owned()),
+        url,
+        description,
+        devtools_frontend_url,
+        web_socket_debugger_url: proxied_web_socket_url,
+        source: SOURCE_CHROME_INSPECTOR.to_owned(),
+        process_identifier: 0,
+        bundle_identifier: None,
+        app_name: None,
+    })
+}
+
+fn chrome_inspector_websocket_debugger_url(port: u16, entry: &Value) -> Option<String> {
+    string_value(entry, "webSocketDebuggerUrl")
+        .map(|url| normalize_upstream_websocket_url(port, &url))
+        .or_else(|| {
+            string_value(entry, "id")
+                .map(|id| format!("ws://{DEVTOOLS_HOST}:{port}/devtools/page/{id}"))
+        })
+}
+
+fn normalize_upstream_websocket_url(port: u16, value: &str) -> String {
+    if value.starts_with("ws://") || value.starts_with("wss://") {
+        return value.to_owned();
+    }
+    if value.starts_with('/') {
+        return format!("ws://{DEVTOOLS_HOST}:{port}{value}");
+    }
+    format!("ws://{DEVTOOLS_HOST}:{port}/{value}")
+}
+
+fn chrome_inspector_frontend_url(web_socket_debugger_url: &str) -> String {
+    let socket_param = web_socket_debugger_url
+        .trim_start_matches("ws://")
+        .trim_start_matches("wss://");
+    format!(
+        "/chrome-devtools-ui/inspector.html?ws={}",
+        percent_encode_query_component(socket_param)
+    )
+}
+
+fn proxied_target_port(target_id: &str) -> Result<u16, String> {
+    let rest = target_id
+        .strip_prefix("metro-")
+        .or_else(|| target_id.strip_prefix("cdp-"))
+        .ok_or_else(|| "Not a proxied DevTools target id.".to_owned())?;
+    rest.split('-')
+        .next()
+        .and_then(|port| port.parse::<u16>().ok())
+        .ok_or_else(|| "Invalid proxied DevTools target id.".to_owned())
+}
+
+fn metro_devtools_frontend_url(port: u16, entry: &Value, web_socket_debugger_url: &str) -> String {
+    let frontend = string_value(entry, "devtoolsFrontendUrl")
+        .unwrap_or_else(|| "/debugger-frontend/rn_fusebox.html".to_owned());
+    let (path, query) = split_path_query(&frontend);
+    if path.ends_with("/rn_fusebox.html") {
+        return local_metro_fusebox_frontend_url(query, web_socket_debugger_url);
+    }
+    if frontend.starts_with("http://") || frontend.starts_with("https://") {
+        return frontend;
+    }
+    format!("http://{DEVTOOLS_HOST}:{port}{frontend}")
+}
+
+fn local_metro_fusebox_frontend_url(query: Option<&str>, web_socket_debugger_url: &str) -> String {
+    let socket_param = web_socket_debugger_url
+        .trim_start_matches("ws://")
+        .trim_start_matches("wss://");
+    let mut params = vec![format!(
+        "ws={}",
+        percent_encode_query_component(socket_param)
+    )];
+    if let Some(query) = query {
+        params.extend(
+            query
+                .split('&')
+                .filter(|param| !param.is_empty() && !param.starts_with("ws="))
+                .map(ToOwned::to_owned),
+        );
+    }
+    format!("/chrome-devtools-ui/rn_fusebox.html?{}", params.join("&"))
+}
+
+fn split_path_query(value: &str) -> (&str, Option<&str>) {
+    match value.split_once('?') {
+        Some((path, query)) => (path, Some(query)),
+        None => (value, None),
+    }
+}
+
+fn normalized_device_name(value: &str) -> String {
+    value
+        .trim()
+        .strip_prefix("SimDeck ")
+        .unwrap_or_else(|| value.trim())
+        .to_ascii_lowercase()
+}
+
+fn path_safe_id(value: &str) -> String {
+    let safe = value
+        .chars()
+        .map(|character| {
+            if character.is_ascii_alphanumeric() || matches!(character, '-' | '_' | '.') {
+                character
+            } else {
+                '-'
+            }
+        })
+        .collect::<String>();
+    if safe.trim_matches('-').is_empty() {
+        "target".to_owned()
+    } else {
+        safe
+    }
+}
+
+fn percent_encode_query_component(value: &str) -> String {
+    let mut encoded = String::new();
+    for byte in value.bytes() {
+        if byte.is_ascii_alphanumeric() || matches!(byte, b'-' | b'_' | b'.' | b'~') {
+            encoded.push(byte as char);
+        } else {
+            encoded.push_str(&format!("%{byte:02X}"));
+        }
+    }
+    encoded
+}
+
+fn unique_strings(values: Vec<String>) -> Vec<String> {
+    values.into_iter().fold(Vec::new(), |mut unique, value| {
+        if !unique.contains(&value) {
+            unique.push(value);
+        }
+        unique
+    })
+}
+
+pub async fn handle_socket(
+    socket: WebSocket,
+    target: ChromeDevToolsTargetRuntime,
+    query: DevToolsQuery,
+) {
+    if let Err(error) = handle_socket_inner(socket, target, query).await {
+        debug!("Chrome DevTools socket closed: {error}");
+    }
+}
+
+async fn handle_socket_inner(
+    socket: WebSocket,
+    target: ChromeDevToolsTargetRuntime,
+    query: DevToolsQuery,
+) -> Result<(), String> {
+    let (mut writer, mut reader) = socket.split();
+    let mut state = CdpState::default();
+
+    while let Some(message) = reader.next().await {
+        let text = match message {
+            Ok(Message::Text(text)) => text.to_string(),
+            Ok(Message::Binary(bytes)) => String::from_utf8(bytes.to_vec())
+                .map_err(|error| format!("Invalid UTF-8 DevTools frame: {error}"))?,
+            Ok(Message::Close(_)) => break,
+            Ok(Message::Ping(_)) | Ok(Message::Pong(_)) => continue,
+            Err(error) => return Err(format!("WebSocket client error: {error}")),
+        };
+
+        let request = serde_json::from_str::<Value>(&text)
+            .map_err(|error| format!("Malformed DevTools JSON: {error}"))?;
+        let id = request.get("id").cloned();
+        let method = request
+            .get("method")
+            .and_then(Value::as_str)
+            .unwrap_or_default()
+            .to_owned();
+        let params = request.get("params").cloned().unwrap_or(Value::Null);
+        let outcome =
+            match handle_cdp_method(&mut state, &target, query.clone(), &method, params).await {
+                Ok(outcome) => outcome,
+                Err(message) => {
+                    let response = json!({
+                        "id": id.unwrap_or(Value::Null),
+                        "error": {
+                            "code": -32000,
+                            "message": message,
+                        },
+                    });
+                    writer
+                        .send(Message::Text(response.to_string().into()))
+                        .await
+                        .map_err(|error| format!("Unable to send DevTools response: {error}"))?;
+                    continue;
+                }
+            };
+        let response = json!({
+            "id": id.unwrap_or(Value::Null),
+            "result": outcome.result,
+        });
+
+        writer
+            .send(Message::Text(response.to_string().into()))
+            .await
+            .map_err(|error| format!("Unable to send DevTools response: {error}"))?;
+
+        for event in outcome.events {
+            writer
+                .send(Message::Text(event.to_string().into()))
+                .await
+                .map_err(|error| format!("Unable to send DevTools event: {error}"))?;
+        }
+    }
+
+    Ok(())
+}
+
+async fn handle_cdp_method(
+    state: &mut CdpState,
+    target: &ChromeDevToolsTargetRuntime,
+    query: DevToolsQuery,
+    method: &str,
+    params: Value,
+) -> Result<CdpResponse, String> {
+    let mut events = Vec::new();
+    let result = match method {
+        "Browser.getVersion" => json!({
+            "protocolVersion": "1.3",
+            "product": "SimDeck",
+            "revision": "simdeck",
+            "userAgent": "SimDeck Chrome DevTools Adapter",
+            "jsVersion": "0",
+        }),
+        "Schema.getDomains" => json!({
+            "domains": [
+                { "name": "Runtime", "version": "1.3" },
+                { "name": "DOM", "version": "1.3" },
+                { "name": "Page", "version": "1.3" },
+                { "name": "CSS", "version": "1.3" },
+                { "name": "Log", "version": "1.3" },
+                { "name": "Target", "version": "1.3" }
+            ],
+        }),
+        "Target.getTargets" => json!({
+            "targetInfos": [target_info(target)],
+        }),
+        "Target.setDiscoverTargets" | "Target.setAutoAttach" => json!({}),
+        "Runtime.enable" => {
+            if !state.execution_context_sent {
+                events.push(json!({
+                    "method": "Runtime.executionContextCreated",
+                    "params": {
+                        "context": execution_context(target),
+                    },
+                }));
+                state.execution_context_sent = true;
+            }
+            json!({})
+        }
+        "Runtime.getIsolateId" => json!({ "id": "simdeck" }),
+        "Runtime.runIfWaitingForDebugger"
+        | "Runtime.releaseObject"
+        | "Runtime.releaseObjectGroup"
+        | "Runtime.discardConsoleEntries"
+        | "Debugger.enable"
+        | "Debugger.disable"
+        | "Debugger.setAsyncCallStackDepth"
+        | "Debugger.setPauseOnExceptions"
+        | "Debugger.setBlackboxPatterns"
+        | "Debugger.setBreakpointsActive"
+        | "Page.enable"
+        | "Page.disable"
+        | "Page.setLifecycleEventsEnabled"
+        | "Log.enable"
+        | "Log.clear"
+        | "Console.enable"
+        | "Network.enable"
+        | "Network.disable"
+        | "Network.setCacheDisabled"
+        | "Network.setBypassServiceWorker"
+        | "DOM.enable"
+        | "CSS.enable"
+        | "CSS.disable"
+        | "Overlay.enable"
+        | "Overlay.disable"
+        | "Overlay.hideHighlight"
+        | "Security.enable"
+        | "Performance.enable"
+        | "Inspector.enable"
+        | "Audits.enable"
+        | "Emulation.setFocusEmulationEnabled" => json!({}),
+        "Page.getFrameTree" | "Page.getResourceTree" => json!({
+            "frameTree": {
+                "frame": frame(target),
+                "resources": [],
+            },
+        }),
+        "Page.getNavigationHistory" => json!({
+            "currentIndex": 0,
+            "entries": [{
+                "id": 1,
+                "url": target.url,
+                "userTypedURL": target.url,
+                "title": target.title,
+                "transitionType": "typed",
+            }],
+        }),
+        "Page.getResourceContent" => json!({
+            "content": "",
+            "base64Encoded": false,
+        }),
+        "Runtime.evaluate" => runtime_evaluate(query, &params).await,
+        "Runtime.awaitPromise" => json!({
+            "result": remote_object(&Value::Null),
+        }),
+        "Runtime.callFunctionOn" => json!({
+            "result": remote_object(&Value::Null),
+        }),
+        "Runtime.getProperties" => runtime_get_properties(state, &params),
+        "Debugger.getScriptSource" => json!({
+            "scriptSource": "",
+        }),
+        "DOM.getDocument" => {
+            state.dom.refresh(query.clone()).await?;
+            let depth = params
+                .get("depth")
+                .and_then(Value::as_i64)
+                .unwrap_or(2)
+                .max(-1);
+            json!({
+                "root": state.dom.document_node(depth),
+            })
+        }
+        "DOM.getFlattenedDocument" => {
+            state.dom.refresh(query.clone()).await?;
+            let depth = params
+                .get("depth")
+                .and_then(Value::as_i64)
+                .unwrap_or(-1)
+                .max(-1);
+            json!({
+                "nodes": state.dom.flattened_nodes(depth),
+            })
+        }
+        "DOM.requestChildNodes" => {
+            state.dom.refresh(query.clone()).await?;
+            let node_id = params.get("nodeId").and_then(Value::as_u64).unwrap_or(1);
+            events.push(json!({
+                "method": "DOM.setChildNodes",
+                "params": {
+                    "parentId": node_id,
+                    "nodes": state.dom.children_for_node(node_id, 1),
+                },
+            }));
+            json!({})
+        }
+        "DOM.describeNode" => {
+            state.dom.refresh(query.clone()).await?;
+            let node_id = params.get("nodeId").and_then(Value::as_u64).unwrap_or(1);
+            json!({
+                "node": state.dom.describe_node(node_id),
+            })
+        }
+        "DOM.resolveNode" => {
+            state.dom.refresh(query.clone()).await?;
+            let node_id = params.get("nodeId").and_then(Value::as_u64).unwrap_or(1);
+            json!({
+                "object": state.dom.remote_node_object(node_id),
+            })
+        }
+        "DOM.getBoxModel" => {
+            state.dom.refresh(query.clone()).await?;
+            let node_id = params.get("nodeId").and_then(Value::as_u64).unwrap_or(1);
+            json!({
+                "model": state.dom.box_model(node_id),
+            })
+        }
+        "DOM.pushNodesByBackendIdsToFrontend" => json!({
+            "nodeIds": params
+                .get("backendNodeIds")
+                .and_then(Value::as_array)
+                .map(|ids| ids.iter().filter_map(Value::as_u64).collect::<Vec<_>>())
+                .unwrap_or_default(),
+        }),
+        "DOM.querySelector" => json!({ "nodeId": 0 }),
+        "DOM.querySelectorAll" => json!({ "nodeIds": [] }),
+        "CSS.getMatchedStylesForNode" => json!({
+            "matchedCSSRules": [],
+            "pseudoElements": [],
+            "inherited": [],
+            "cssKeyframesRules": [],
+        }),
+        "CSS.getComputedStyleForNode" => json!({
+            "computedStyle": [],
+        }),
+        "CSS.getPlatformFontsForNode" => json!({
+            "fonts": [],
+        }),
+        "Overlay.highlightNode" | "Overlay.highlightRect" => json!({}),
+        _ => json!({}),
+    };
+
+    Ok(CdpResponse { events, result })
+}
+
+async fn runtime_evaluate(query: DevToolsQuery, params: &Value) -> Value {
+    let expression = params
+        .get("expression")
+        .and_then(Value::as_str)
+        .unwrap_or("")
+        .trim();
+    if expression.is_empty() {
+        return json!({ "result": remote_object(&Value::Null) });
+    }
+
+    let hierarchy = match query(
+        "View.getHierarchy".to_owned(),
+        json!({
+            "includeHidden": true,
+            "maxDepth": 0,
+        }),
+    )
+    .await
+    {
+        Ok(value) => value,
+        Err(error) => return exception_result(error),
+    };
+    let Some(root_id) = first_inspector_id(&hierarchy) else {
+        return exception_result("No inspectable root view is available.".to_owned());
+    };
+    match query(
+        "View.evaluateScript".to_owned(),
+        json!({
+            "id": root_id,
+            "script": expression,
+        }),
+    )
+    .await
+    {
+        Ok(value) => json!({ "result": remote_object(value.get("result").unwrap_or(&value)) }),
+        Err(error) => exception_result(error),
+    }
+}
+
+fn runtime_get_properties(state: &mut CdpState, params: &Value) -> Value {
+    let object_id = params
+        .get("objectId")
+        .and_then(Value::as_str)
+        .unwrap_or_default();
+    if let Some(node_id) = object_id
+        .strip_prefix("node:")
+        .and_then(|id| id.parse().ok())
+    {
+        return json!({
+            "result": state.dom.node_properties(node_id),
+            "internalProperties": [],
+            "privateProperties": [],
+        });
+    }
+    json!({
+        "result": [],
+        "internalProperties": [],
+        "privateProperties": [],
+    })
+}
+
+fn exception_result(message: String) -> Value {
+    json!({
+        "result": {
+            "type": "undefined",
+            "description": "undefined",
+        },
+        "exceptionDetails": {
+            "text": message,
+            "exception": {
+                "type": "string",
+                "value": message,
+                "description": message,
+            },
+        },
+    })
+}
+
+impl DomCache {
+    async fn refresh(&mut self, query: DevToolsQuery) -> Result<(), String> {
+        let hierarchy = query(
+            "View.getHierarchy".to_owned(),
+            json!({
+                "includeHidden": true,
+                "maxDepth": 30,
+            }),
+        )
+        .await?;
+        self.rebuild(&hierarchy);
+        Ok(())
+    }
+
+    fn rebuild(&mut self, hierarchy: &Value) {
+        self.document_children.clear();
+        self.nodes.clear();
+        self.next_node_id = 2;
+        if let Some(roots) = hierarchy.get("roots").and_then(Value::as_array) {
+            for root in roots {
+                let node_id = self.insert_node(root);
+                self.document_children.push(node_id);
+            }
+        }
+    }
+
+    fn insert_node(&mut self, node: &Value) -> u64 {
+        let node_id = self.next_node_id;
+        self.next_node_id += 1;
+        let children_values = node
+            .get("children")
+            .and_then(Value::as_array)
+            .cloned()
+            .unwrap_or_default();
+        let inspector_id = node
+            .get("inspectorId")
+            .or_else(|| node.get("id"))
+            .and_then(Value::as_str)
+            .map(ToOwned::to_owned);
+        let frame = rect_from_node(node);
+        self.nodes.insert(
+            node_id,
+            DomNode {
+                backend_node_id: node_id,
+                children: Vec::new(),
+                frame,
+                inspector_id,
+                node: node.clone(),
+                node_id,
+            },
+        );
+        let children = children_values
+            .iter()
+            .map(|child| self.insert_node(child))
+            .collect::<Vec<_>>();
+        if let Some(node) = self.nodes.get_mut(&node_id) {
+            node.children = children;
+        }
+        node_id
+    }
+
+    fn document_node(&self, depth: i64) -> Value {
+        json!({
+            "nodeId": 1,
+            "backendNodeId": 1,
+            "nodeType": 9,
+            "nodeName": "#document",
+            "localName": "",
+            "nodeValue": "",
+            "childNodeCount": self.document_children.len(),
+            "children": self.document_children
+                .iter()
+                .map(|node_id| self.node_value(*node_id, depth))
+                .collect::<Vec<_>>(),
+        })
+    }
+
+    fn flattened_nodes(&self, depth: i64) -> Vec<Value> {
+        let mut nodes = vec![self.document_node(0)];
+        for node_id in &self.document_children {
+            self.append_flattened(*node_id, depth, &mut nodes);
+        }
+        nodes
+    }
+
+    fn append_flattened(&self, node_id: u64, depth: i64, nodes: &mut Vec<Value>) {
+        nodes.push(self.node_value(node_id, 0));
+        if depth == 0 {
+            return;
+        }
+        if let Some(node) = self.nodes.get(&node_id) {
+            let next_depth = if depth < 0 { -1 } else { depth - 1 };
+            for child_id in &node.children {
+                self.append_flattened(*child_id, next_depth, nodes);
+            }
+        }
+    }
+
+    fn describe_node(&self, node_id: u64) -> Value {
+        if node_id == 1 {
+            return self.document_node(0);
+        }
+        self.node_value(node_id, 1)
+    }
+
+    fn children_for_node(&self, node_id: u64, depth: i64) -> Vec<Value> {
+        if node_id == 1 {
+            return self
+                .document_children
+                .iter()
+                .map(|child_id| self.node_value(*child_id, depth))
+                .collect();
+        }
+        self.nodes
+            .get(&node_id)
+            .map(|node| {
+                node.children
+                    .iter()
+                    .map(|child_id| self.node_value(*child_id, depth))
+                    .collect()
+            })
+            .unwrap_or_default()
+    }
+
+    fn node_value(&self, node_id: u64, depth: i64) -> Value {
+        let Some(node) = self.nodes.get(&node_id) else {
+            return json!({
+                "nodeId": node_id,
+                "backendNodeId": node_id,
+                "nodeType": 1,
+                "nodeName": "UNKNOWN",
+                "localName": "unknown",
+                "nodeValue": "",
+                "childNodeCount": 0,
+                "attributes": [],
+            });
+        };
+        let node_name = node_name(&node.node);
+        let mut value = json!({
+            "nodeId": node.node_id,
+            "backendNodeId": node.backend_node_id,
+            "nodeType": 1,
+            "nodeName": node_name.to_ascii_uppercase(),
+            "localName": node_name.to_ascii_lowercase(),
+            "nodeValue": "",
+            "childNodeCount": node.children.len(),
+            "attributes": node_attributes(&node.node, node.inspector_id.as_deref()),
+        });
+        if depth != 0 {
+            let next_depth = if depth < 0 { -1 } else { depth - 1 };
+            if let Some(object) = value.as_object_mut() {
+                object.insert(
+                    "children".to_owned(),
+                    Value::Array(
+                        node.children
+                            .iter()
+                            .map(|child_id| self.node_value(*child_id, next_depth))
+                            .collect(),
+                    ),
+                );
+            }
+        }
+        value
+    }
+
+    fn remote_node_object(&self, node_id: u64) -> Value {
+        let description = self
+            .nodes
+            .get(&node_id)
+            .map(|node| node_description(&node.node))
+            .unwrap_or_else(|| "#document".to_owned());
+        json!({
+            "type": "object",
+            "subtype": "node",
+            "className": "SimDeckNode",
+            "description": description,
+            "objectId": format!("node:{node_id}"),
+        })
+    }
+
+    fn box_model(&self, node_id: u64) -> Value {
+        let rect = self
+            .nodes
+            .get(&node_id)
+            .and_then(|node| node.frame)
+            .unwrap_or(Rect {
+                x: 0.0,
+                y: 0.0,
+                width: 0.0,
+                height: 0.0,
+            });
+        let quad = rect_quad(rect);
+        json!({
+            "content": quad,
+            "padding": quad,
+            "border": quad,
+            "margin": quad,
+            "width": rect.width,
+            "height": rect.height,
+        })
+    }
+
+    fn node_properties(&self, node_id: u64) -> Vec<Value> {
+        let Some(node) = self.nodes.get(&node_id) else {
+            return Vec::new();
+        };
+        let mut properties = Vec::new();
+        let object = node.node.as_object().cloned().unwrap_or_default();
+        for (name, value) in object {
+            if name == "children" {
+                continue;
+            }
+            properties.push(json!({
+                "name": name,
+                "value": remote_object(&value),
+                "enumerable": true,
+                "configurable": true,
+                "writable": false,
+            }));
+        }
+        properties
+    }
+}
+
+fn target_info(target: &ChromeDevToolsTargetRuntime) -> Value {
+    json!({
+        "targetId": target.id,
+        "type": "page",
+        "title": target.title,
+        "url": target.url,
+        "attached": true,
+        "canAccessOpener": false,
+        "browserContextId": "simdeck",
+    })
+}
+
+fn execution_context(target: &ChromeDevToolsTargetRuntime) -> Value {
+    json!({
+        "id": 1,
+        "origin": target.url,
+        "name": target.title,
+        "uniqueId": format!("simdeck-{}", target.process_identifier),
+        "auxData": {
+            "isDefault": true,
+            "frameId": "simdeck-frame",
+            "type": "default",
+        },
+    })
+}
+
+fn frame(target: &ChromeDevToolsTargetRuntime) -> Value {
+    json!({
+        "id": "simdeck-frame",
+        "loaderId": "simdeck-loader",
+        "url": target.url,
+        "domainAndRegistry": "",
+        "securityOrigin": target.url,
+        "mimeType": "text/html",
+        "title": target.title,
+    })
+}
+
+fn remote_object(value: &Value) -> Value {
+    match value {
+        Value::Null => json!({ "type": "object", "subtype": "null", "value": null }),
+        Value::Bool(value) => json!({ "type": "boolean", "value": value }),
+        Value::Number(value) => json!({
+            "type": "number",
+            "value": value,
+            "description": value.to_string(),
+        }),
+        Value::String(value) => json!({
+            "type": "string",
+            "value": value,
+            "description": value,
+        }),
+        Value::Array(_) | Value::Object(_) => json!({
+            "type": "object",
+            "description": compact_json(value),
+            "value": value,
+        }),
+    }
+}
+
+fn compact_json(value: &Value) -> String {
+    serde_json::to_string(value).unwrap_or_else(|_| String::new())
+}
+
+fn first_inspector_id(hierarchy: &Value) -> Option<String> {
+    hierarchy
+        .get("roots")
+        .and_then(Value::as_array)
+        .and_then(|roots| roots.first())
+        .and_then(|root| {
+            root.get("inspectorId")
+                .or_else(|| root.get("id"))
+                .and_then(Value::as_str)
+        })
+        .map(ToOwned::to_owned)
+}
+
+fn node_name(node: &Value) -> String {
+    string_value(node, "type")
+        .or_else(|| string_value(node, "className"))
+        .or_else(|| string_value(node, "source"))
+        .unwrap_or_else(|| "view".to_owned())
+        .replace(
+            |character: char| !character.is_ascii_alphanumeric() && character != '-',
+            "-",
+        )
+}
+
+fn node_description(node: &Value) -> String {
+    let name = node_name(node);
+    let title = string_value(node, "title")
+        .or_else(|| string_value(node, "text"))
+        .or_else(|| string_value(node, "AXLabel"));
+    if let Some(title) = title {
+        format!("{name} \"{title}\"")
+    } else {
+        name
+    }
+}
+
+fn node_attributes(node: &Value, inspector_id: Option<&str>) -> Vec<Value> {
+    let mut attributes = Vec::new();
+    push_attribute(&mut attributes, "data-simdeck-id", inspector_id);
+    for (name, key) in [
+        ("source", "source"),
+        ("title", "title"),
+        ("text", "text"),
+        ("label", "AXLabel"),
+        ("value", "AXValue"),
+        ("class", "className"),
+        ("testid", "reactNative.testID"),
+        ("nativeid", "reactNative.nativeID"),
+    ] {
+        push_attribute(
+            &mut attributes,
+            name,
+            nested_string_value(node, key).as_deref(),
+        );
+    }
+    if let Some(location) = source_location_label(node) {
+        push_attribute(&mut attributes, "source-location", Some(&location));
+    }
+    attributes
+}
+
+fn push_attribute(attributes: &mut Vec<Value>, name: &str, value: Option<&str>) {
+    let Some(value) = value.map(str::trim).filter(|value| !value.is_empty()) else {
+        return;
+    };
+    attributes.push(Value::String(name.to_owned()));
+    attributes.push(Value::String(value.to_owned()));
+}
+
+fn source_location_label(node: &Value) -> Option<String> {
+    let location = node.get("sourceLocation").and_then(Value::as_object)?;
+    let file = location.get("file").and_then(Value::as_str)?;
+    let line = location.get("line").and_then(Value::as_i64);
+    let column = location.get("column").and_then(Value::as_i64);
+    Some(match (line, column) {
+        (Some(line), Some(column)) => format!("{file}:{line}:{column}"),
+        (Some(line), None) => format!("{file}:{line}"),
+        _ => file.to_owned(),
+    })
+}
+
+fn rect_from_node(node: &Value) -> Option<Rect> {
+    ["frameInScreen", "frame", "bounds"]
+        .into_iter()
+        .filter_map(|key| node.get(key).and_then(rect_from_value))
+        .next()
+}
+
+fn rect_from_value(value: &Value) -> Option<Rect> {
+    let object = value.as_object()?;
+    let x = object.get("x").and_then(Value::as_f64)?;
+    let y = object.get("y").and_then(Value::as_f64)?;
+    let width = object.get("width").and_then(Value::as_f64)?;
+    let height = object.get("height").and_then(Value::as_f64)?;
+    Some(Rect {
+        x,
+        y,
+        width,
+        height,
+    })
+}
+
+fn rect_quad(rect: Rect) -> Vec<Value> {
+    [
+        rect.x,
+        rect.y,
+        rect.x + rect.width,
+        rect.y,
+        rect.x + rect.width,
+        rect.y + rect.height,
+        rect.x,
+        rect.y + rect.height,
+    ]
+    .into_iter()
+    .map(|value| json!(value))
+    .collect()
+}
+
+fn string_value(object: &Value, key: &str) -> Option<String> {
+    object
+        .get(key)
+        .and_then(Value::as_str)
+        .map(str::trim)
+        .filter(|value| !value.is_empty())
+        .map(ToOwned::to_owned)
+}
+
+fn nested_string_value(object: &Value, key_path: &str) -> Option<String> {
+    let mut current = object;
+    for key in key_path.split('.') {
+        current = current.get(key)?;
+    }
+    current
+        .as_str()
+        .map(ToOwned::to_owned)
+        .or_else(|| current.as_i64().map(|value| value.to_string()))
+        .or_else(|| current.as_u64().map(|value| value.to_string()))
+        .or_else(|| current.as_bool().map(|value| value.to_string()))
+}
+
+fn source_label(source: &str) -> &'static str {
+    match source {
+        "react-native" => "React Native",
+        SOURCE_REACT_NATIVE_METRO => "React Native Metro",
+        SOURCE_CHROME_INSPECTOR => "Chrome Inspector",
+        "nativescript" => "NativeScript",
+        "swiftui" => "SwiftUI",
+        "in-app-inspector" => "UIKit",
+        _ => "App",
+    }
+}
+
+fn websocket_url(http_origin: &str, path: &str) -> String {
+    if http_origin.starts_with("https://") {
+        format!(
+            "wss://{}{}",
+            http_origin.trim_start_matches("https://"),
+            path
+        )
+    } else if http_origin.starts_with("http://") {
+        format!("ws://{}{}", http_origin.trim_start_matches("http://"), path)
+    } else {
+        path.to_owned()
+    }
+}
+
+#[allow(dead_code)]
+fn timestamp_ms() -> f64 {
+    SystemTime::now()
+        .duration_since(UNIX_EPOCH)
+        .unwrap_or(Duration::ZERO)
+        .as_secs_f64()
+        * 1000.0
+}
diff --git a/server/src/main.rs b/server/src/main.rs
index 136c9347..291c0e96 100644
--- a/server/src/main.rs
+++ b/server/src/main.rs
@@ -2,6 +2,7 @@ mod api;
 mod auth;
 mod config;
 mod core_simulator;
+mod devtools;
 mod error;
 mod inspector;
 mod logging;
@@ -12,6 +13,7 @@ mod service;
 mod simulators;
 mod static_files;
 mod transport;
+mod webkit;
 
 use anyhow::Context;
 use api::routes::{router, AppState};
diff --git a/server/src/static_files/mod.rs b/server/src/static_files/mod.rs
index 55cbc954..15706361 100644
--- a/server/src/static_files/mod.rs
+++ b/server/src/static_files/mod.rs
@@ -8,12 +8,39 @@ pub async fn serve_static(
     method: Method,
     uri: Uri,
     access_token: Option<String>,
+) -> Result<Response<Body>, StatusCode> {
+    serve_static_inner(root, None, true, method, uri, access_token).await
+}
+
+pub async fn serve_static_under(
+    root: PathBuf,
+    mount_prefix: &str,
+    method: Method,
+    uri: Uri,
+    access_token: Option<String>,
+) -> Result<Response<Body>, StatusCode> {
+    serve_static_inner(root, Some(mount_prefix), false, method, uri, access_token).await
+}
+
+async fn serve_static_inner(
+    root: PathBuf,
+    mount_prefix: Option<&str>,
+    fallback_to_index: bool,
+    method: Method,
+    uri: Uri,
+    access_token: Option<String>,
 ) -> Result<Response<Body>, StatusCode> {
     if method != Method::GET && method != Method::HEAD {
         return Err(StatusCode::METHOD_NOT_ALLOWED);
     }
 
-    let path = uri.path();
+    let mut path = uri.path();
+    if let Some(prefix) = mount_prefix {
+        path = path
+            .strip_prefix(prefix)
+            .ok_or(StatusCode::NOT_FOUND)?
+            .trim_start_matches('/');
+    }
     let Some(relative_path) = safe_relative_path(path) else {
         return Err(StatusCode::BAD_REQUEST);
     };
@@ -21,7 +48,8 @@ pub async fn serve_static(
     let requested_path = root.join(&relative_path);
     let file_path = match tokio::fs::metadata(&requested_path).await {
         Ok(metadata) if metadata.is_file() => requested_path,
-        _ => root.join("index.html"),
+        _ if fallback_to_index => root.join("index.html"),
+        _ => return Err(StatusCode::NOT_FOUND),
     };
 
     let bytes = tokio::fs::read(&file_path)
@@ -87,6 +115,7 @@ fn content_type_for_path(path: &Path) -> &'static str {
         Some("css") => "text/css; charset=utf-8",
         Some("html") => "text/html; charset=utf-8",
         Some("ico") => "image/x-icon",
+        Some("avif") => "image/avif",
         Some("js") | Some("mjs") => "text/javascript; charset=utf-8",
         Some("json") => "application/json; charset=utf-8",
         Some("map") => "application/json; charset=utf-8",
diff --git a/server/src/webkit.rs b/server/src/webkit.rs
new file mode 100644
index 00000000..9964b2b4
--- /dev/null
+++ b/server/src/webkit.rs
@@ -0,0 +1,1271 @@
+use crate::error::AppError;
+use axum::extract::ws::{Message, WebSocket};
+use futures::{SinkExt, StreamExt};
+use plist::{Dictionary, Value};
+use serde::Serialize;
+use std::collections::{BTreeMap, HashMap, HashSet};
+use std::io::Cursor;
+use std::path::{Path, PathBuf};
+use std::sync::atomic::{AtomicU64, Ordering};
+use std::sync::{Mutex, OnceLock};
+use std::time::{Duration, SystemTime, UNIX_EPOCH};
+use tokio::io::{AsyncRead, AsyncReadExt, AsyncWrite, AsyncWriteExt};
+use tokio::net::UnixStream;
+use tokio::process::Command;
+use tokio::time::{sleep, timeout, Instant};
+use tracing::{debug, warn};
+
+const WEBINSPECTORD_SOCKET_NAME: &str = "com.apple.webinspectord_sim.socket";
+const WEBKIT_PACKET_MAX_LEN: usize = 64 * 1024 * 1024;
+const WEBKIT_DISCOVERY_TIMEOUT: Duration = Duration::from_millis(5000);
+const WEBKIT_DISCOVERY_ATTEMPT_TIMEOUT: Duration = Duration::from_millis(1600);
+const WEBKIT_DISCOVERY_REFRESH_INTERVAL: Duration = Duration::from_millis(400);
+const WEBKIT_DISCOVERY_CACHE_TTL: Duration = Duration::from_secs(30);
+const WEBKIT_SOCKET_ACTIVATION_DELAY: Duration = Duration::from_millis(200);
+const WEBKIT_IO_TIMEOUT: Duration = Duration::from_secs(4);
+
+static WEBKIT_ID_COUNTER: AtomicU64 = AtomicU64::new(1);
+static WEBKIT_DISCOVERY_CACHE: OnceLock<Mutex<HashMap<String, CachedWebKitDiscovery>>> =
+    OnceLock::new();
+
+#[derive(Clone, Debug, Serialize)]
+#[serde(rename_all = "camelCase")]
+pub struct WebKitTarget {
+    pub id: String,
+    pub app_id: String,
+    pub app_name: Option<String>,
+    pub page_id: u64,
+    pub title: Option<String>,
+    pub url: Option<String>,
+    pub kind: String,
+    pub inspector_url: String,
+    pub web_socket_url: String,
+}
+
+#[derive(Clone, Debug, Serialize)]
+#[serde(rename_all = "camelCase")]
+pub struct WebKitTargetDiscovery {
+    pub udid: String,
+    pub socket_path: Option<String>,
+    pub targets: Vec<WebKitTarget>,
+    pub warnings: Vec<String>,
+}
+
+#[derive(Clone, Debug)]
+struct WebKitApplication {
+    id: String,
+    name: Option<String>,
+    is_proxy: bool,
+}
+
+#[derive(Clone, Debug)]
+struct WebKitPage {
+    app_id: String,
+    page_id: u64,
+    title: Option<String>,
+    url: Option<String>,
+}
+
+#[derive(Clone, Debug)]
+struct WebKitSocket {
+    path: String,
+}
+
+#[derive(Default)]
+struct LsofProcess {
+    belongs_to_udid: bool,
+    sockets: Vec<String>,
+}
+
+#[derive(Clone)]
+struct CachedWebKitDiscovery {
+    discovery: WebKitTargetDiscovery,
+    cached_at: SystemTime,
+}
+
+pub async fn discover_targets(
+    udid: &str,
+    http_origin: Option<&str>,
+) -> Result<WebKitTargetDiscovery, AppError> {
+    let socket = match discover_webinspector_socket(udid).await? {
+        Some(socket) => socket,
+        None => {
+            return Ok(WebKitTargetDiscovery {
+                udid: udid.to_owned(),
+                socket_path: None,
+                targets: Vec::new(),
+                warnings: vec![format!(
+                    "No WebKit Remote Inspector socket was found for simulator {udid}. Boot the simulator and open an inspectable Safari page or WKWebView."
+                )],
+            });
+        }
+    };
+
+    let deadline = Instant::now() + WEBKIT_DISCOVERY_TIMEOUT;
+    let mut attempts = 0usize;
+    let mut last_discovery: Option<WebKitTargetDiscovery> = None;
+    let mut accumulated_warnings = Vec::new();
+    loop {
+        attempts += 1;
+        match discover_targets_once(udid, http_origin, &socket).await {
+            Ok(discovery) if !discovery.targets.is_empty() => {
+                cache_webkit_discovery(&discovery);
+                return Ok(discovery);
+            }
+            Ok(discovery) => {
+                for warning in &discovery.warnings {
+                    push_unique_warning(&mut accumulated_warnings, warning);
+                }
+                last_discovery = Some(discovery);
+            }
+            Err(error) => {
+                push_unique_warning(&mut accumulated_warnings, error.to_string());
+            }
+        }
+
+        if Instant::now() >= deadline {
+            break;
+        }
+        sleep(Duration::from_millis(250)).await;
+    }
+
+    let mut discovery = last_discovery.unwrap_or_else(|| WebKitTargetDiscovery {
+        udid: udid.to_owned(),
+        socket_path: Some(socket.path.clone()),
+        targets: Vec::new(),
+        warnings: Vec::new(),
+    });
+    discovery.warnings = accumulated_warnings;
+    if attempts > 1 {
+        push_unique_warning(
+            &mut discovery.warnings,
+            format!("Retried WebKit target discovery {attempts} times while simulator webinspectord was settling."),
+        );
+    }
+
+    if let Some(cached) = cached_webkit_discovery(
+        udid,
+        discovery.socket_path.clone(),
+        discovery.warnings.clone(),
+    ) {
+        return Ok(cached);
+    }
+
+    Ok(discovery)
+}
+
+async fn discover_targets_once(
+    udid: &str,
+    http_origin: Option<&str>,
+    socket: &WebKitSocket,
+) -> Result<WebKitTargetDiscovery, AppError> {
+    let mut stream = timeout(WEBKIT_IO_TIMEOUT, UnixStream::connect(&socket.path))
+        .await
+        .map_err(|_| AppError::native("Timed out connecting to simulator webinspectord."))?
+        .map_err(|error| {
+            AppError::native(format!(
+                "Unable to connect to simulator webinspectord at {}: {error}",
+                socket.path
+            ))
+        })?;
+
+    let connection_id = new_remote_inspector_id();
+    send_rpc(
+        &mut stream,
+        "_rpc_reportIdentifier:",
+        rpc_args(&connection_id),
+    )
+    .await?;
+    sleep(WEBKIT_SOCKET_ACTIVATION_DELAY).await;
+    send_rpc(
+        &mut stream,
+        "_rpc_getConnectedApplications:",
+        rpc_args(&connection_id),
+    )
+    .await?;
+
+    let deadline = Instant::now() + WEBKIT_DISCOVERY_ATTEMPT_TIMEOUT;
+    let mut next_listing_refresh = Instant::now() + WEBKIT_DISCOVERY_REFRESH_INTERVAL;
+    let mut applications: BTreeMap<String, WebKitApplication> = BTreeMap::new();
+    let mut requested_listings: HashSet<String> = HashSet::new();
+    let mut pages: BTreeMap<(String, u64), WebKitPage> = BTreeMap::new();
+    let mut warnings = Vec::new();
+
+    while let Some(remaining) = deadline.checked_duration_since(Instant::now()) {
+        let read_timeout = remaining.min(Duration::from_millis(250));
+        let packet = match timeout(read_timeout, read_packet(&mut stream)).await {
+            Ok(Ok(packet)) => packet,
+            Ok(Err(error)) => {
+                warnings.push(error.to_string());
+                break;
+            }
+            Err(_) if !pages.is_empty() => break,
+            Err(_) if Instant::now() < deadline => {
+                if Instant::now() >= next_listing_refresh {
+                    send_rpc(
+                        &mut stream,
+                        "_rpc_getConnectedApplications:",
+                        rpc_args(&connection_id),
+                    )
+                    .await?;
+                    for app_id in applications.keys() {
+                        send_forward_get_listing(&mut stream, &connection_id, app_id).await?;
+                    }
+                    next_listing_refresh = Instant::now() + WEBKIT_DISCOVERY_REFRESH_INTERVAL;
+                }
+                continue;
+            }
+            Err(_) => break,
+        };
+
+        let message = match parse_rpc_message(&packet) {
+            Ok(message) => message,
+            Err(error) => {
+                warnings.push(error.to_string());
+                continue;
+            }
+        };
+
+        match message.selector.as_str() {
+            "_rpc_reportConnectedApplicationList:" => {
+                for app in parse_application_list(&message.args) {
+                    if requested_listings.insert(app.id.clone()) {
+                        send_forward_get_listing(&mut stream, &connection_id, &app.id).await?;
+                    }
+                    applications.insert(app.id.clone(), app);
+                }
+            }
+            "_rpc_applicationConnected:" => {
+                if let Some(app) = parse_application(&message.args) {
+                    if requested_listings.insert(app.id.clone()) {
+                        send_forward_get_listing(&mut stream, &connection_id, &app.id).await?;
+                    }
+                    applications.insert(app.id.clone(), app);
+                }
+            }
+            "_rpc_applicationUpdated:" => {
+                if let Some(app_id) = string_value(&message.args, "WIRApplicationIdentifierKey") {
+                    if requested_listings.insert(app_id.clone()) {
+                        send_forward_get_listing(&mut stream, &connection_id, &app_id).await?;
+                    }
+                    applications
+                        .entry(app_id.clone())
+                        .or_insert(WebKitApplication {
+                            id: app_id,
+                            name: string_value(&message.args, "WIRApplicationNameKey"),
+                            is_proxy: bool_value(&message.args, "WIRIsApplicationProxyKey")
+                                .unwrap_or(false),
+                        });
+                }
+            }
+            "_rpc_applicationSentListing:" => {
+                for page in parse_page_listing(&message.args) {
+                    pages.insert((page.app_id.clone(), page.page_id), page);
+                }
+            }
+            "_rpc_applicationDisconnected:" => {
+                if let Some(app) = parse_application(&message.args) {
+                    applications.remove(&app.id);
+                    pages.retain(|(app_id, _), _| app_id != &app.id);
+                }
+            }
+            "_rpc_reportSetup:"
+            | "_rpc_reportConnectedDriverList:"
+            | "_rpc_reportCurrentState:" => {}
+            selector => debug!("Ignoring WebKit inspector discovery selector {selector}."),
+        }
+    }
+
+    let origin = http_origin.unwrap_or("");
+    let mut targets = pages
+        .into_values()
+        .map(|page| {
+            let app = applications.get(&page.app_id);
+            webkit_target(udid, origin, page, app)
+        })
+        .collect::<Vec<_>>();
+    targets.sort_by(|lhs, rhs| {
+        lhs.app_name
+            .cmp(&rhs.app_name)
+            .then(lhs.title.cmp(&rhs.title))
+            .then(lhs.url.cmp(&rhs.url))
+            .then(lhs.page_id.cmp(&rhs.page_id))
+    });
+
+    let discovery = WebKitTargetDiscovery {
+        udid: udid.to_owned(),
+        socket_path: Some(socket.path.clone()),
+        targets,
+        warnings,
+    };
+
+    Ok(discovery)
+}
+
+fn cache_webkit_discovery(discovery: &WebKitTargetDiscovery) {
+    if discovery.targets.is_empty() {
+        return;
+    }
+    let cache = WEBKIT_DISCOVERY_CACHE.get_or_init(|| Mutex::new(HashMap::new()));
+    let Ok(mut cache) = cache.lock() else {
+        return;
+    };
+    cache.insert(
+        discovery.udid.clone(),
+        CachedWebKitDiscovery {
+            discovery: discovery.clone(),
+            cached_at: SystemTime::now(),
+        },
+    );
+}
+
+fn cached_webkit_discovery(
+    udid: &str,
+    socket_path: Option<String>,
+    warnings: Vec<String>,
+) -> Option<WebKitTargetDiscovery> {
+    let cache = WEBKIT_DISCOVERY_CACHE.get()?;
+    let Ok(cache) = cache.lock() else {
+        return None;
+    };
+    let cached = cache.get(udid)?;
+    if cached.discovery.targets.is_empty()
+        || cached.cached_at.elapsed().ok()? > WEBKIT_DISCOVERY_CACHE_TTL
+    {
+        return None;
+    }
+
+    let mut discovery = cached.discovery.clone();
+    if socket_path.is_some() {
+        discovery.socket_path = socket_path;
+    }
+    discovery.warnings = warnings;
+    push_unique_warning(
+        &mut discovery.warnings,
+        "WebKit target discovery returned an empty listing; showing the last known targets while simulator webinspectord settles.",
+    );
+    for warning in &cached.discovery.warnings {
+        push_unique_warning(&mut discovery.warnings, warning);
+    }
+    Some(discovery)
+}
+
+fn push_unique_warning(warnings: &mut Vec<String>, warning: impl AsRef<str>) {
+    let warning = warning.as_ref();
+    if warnings.iter().any(|existing| existing == warning) {
+        return;
+    }
+    warnings.push(warning.to_owned());
+}
+
+pub async fn attach_websocket(udid: String, target_id: String, socket: WebSocket) {
+    if let Err(error) = attach_websocket_inner(&udid, &target_id, socket).await {
+        warn!("WebKit inspector socket failed for {udid}/{target_id}: {error}");
+    }
+}
+
+async fn attach_websocket_inner(
+    udid: &str,
+    target_id: &str,
+    socket: WebSocket,
+) -> Result<(), AppError> {
+    let (app_id, page_id) = decode_target_id(target_id)?;
+    let webkit_socket = discover_webinspector_socket(udid).await?.ok_or_else(|| {
+        AppError::not_found(format!(
+            "No WebKit Remote Inspector socket was found for simulator {udid}."
+        ))
+    })?;
+    let stream = timeout(WEBKIT_IO_TIMEOUT, UnixStream::connect(&webkit_socket.path))
+        .await
+        .map_err(|_| AppError::native("Timed out connecting to simulator webinspectord."))?
+        .map_err(|error| {
+            AppError::native(format!(
+                "Unable to connect to simulator webinspectord at {}: {error}",
+                webkit_socket.path
+            ))
+        })?;
+
+    let connection_id = new_remote_inspector_id();
+    let sender_id = new_remote_inspector_id();
+    let (mut inspector_reader, mut inspector_writer) = stream.into_split();
+    send_rpc(
+        &mut inspector_writer,
+        "_rpc_reportIdentifier:",
+        rpc_args(&connection_id),
+    )
+    .await?;
+    sleep(WEBKIT_SOCKET_ACTIVATION_DELAY).await;
+    send_forward_socket_setup(
+        &mut inspector_writer,
+        &connection_id,
+        &app_id,
+        page_id,
+        &sender_id,
+    )
+    .await?;
+
+    let (mut client_writer, mut client_reader) = socket.split();
+    let mut closed_cleanly = false;
+    loop {
+        tokio::select! {
+            client_message = client_reader.next() => {
+                match client_message {
+                    Some(Ok(Message::Text(text))) => {
+                        send_forward_socket_data(
+                            &mut inspector_writer,
+                            &connection_id,
+                            &app_id,
+                            page_id,
+                            &sender_id,
+                            text.as_bytes(),
+                        ).await?;
+                    }
+                    Some(Ok(Message::Binary(bytes))) => {
+                        send_forward_socket_data(
+                            &mut inspector_writer,
+                            &connection_id,
+                            &app_id,
+                            page_id,
+                            &sender_id,
+                            bytes.as_ref(),
+                        ).await?;
+                    }
+                    Some(Ok(Message::Close(_))) | None => {
+                        closed_cleanly = true;
+                        break;
+                    }
+                    Some(Ok(Message::Ping(_))) | Some(Ok(Message::Pong(_))) => {}
+                    Some(Err(error)) => return Err(AppError::internal(format!("WebSocket client error: {error}"))),
+                }
+            }
+            inspector_packet = read_packet(&mut inspector_reader) => {
+                let packet = inspector_packet?;
+                let message = parse_rpc_message(&packet)?;
+                match message.selector.as_str() {
+                    "_rpc_applicationSentData:" => {
+                        if string_value(&message.args, "WIRDestinationKey").as_deref() == Some(sender_id.as_str()) {
+                            if let Some(data) = data_value(&message.args, "WIRMessageDataKey") {
+                                let text = String::from_utf8(data).unwrap_or_default();
+                                client_writer
+                                    .send(Message::Text(text.into()))
+                                    .await
+                                    .map_err(|error| AppError::internal(format!("WebSocket send failed: {error}")))?;
+                            }
+                        }
+                    }
+                    "_rpc_applicationDisconnected:" => break,
+                    selector => debug!("Ignoring WebKit inspector attach selector {selector}."),
+                }
+            }
+        }
+    }
+
+    let _ = send_forward_did_close(
+        &mut inspector_writer,
+        &connection_id,
+        &app_id,
+        page_id,
+        &sender_id,
+    )
+    .await;
+
+    if !closed_cleanly {
+        let _ = client_writer.send(Message::Close(None)).await;
+    }
+    Ok(())
+}
+
+async fn discover_webinspector_socket(udid: &str) -> Result<Option<WebKitSocket>, AppError> {
+    let output = timeout(
+        Duration::from_secs(2),
+        Command::new("/usr/sbin/lsof")
+            .args(["-nP", "-c", "webinspectord", "-F", "pn"])
+            .output(),
+    )
+    .await
+    .map_err(|_| AppError::native("Timed out listing webinspectord sockets."))?
+    .map_err(|error| AppError::native(format!("Unable to run lsof: {error}")))?;
+
+    if !output.status.success() {
+        let stderr = String::from_utf8_lossy(&output.stderr);
+        return Err(AppError::native(format!(
+            "Unable to list webinspectord sockets: {}",
+            stderr.trim()
+        )));
+    }
+
+    let stdout = String::from_utf8_lossy(&output.stdout);
+    let mut processes: HashMap<String, LsofProcess> = HashMap::new();
+    let udid_marker = format!("/Devices/{udid}/");
+    let mut current_pid: Option<String> = None;
+    for line in stdout.lines() {
+        if let Some(pid) = line.strip_prefix('p') {
+            current_pid = Some(pid.to_owned());
+            processes.entry(pid.to_owned()).or_default();
+            continue;
+        }
+        let Some(name) = line.strip_prefix('n') else {
+            continue;
+        };
+        let Some(pid) = current_pid.as_ref() else {
+            continue;
+        };
+        let process = processes.entry(pid.clone()).or_default();
+        if name.contains(&udid_marker) {
+            process.belongs_to_udid = true;
+        }
+        if name.ends_with(WEBINSPECTORD_SOCKET_NAME) {
+            process.sockets.push(name.to_owned());
+        }
+    }
+
+    let mut candidates = processes
+        .into_values()
+        .filter(|process| process.belongs_to_udid)
+        .flat_map(|process| process.sockets)
+        .filter(|path| Path::new(path).exists())
+        .collect::<Vec<_>>();
+    candidates.sort();
+    candidates.dedup();
+
+    if let Some(path) = candidates.into_iter().next() {
+        return Ok(Some(WebKitSocket { path }));
+    }
+
+    discover_launchd_webinspector_socket(udid).await
+}
+
+async fn discover_launchd_webinspector_socket(
+    udid: &str,
+) -> Result<Option<WebKitSocket>, AppError> {
+    let output = match timeout(
+        Duration::from_secs(2),
+        Command::new("xcrun")
+            .args([
+                "simctl",
+                "spawn",
+                udid,
+                "launchctl",
+                "getenv",
+                "RWI_LISTEN_SOCKET",
+            ])
+            .output(),
+    )
+    .await
+    {
+        Ok(Ok(output)) => output,
+        Ok(Err(error)) => {
+            debug!("Unable to query simulator launchd WebKit socket for {udid}: {error}");
+            return Ok(None);
+        }
+        Err(_) => {
+            debug!("Timed out querying simulator launchd WebKit socket for {udid}.");
+            return Ok(None);
+        }
+    };
+
+    if !output.status.success() {
+        debug!(
+            "Simulator launchd did not report WebKit socket for {udid}: {}",
+            String::from_utf8_lossy(&output.stderr).trim()
+        );
+        return Ok(None);
+    }
+
+    let stdout = String::from_utf8_lossy(&output.stdout);
+    let Some(path) = sanitize_webinspectord_socket_path(&stdout) else {
+        return Ok(None);
+    };
+
+    if !Path::new(path).exists() {
+        debug!("Simulator launchd WebKit socket for {udid} does not exist: {path}");
+        return Ok(None);
+    }
+
+    Ok(Some(WebKitSocket {
+        path: path.to_owned(),
+    }))
+}
+
+fn sanitize_webinspectord_socket_path(raw: &str) -> Option<&str> {
+    let path = raw.trim();
+    if path.is_empty() || !path.ends_with(WEBINSPECTORD_SOCKET_NAME) {
+        return None;
+    }
+    Some(path)
+}
+
+async fn send_forward_get_listing<W: AsyncWrite + Unpin>(
+    writer: &mut W,
+    connection_id: &str,
+    app_id: &str,
+) -> Result<(), AppError> {
+    let mut args = rpc_args(connection_id);
+    args.insert(
+        "WIRApplicationIdentifierKey".to_owned(),
+        Value::String(app_id.to_owned()),
+    );
+    send_rpc(writer, "_rpc_forwardGetListing:", args).await
+}
+
+async fn send_forward_socket_setup<W: AsyncWrite + Unpin>(
+    writer: &mut W,
+    connection_id: &str,
+    app_id: &str,
+    page_id: u64,
+    sender_id: &str,
+) -> Result<(), AppError> {
+    let mut args = rpc_args(connection_id);
+    args.insert(
+        "WIRApplicationIdentifierKey".to_owned(),
+        Value::String(app_id.to_owned()),
+    );
+    args.insert("WIRAutomaticallyPause".to_owned(), Value::Boolean(false));
+    args.insert(
+        "WIRPageIdentifierKey".to_owned(),
+        Value::Integer(page_id.into()),
+    );
+    args.insert(
+        "WIRSenderKey".to_owned(),
+        Value::String(sender_id.to_owned()),
+    );
+    send_rpc(writer, "_rpc_forwardSocketSetup:", args).await
+}
+
+async fn send_forward_socket_data<W: AsyncWrite + Unpin>(
+    writer: &mut W,
+    connection_id: &str,
+    app_id: &str,
+    page_id: u64,
+    sender_id: &str,
+    data: &[u8],
+) -> Result<(), AppError> {
+    let mut args = rpc_args(connection_id);
+    args.insert(
+        "WIRApplicationIdentifierKey".to_owned(),
+        Value::String(app_id.to_owned()),
+    );
+    args.insert(
+        "WIRPageIdentifierKey".to_owned(),
+        Value::Integer(page_id.into()),
+    );
+    args.insert(
+        "WIRSenderKey".to_owned(),
+        Value::String(sender_id.to_owned()),
+    );
+    args.insert("WIRSocketDataKey".to_owned(), Value::Data(data.to_vec()));
+    send_rpc(writer, "_rpc_forwardSocketData:", args).await
+}
+
+async fn send_forward_did_close<W: AsyncWrite + Unpin>(
+    writer: &mut W,
+    connection_id: &str,
+    app_id: &str,
+    page_id: u64,
+    sender_id: &str,
+) -> Result<(), AppError> {
+    let mut args = rpc_args(connection_id);
+    args.insert(
+        "WIRApplicationIdentifierKey".to_owned(),
+        Value::String(app_id.to_owned()),
+    );
+    args.insert(
+        "WIRPageIdentifierKey".to_owned(),
+        Value::Integer(page_id.into()),
+    );
+    args.insert(
+        "WIRSenderKey".to_owned(),
+        Value::String(sender_id.to_owned()),
+    );
+    send_rpc(writer, "_rpc_forwardDidClose:", args).await
+}
+
+async fn send_rpc<W: AsyncWrite + Unpin>(
+    writer: &mut W,
+    selector: &str,
+    args: Dictionary,
+) -> Result<(), AppError> {
+    let mut message = Dictionary::new();
+    message.insert("__selector".to_owned(), Value::String(selector.to_owned()));
+    message.insert("__argument".to_owned(), Value::Dictionary(args));
+
+    let mut payload = Vec::new();
+    plist::to_writer_binary(&mut payload, &Value::Dictionary(message))
+        .map_err(|error| AppError::internal(format!("Unable to encode WebKit plist: {error}")))?;
+    if payload.len() > WEBKIT_PACKET_MAX_LEN {
+        return Err(AppError::internal("WebKit plist packet is too large."));
+    }
+
+    let mut packet = Vec::with_capacity(payload.len() + 4);
+    packet.extend_from_slice(&(payload.len() as u32).to_be_bytes());
+    packet.extend_from_slice(&payload);
+    writer
+        .write_all(&packet)
+        .await
+        .map_err(|error| AppError::native(format!("Unable to write WebKit packet: {error}")))?;
+    Ok(())
+}
+
+async fn read_packet<R: AsyncRead + Unpin>(reader: &mut R) -> Result<Vec<u8>, AppError> {
+    let mut header = [0u8; 4];
+    reader.read_exact(&mut header).await.map_err(|error| {
+        AppError::native(format!("Unable to read WebKit packet header: {error}"))
+    })?;
+    let length = u32::from_be_bytes(header) as usize;
+    if length > WEBKIT_PACKET_MAX_LEN {
+        return Err(AppError::bad_request(format!(
+            "WebKit packet length {length} exceeds maximum {WEBKIT_PACKET_MAX_LEN}."
+        )));
+    }
+    let mut payload = vec![0u8; length];
+    reader
+        .read_exact(&mut payload)
+        .await
+        .map_err(|error| AppError::native(format!("Unable to read WebKit packet body: {error}")))?;
+    Ok(payload)
+}
+
+struct RpcMessage {
+    selector: String,
+    args: Dictionary,
+}
+
+fn parse_rpc_message(payload: &[u8]) -> Result<RpcMessage, AppError> {
+    let value = Value::from_reader(Cursor::new(payload))
+        .map_err(|error| AppError::internal(format!("Unable to parse WebKit plist: {error}")))?;
+    let dict = value
+        .as_dictionary()
+        .ok_or_else(|| AppError::internal("WebKit packet was not a dictionary."))?;
+    let selector = dict
+        .get("__selector")
+        .and_then(Value::as_string)
+        .ok_or_else(|| AppError::internal("WebKit packet did not include __selector."))?
+        .to_owned();
+    let args = dict
+        .get("__argument")
+        .and_then(Value::as_dictionary)
+        .cloned()
+        .unwrap_or_default();
+    Ok(RpcMessage { selector, args })
+}
+
+fn parse_application_list(args: &Dictionary) -> Vec<WebKitApplication> {
+    let Some(apps) = args
+        .get("WIRApplicationDictionaryKey")
+        .and_then(Value::as_dictionary)
+    else {
+        return Vec::new();
+    };
+
+    apps.values()
+        .filter_map(Value::as_dictionary)
+        .filter_map(parse_application)
+        .collect()
+}
+
+fn parse_application(args: &Dictionary) -> Option<WebKitApplication> {
+    let id = string_value(args, "WIRApplicationIdentifierKey")?;
+    Some(WebKitApplication {
+        id,
+        name: string_value(args, "WIRApplicationNameKey"),
+        is_proxy: bool_value(args, "WIRIsApplicationProxyKey").unwrap_or(false),
+    })
+}
+
+fn parse_page_listing(args: &Dictionary) -> Vec<WebKitPage> {
+    let Some(app_id) = string_value(args, "WIRApplicationIdentifierKey") else {
+        return Vec::new();
+    };
+    let Some(listing) = args.get("WIRListingKey").and_then(Value::as_dictionary) else {
+        return Vec::new();
+    };
+
+    listing
+        .values()
+        .filter_map(Value::as_dictionary)
+        .filter_map(|page| {
+            let page_id = integer_value(page, "WIRPageIdentifierKey")?;
+            Some(WebKitPage {
+                app_id: app_id.clone(),
+                page_id,
+                title: string_value(page, "WIRTitleKey"),
+                url: string_value(page, "WIRURLKey"),
+            })
+        })
+        .collect()
+}
+
+fn rpc_args(connection_id: &str) -> Dictionary {
+    let mut args = Dictionary::new();
+    args.insert(
+        "WIRConnectionIdentifierKey".to_owned(),
+        Value::String(connection_id.to_owned()),
+    );
+    args
+}
+
+fn webkit_target(
+    udid: &str,
+    http_origin: &str,
+    page: WebKitPage,
+    app: Option<&WebKitApplication>,
+) -> WebKitTarget {
+    let id = encode_target_id(&page.app_id, page.page_id);
+    let web_socket_url = format!("/api/simulators/{udid}/webkit/targets/{id}/socket");
+    let absolute_ws = websocket_url(http_origin, &web_socket_url);
+    let inspector_url = format!(
+        "/webkit-inspector-ui/Main.html?ws={}",
+        absolute_ws
+            .trim_start_matches("ws://")
+            .trim_start_matches("wss://")
+    );
+    let app_name = app.and_then(|app| app.name.clone());
+    let normalized_app_id = page.app_id.to_ascii_lowercase();
+    let normalized_app_name = app_name.as_deref().map(str::to_ascii_lowercase);
+    let kind = if normalized_app_id.contains("mobilesafari")
+        || normalized_app_name.as_deref() == Some("safari")
+    {
+        "safari-page"
+    } else if app.is_some_and(|app| app.is_proxy) {
+        "web-content-proxy"
+    } else {
+        "app-web-content"
+    }
+    .to_owned();
+
+    WebKitTarget {
+        id,
+        app_id: page.app_id,
+        app_name,
+        page_id: page.page_id,
+        title: page.title,
+        url: page.url,
+        kind,
+        inspector_url,
+        web_socket_url,
+    }
+}
+
+fn websocket_url(http_origin: &str, path: &str) -> String {
+    if http_origin.starts_with("https://") {
+        format!(
+            "wss://{}{}",
+            http_origin.trim_start_matches("https://"),
+            path
+        )
+    } else if http_origin.starts_with("http://") {
+        format!("ws://{}{}", http_origin.trim_start_matches("http://"), path)
+    } else {
+        path.to_owned()
+    }
+}
+
+fn encode_target_id(app_id: &str, page_id: u64) -> String {
+    format!("{}-{page_id}", hex::encode(app_id.as_bytes()))
+}
+
+fn decode_target_id(target_id: &str) -> Result<(String, u64), AppError> {
+    let Some((encoded_app_id, page_id)) = target_id.rsplit_once('-') else {
+        return Err(AppError::bad_request("Invalid WebKit target id."));
+    };
+    let app_id_bytes = hex::decode(encoded_app_id)
+        .map_err(|_| AppError::bad_request("Invalid WebKit target app id."))?;
+    let app_id = String::from_utf8(app_id_bytes)
+        .map_err(|_| AppError::bad_request("Invalid WebKit target app id encoding."))?;
+    let page_id = page_id
+        .parse::<u64>()
+        .map_err(|_| AppError::bad_request("Invalid WebKit target page id."))?;
+    Ok((app_id, page_id))
+}
+
+fn new_remote_inspector_id() -> String {
+    let counter = WEBKIT_ID_COUNTER.fetch_add(1, Ordering::Relaxed);
+    let now = SystemTime::now()
+        .duration_since(UNIX_EPOCH)
+        .unwrap_or(Duration::ZERO)
+        .as_nanos();
+    let pid = std::process::id() as u128;
+    let value = now ^ (pid << 48) ^ counter as u128;
+    let hex = format!("{value:032X}");
+    format!(
+        "{}-{}-{}-{}-{}",
+        &hex[0..8],
+        &hex[8..12],
+        &hex[12..16],
+        &hex[16..20],
+        &hex[20..32]
+    )
+}
+
+fn string_value(args: &Dictionary, key: &str) -> Option<String> {
+    args.get(key)
+        .and_then(Value::as_string)
+        .map(str::to_owned)
+        .filter(|value| !value.is_empty())
+}
+
+fn bool_value(args: &Dictionary, key: &str) -> Option<bool> {
+    args.get(key).and_then(Value::as_boolean)
+}
+
+fn integer_value(args: &Dictionary, key: &str) -> Option<u64> {
+    let value = args.get(key)?;
+    value.as_unsigned_integer().or_else(|| {
+        value
+            .as_signed_integer()
+            .and_then(|value| value.try_into().ok())
+    })
+}
+
+fn data_value(args: &Dictionary, key: &str) -> Option<Vec<u8>> {
+    args.get(key)
+        .and_then(Value::as_data)
+        .map(ToOwned::to_owned)
+}
+
+pub fn webkit_inspector_ui_root() -> Option<PathBuf> {
+    [
+        "/System/Cryptexes/OS/System/Library/PrivateFrameworks/WebInspectorUI.framework/Versions/A/Resources",
+        "/System/Library/PrivateFrameworks/WebInspectorUI.framework/Resources",
+    ]
+    .into_iter()
+    .map(PathBuf::from)
+    .find(|path| path.join("Main.html").is_file())
+}
+
+pub fn inject_frontend_host(main_html: &str) -> String {
+    let localized_strings = r#"<script src="en.lproj/localizedStrings.js"></script>"#;
+    let compatibility_style = format!("<style>{}</style>", browser_frontend_compatibility_css());
+    let shim = format!("<script>{}</script>", browser_frontend_host_script());
+    main_html.replacen(
+        "<script src=\"Main.js\"></script>",
+        &format!(
+            "{localized_strings}\n    {compatibility_style}\n    {shim}\n    <script src=\"Main.js\"></script>"
+        ),
+        1,
+    )
+}
+
+fn browser_frontend_compatibility_css() -> &'static str {
+    r#"
+html.simdeck-browser-host,
+html.simdeck-browser-host body {
+    width: 100%;
+    height: 100%;
+    margin: 0;
+    overflow: hidden;
+}
+
+html.simdeck-browser-host {
+    color-scheme: light dark;
+}
+
+html.simdeck-browser-host #main,
+html.simdeck-browser-host #content,
+html.simdeck-browser-host #tab-browser {
+    min-width: 0;
+    min-height: 0;
+}
+
+html.simdeck-browser-host #docked-resizer {
+    display: none !important;
+}
+
+html.simdeck-browser-host body.mac-platform {
+    --selected-foreground-color: white;
+    --selected-background-color: hsl(212, 92%, 54%);
+    --selected-text-background-color: hsl(210, 98%, 93%);
+    --breakpoint-color: hsl(211, 100%, 50%);
+    --breakpoint-color-disabled: hsl(211, 82%, 82%);
+    --glyph-color-active: hsl(212, 92%, 54%);
+    --glyph-color-active-pressed: hsl(218, 85%, 52%);
+}
+
+@media (prefers-color-scheme: dark) {
+    html.simdeck-browser-host body.mac-platform {
+        --selected-foreground-color: hsl(0, 0%, 100%);
+        --selected-background-color: hsl(219, 80%, 43%);
+        --selected-text-background-color: hsl(230, 51%, 36%);
+        --breakpoint-color: hsl(212, 100%, 71%);
+        --breakpoint-color-disabled: hsl(212, 35%, 48%);
+        --glyph-color-active: hsl(212, 100%, 71%);
+        --glyph-color-active-pressed: hsl(212, 92%, 74%);
+    }
+}
+"#
+}
+
+fn browser_frontend_host_script() -> &'static str {
+    r#"
+(function () {
+    document.documentElement.classList.add("simdeck-browser-host");
+
+    function queryValue(name) {
+        return new URLSearchParams(window.location.search).get(name);
+    }
+
+    function websocketUrl() {
+        const raw = queryValue("ws");
+        if (!raw)
+            return null;
+        if (raw.startsWith("ws://") || raw.startsWith("wss://"))
+            return raw;
+        return (window.location.protocol === "https:" ? "wss://" : "ws://") + raw;
+    }
+
+    function dispatchBackendMessage(message) {
+        if (window.InspectorBackend && typeof InspectorBackend.dispatch === "function") {
+            InspectorBackend.dispatch(message);
+            return;
+        }
+        (window.__simdeckInspectorBackendQueue ||= []).push(message);
+    }
+
+    function flushBackendQueue() {
+        const queue = window.__simdeckInspectorBackendQueue || [];
+        window.__simdeckInspectorBackendQueue = [];
+        for (const message of queue)
+            dispatchBackendMessage(message);
+    }
+
+    function copyText(text) {
+        if (navigator.clipboard && navigator.clipboard.writeText) {
+            navigator.clipboard.writeText(text).catch(() => {});
+            return;
+        }
+        const textarea = document.createElement("textarea");
+        textarea.value = text;
+        textarea.style.position = "fixed";
+        textarea.style.opacity = "0";
+        document.body.appendChild(textarea);
+        textarea.select();
+        document.execCommand("copy");
+        textarea.remove();
+    }
+
+    const pendingMessages = [];
+    let reconnectDelay = 500;
+    let reconnectTimer = 0;
+    let socket = null;
+
+    function clearReconnectTimer() {
+        if (!reconnectTimer)
+            return;
+        clearTimeout(reconnectTimer);
+        reconnectTimer = 0;
+    }
+
+    function scheduleReconnect() {
+        if (reconnectTimer || !websocketUrl())
+            return;
+        const delay = reconnectDelay;
+        reconnectDelay = Math.min(Math.ceil(reconnectDelay * 1.5), 3000);
+        reconnectTimer = setTimeout(() => {
+            reconnectTimer = 0;
+            connectSocket();
+        }, delay);
+    }
+
+    function enqueueBackendMessage(message) {
+        if (pendingMessages.length > 500)
+            pendingMessages.shift();
+        pendingMessages.push(message);
+    }
+
+    function connectSocket() {
+        const url = websocketUrl();
+        if (!url)
+            return;
+        if (socket && (socket.readyState === WebSocket.OPEN || socket.readyState === WebSocket.CONNECTING))
+            return;
+        clearReconnectTimer();
+        const nextSocket = new WebSocket(url);
+        socket = nextSocket;
+        nextSocket.addEventListener("message", (event) => dispatchBackendMessage(event.data));
+        nextSocket.addEventListener("open", () => {
+            if (socket !== nextSocket)
+                return;
+            reconnectDelay = 500;
+            while (pendingMessages.length)
+                nextSocket.send(pendingMessages.shift());
+        });
+        nextSocket.addEventListener("close", () => {
+            if (socket !== nextSocket)
+                return;
+            socket = null;
+            scheduleReconnect();
+        });
+        nextSocket.addEventListener("error", (event) => console.error("SimDeck WebKit Inspector socket error", event));
+    }
+
+    window.InspectorFrontendHost = {
+        supportsShowCertificate: false,
+        isRemote: true,
+        inspectionLevel: 1,
+        debuggableInfo: {
+            debuggableType: "web-page",
+            targetPlatformName: "iOS",
+            targetBuildVersion: undefined,
+            targetProductVersion: undefined,
+            targetIsSimulator: true,
+        },
+        get platform() {
+            const match = navigator.platform.match(/mac|win|linux/i);
+            if (!match)
+                return "unknown";
+            return match[0].toLowerCase() === "win" ? "windows" : match[0].toLowerCase();
+        },
+        platformVersionName: "",
+        supportsDiagnosticLogging: false,
+        supportsWebExtensions: false,
+        localizedStringsURL: "en.lproj/localizedStrings.js",
+        connect() {
+            connectSocket();
+        },
+        loaded() {
+            if (window.WI && typeof WI.updateVisibilityState === "function")
+                WI.updateVisibilityState(true);
+            flushBackendQueue();
+        },
+        closeWindow() {},
+        reopen() { window.location.reload(); },
+        reset() { window.location.reload(); },
+        bringToFront() {},
+        inspectedURLChanged(title) {
+            if (title)
+                document.title = title;
+        },
+        showCertificate() {},
+        setZoomFactor() {},
+        zoomFactor() { return 1; },
+        setForcedAppearance() {},
+        userInterfaceLayoutDirection() { return "ltr"; },
+        supportsDockSide() { return false; },
+        requestDockSide() {},
+        requestSetDockSide() {},
+        setAttachedWindowHeight() {},
+        setAttachedWindowWidth() {},
+        setSheetRect() {},
+        startWindowDrag() {},
+        moveWindowBy() {},
+        copyText,
+        killText: copyText,
+        openURLExternally(url) { window.open(url, "_blank", "noopener"); },
+        canSave() { return false; },
+        save() {},
+        canLoad() { return false; },
+        load() { throw new Error("Loading local files is not supported in SimDeck WebKit Inspector."); },
+        getPath() { return null; },
+        canPickColorFromScreen() { return false; },
+        pickColorFromScreen() { throw new Error("Picking colors from screen is not supported in SimDeck WebKit Inspector."); },
+        revealFileExternally() {},
+        getCurrentX() { return 0; },
+        getCurrentY() { return 0; },
+        setPath() {},
+        showContextMenu(event, items) {
+            if (window.WI && WI.SoftContextMenu) {
+                new WI.SoftContextMenu(items).show(event);
+            }
+        },
+        dispatchEventAsContextMenuEvent(event) {
+            event.target?.dispatchEvent(new MouseEvent("contextmenu", event));
+        },
+        sendMessageToBackend(message) {
+            if (socket && socket.readyState === WebSocket.OPEN) {
+                socket.send(message);
+            } else {
+                enqueueBackendMessage(message);
+                connectSocket();
+            }
+        },
+        unbufferedLog(message) { console.log(message); },
+        isUnderTest() { return false; },
+        beep() {},
+        inspectInspector() {},
+        isBeingInspected() { return false; },
+        setAllowsInspectingInspector() {},
+        logDiagnosticEvent() {},
+        didShowExtensionTab() {},
+        didHideExtensionTab() {},
+        didNavigateExtensionTab() {},
+        inspectedPageDidNavigate() {},
+        evaluateScriptInExtensionTab() {},
+        engineeringSettingsAllowed() { return false; },
+    };
+
+    function getOrInsert(key, value) {
+        const existing = this.get(key);
+        if (existing !== undefined)
+            return existing;
+        this.set(key, value);
+        return value;
+    }
+
+    function getOrInsertComputed(key, callback) {
+        const existing = this.get(key);
+        if (existing !== undefined)
+            return existing;
+        const value = callback();
+        this.set(key, value);
+        return value;
+    }
+
+    Map.prototype.getOrInsert ||= getOrInsert;
+    WeakMap.prototype.getOrInsert ||= getOrInsert;
+    Map.prototype.getOrInsertComputed ||= getOrInsertComputed;
+    WeakMap.prototype.getOrInsertComputed ||= getOrInsertComputed;
+})();
+"#
+}
+
+#[cfg(test)]
+mod tests {
+    use super::*;
+
+    #[test]
+    fn target_id_round_trips_app_and_page() {
+        let id = encode_target_id("PID:71571", 42);
+        assert_eq!(decode_target_id(&id).unwrap(), ("PID:71571".to_owned(), 42));
+    }
+
+    #[test]
+    fn websocket_url_uses_request_scheme() {
+        assert_eq!(
+            websocket_url("http://127.0.0.1:4310", "/api/socket"),
+            "ws://127.0.0.1:4310/api/socket"
+        );
+        assert_eq!(
+            websocket_url("https://example.test", "/api/socket"),
+            "wss://example.test/api/socket"
+        );
+    }
+
+    #[test]
+    fn inject_frontend_host_precedes_main_script() {
+        let html = r#"<script src="CodeMirror.js"></script>
+    <script src="Main.js"></script>"#;
+        let injected = inject_frontend_host(html);
+        let strings_index = injected.find("en.lproj/localizedStrings.js").unwrap();
+        let shim_index = injected.find("window.InspectorFrontendHost").unwrap();
+        let main_index = injected.find(r#"<script src="Main.js"></script>"#).unwrap();
+        assert!(strings_index < shim_index);
+        assert!(shim_index < main_index);
+    }
+
+    #[test]
+    fn sanitize_webinspectord_socket_path_accepts_launchd_env_output() {
+        assert_eq!(
+            sanitize_webinspectord_socket_path(
+                "/private/var/tmp/com.apple.launchd.test/com.apple.webinspectord_sim.socket\n"
+            ),
+            Some("/private/var/tmp/com.apple.launchd.test/com.apple.webinspectord_sim.socket")
+        );
+        assert_eq!(sanitize_webinspectord_socket_path("\n"), None);
+        assert_eq!(
+            sanitize_webinspectord_socket_path(
+                "/private/var/tmp/com.apple.launchd.test/other.socket"
+            ),
+            None
+        );
+    }
+}