From 7ac6f660fe9ea0df4ae2b2610db6073f394e3ff8 Mon Sep 17 00:00:00 2001
From: Rahul Sethi <5822355+RamIdeas@users.noreply.github.com>
Date: Fri, 13 Oct 2023 12:54:25 +0100
Subject: [PATCH] Revert "Revert "startDevWorker - Milestone 1" (#4171)"

This reverts commit 88f15f61cad2a69c07e26203cc84ddb2da42deb3.
---
 fixtures/dev-env/.gitignore                   |   1 +
 fixtures/dev-env/package.json                 |  25 +
 fixtures/dev-env/tests/index.test.ts          | 552 +++++++++++++++
 fixtures/dev-env/tests/tsconfig.json          |  12 +
 .../tests/index.test.ts                       |  11 +-
 packages/wrangler/.eslintrc.js                |   1 +
 packages/wrangler/e2e/tsconfig.json           |   2 +-
 packages/wrangler/package.json                |   2 +-
 packages/wrangler/scripts/bundle.ts           |  63 +-
 .../src/__tests__/api-devregistry.test.ts     |  48 +-
 packages/wrangler/src/__tests__/dev.test.tsx  |   2 +
 packages/wrangler/src/__tests__/jest.setup.ts |  40 +-
 packages/wrangler/src/api/dev.ts              |  18 +-
 packages/wrangler/src/api/index.ts            |   1 +
 .../src/api/startDevWorker/BaseController.ts  |  40 ++
 .../api/startDevWorker/BundlerController.ts   |  44 ++
 .../api/startDevWorker/ConfigController.ts    |  42 ++
 .../wrangler/src/api/startDevWorker/DevEnv.ts | 148 ++++
 .../startDevWorker/LocalRuntimeController.ts  |  41 ++
 .../api/startDevWorker/NotImplementedError.ts |  15 +
 .../src/api/startDevWorker/ProxyController.ts | 527 ++++++++++++++
 .../startDevWorker/RemoteRuntimeController.ts |  41 ++
 .../startDevWorker/bundle-allowed-paths.ts    |  99 +++
 .../src/api/startDevWorker/devtools.ts        |  41 ++
 .../wrangler/src/api/startDevWorker/events.ts | 138 ++++
 .../wrangler/src/api/startDevWorker/index.ts  |  12 +
 .../wrangler/src/api/startDevWorker/types.ts  | 197 ++++++
 .../wrangler/src/api/startDevWorker/utils.ts  |  43 ++
 packages/wrangler/src/cli.ts                  |   4 +-
 packages/wrangler/src/dev.tsx                 |   3 +-
 packages/wrangler/src/dev/dev.tsx             | 119 +++-
 packages/wrangler/src/dev/inspect.ts          | 659 +-----------------
 packages/wrangler/src/dev/local.tsx           |  88 +--
 packages/wrangler/src/dev/miniflare.ts        |  43 +-
 packages/wrangler/src/dev/remote.tsx          |  77 +-
 packages/wrangler/src/dev/start-server.ts     | 114 ++-
 packages/wrangler/src/dev/use-esbuild.ts      |   6 +
 packages/wrangler/src/https-options.ts        |  14 +-
 packages/wrangler/src/worker.d.ts             |   4 +
 .../startDevWorker/InspectorProxyWorker.ts    | 526 ++++++++++++++
 .../templates/startDevWorker/ProxyWorker.ts   | 260 +++++++
 pnpm-lock.yaml                                | 133 +++-
 42 files changed, 3430 insertions(+), 826 deletions(-)
 create mode 100644 fixtures/dev-env/.gitignore
 create mode 100644 fixtures/dev-env/package.json
 create mode 100644 fixtures/dev-env/tests/index.test.ts
 create mode 100644 fixtures/dev-env/tests/tsconfig.json
 create mode 100644 packages/wrangler/src/api/startDevWorker/BaseController.ts
 create mode 100644 packages/wrangler/src/api/startDevWorker/BundlerController.ts
 create mode 100644 packages/wrangler/src/api/startDevWorker/ConfigController.ts
 create mode 100644 packages/wrangler/src/api/startDevWorker/DevEnv.ts
 create mode 100644 packages/wrangler/src/api/startDevWorker/LocalRuntimeController.ts
 create mode 100644 packages/wrangler/src/api/startDevWorker/NotImplementedError.ts
 create mode 100644 packages/wrangler/src/api/startDevWorker/ProxyController.ts
 create mode 100644 packages/wrangler/src/api/startDevWorker/RemoteRuntimeController.ts
 create mode 100644 packages/wrangler/src/api/startDevWorker/bundle-allowed-paths.ts
 create mode 100644 packages/wrangler/src/api/startDevWorker/devtools.ts
 create mode 100644 packages/wrangler/src/api/startDevWorker/events.ts
 create mode 100644 packages/wrangler/src/api/startDevWorker/index.ts
 create mode 100644 packages/wrangler/src/api/startDevWorker/types.ts
 create mode 100644 packages/wrangler/src/api/startDevWorker/utils.ts
 create mode 100644 packages/wrangler/src/worker.d.ts
 create mode 100644 packages/wrangler/templates/startDevWorker/InspectorProxyWorker.ts
 create mode 100644 packages/wrangler/templates/startDevWorker/ProxyWorker.ts

diff --git a/fixtures/dev-env/.gitignore b/fixtures/dev-env/.gitignore
new file mode 100644
index 000000000000..1521c8b7652b
--- /dev/null
+++ b/fixtures/dev-env/.gitignore
@@ -0,0 +1 @@
+dist
diff --git a/fixtures/dev-env/package.json b/fixtures/dev-env/package.json
new file mode 100644
index 000000000000..5502c9d0e0b8
--- /dev/null
+++ b/fixtures/dev-env/package.json
@@ -0,0 +1,25 @@
+{
+	"name": "dev-env",
+	"version": "1.0.1",
+	"private": true,
+	"description": "",
+	"license": "ISC",
+	"author": "",
+	"main": "src/index.js",
+	"scripts": {
+		"test": "npx vitest run",
+		"test:ci": "npx vitest run",
+		"test:watch": "npx vitest",
+		"type:tests": "tsc -p ./tests/tsconfig.json"
+	},
+	"devDependencies": {
+		"@types/ws": "^8.5.7",
+		"@cloudflare/workers-tsconfig": "workspace:^",
+		"get-port": "^7.0.0",
+		"miniflare": "3.20231002.1",
+		"undici": "^5.23.0",
+		"wrangler": "workspace:*",
+		"ws": "^8.14.2"
+	},
+	"dependencies": {}
+}
diff --git a/fixtures/dev-env/tests/index.test.ts b/fixtures/dev-env/tests/index.test.ts
new file mode 100644
index 000000000000..83e7baa04b83
--- /dev/null
+++ b/fixtures/dev-env/tests/index.test.ts
@@ -0,0 +1,552 @@
+import assert from "node:assert";
+import getPort from "get-port";
+import {
+	Miniflare,
+	type Response as MiniflareResponse,
+	type MiniflareOptions,
+	Log,
+} from "miniflare";
+import * as undici from "undici";
+import { WebSocket } from "ws";
+import { beforeEach, afterEach, describe, test, expect, vi } from "vitest";
+import { unstable_DevEnv as DevEnv } from "wrangler";
+import type { ProxyData } from "wrangler/src/api";
+import type { StartDevWorkerOptions } from "wrangler/src/api/startDevWorker/types";
+import type { EsbuildBundle } from "wrangler/src/dev/use-esbuild";
+
+const fakeBundle = {} as EsbuildBundle;
+
+let devEnv: DevEnv;
+let mf: Miniflare | undefined;
+let res: MiniflareResponse | undici.Response | undefined;
+let ws: WebSocket | undefined;
+
+type OptionalKeys<T, K extends keyof T> = Omit<T, K> & Partial<Pick<T, K>>;
+
+beforeEach(() => {
+	devEnv = new DevEnv();
+	mf = undefined;
+	res = undefined;
+	ws = undefined;
+});
+afterEach(async () => {
+	await devEnv?.teardown();
+	await mf?.dispose();
+	await ws?.close();
+
+	vi.resetAllMocks();
+});
+
+async function fakeStartUserWorker(options: {
+	script: string;
+	name?: string;
+	mfOpts?: Partial<MiniflareOptions>;
+	config?: OptionalKeys<StartDevWorkerOptions, "name" | "script">;
+}) {
+	const config: StartDevWorkerOptions = {
+		...options.config,
+		name: options.name ?? "test-worker",
+		script: { contents: options.script },
+	};
+	const mfOpts: MiniflareOptions = Object.assign(
+		{
+			port: 0,
+			inspectorPort: 0,
+			modules: true,
+			compatibilityDate: "2023-08-01",
+			name: config.name,
+			script: options.script,
+			log: Object.assign(new Log(), { error() {} }), // TODO: remove when this bug is fixed https://jira.cfdata.org/browse/DEVX-983
+		},
+		options.mfOpts
+	);
+
+	assert("script" in mfOpts);
+
+	fakeConfigUpdate(config);
+	fakeReloadStart(config);
+
+	const worker = devEnv.startWorker(config);
+	const { proxyWorker, inspectorProxyWorker } = await devEnv.proxy.ready
+		.promise;
+	const proxyWorkerUrl = await proxyWorker.ready;
+	const inspectorProxyWorkerUrl = await inspectorProxyWorker.ready;
+
+	mf = new Miniflare(mfOpts);
+
+	const userWorkerUrl = await mf.ready;
+	const userWorkerInspectorUrl = await mf.getInspectorURL();
+	fakeReloadComplete(config, mfOpts, userWorkerUrl, userWorkerInspectorUrl);
+
+	return {
+		worker,
+		mf,
+		mfOpts,
+		config,
+		userWorkerUrl,
+		userWorkerInspectorUrl,
+		proxyWorkerUrl,
+		inspectorProxyWorkerUrl,
+	};
+}
+
+async function fakeUserWorkerChanges({
+	script,
+	mfOpts,
+	config,
+}: {
+	script?: string;
+	mfOpts: MiniflareOptions;
+	config: StartDevWorkerOptions;
+}) {
+	assert(mf);
+	assert("script" in mfOpts);
+
+	config = {
+		...config,
+		script: {
+			...config.script,
+			...(script ? { contents: script } : undefined),
+		},
+	};
+	mfOpts = {
+		...mfOpts,
+		script: script ?? mfOpts.script,
+	};
+
+	fakeReloadStart(config);
+
+	await mf.setOptions(mfOpts);
+
+	const userWorkerUrl = await mf.ready;
+	const userWorkerInspectorUrl = await mf.getInspectorURL();
+	fakeReloadComplete(
+		config,
+		mfOpts,
+		userWorkerUrl,
+		userWorkerInspectorUrl,
+		1000
+	);
+
+	return { mfOpts, config, mf, userWorkerUrl, userWorkerInspectorUrl };
+}
+
+function fireAndForgetFakeUserWorkerChanges(
+	...args: Parameters<typeof fakeUserWorkerChanges>
+) {
+	// fire and forget the reload -- this let's us test request buffering
+	void fakeUserWorkerChanges(...args);
+}
+
+function fakeConfigUpdate(config: StartDevWorkerOptions) {
+	devEnv.proxy.onConfigUpdate({
+		type: "configUpdate",
+		config,
+	});
+
+	return config; // convenience to allow calling and defining new config inline but also store the new object
+}
+function fakeReloadStart(config: StartDevWorkerOptions) {
+	devEnv.proxy.onReloadStart({
+		type: "reloadStart",
+		config,
+		bundle: fakeBundle,
+	});
+
+	return config;
+}
+function fakeReloadComplete(
+	config: StartDevWorkerOptions,
+	mfOpts: MiniflareOptions,
+	userWorkerUrl: URL,
+	userWorkerInspectorUrl: URL,
+	delay = 100
+) {
+	const proxyData: ProxyData = {
+		userWorkerUrl: {
+			protocol: userWorkerUrl.protocol,
+			hostname: userWorkerUrl.hostname,
+			port: userWorkerUrl.port,
+		},
+		userWorkerInspectorUrl: {
+			protocol: userWorkerInspectorUrl.protocol,
+			hostname: userWorkerInspectorUrl.hostname,
+			port: userWorkerInspectorUrl.port,
+			pathname: `/core:user:${config.name}`,
+		},
+		userWorkerInnerUrlOverrides: {
+			protocol: config?.dev?.urlOverrides?.secure ? "https:" : "http:",
+			hostname: config?.dev?.urlOverrides?.hostname,
+		},
+		headers: {},
+		liveReload: config.dev?.liveReload,
+	};
+
+	setTimeout(() => {
+		devEnv.proxy.onReloadComplete({
+			type: "reloadComplete",
+			config,
+			bundle: fakeBundle,
+			proxyData,
+		});
+	}, delay);
+
+	return { config, mfOpts }; // convenience to allow calling and defining new config/mfOpts inline but also store the new objects
+}
+
+describe("startDevWorker: ProxyController", () => {
+	test("ProxyWorker buffers requests while runtime reloads", async () => {
+		const run = await fakeStartUserWorker({
+			script: `
+				export default {
+					fetch() {
+						return new Response("body:1");
+					}
+				}
+			`,
+		});
+
+		res = await run.worker.fetch("http://dummy");
+		await expect(res.text()).resolves.toBe("body:1");
+
+		fireAndForgetFakeUserWorkerChanges({
+			mfOpts: run.mfOpts,
+			config: run.config,
+			script: run.mfOpts.script.replace("1", "2"),
+		});
+
+		res = await run.worker.fetch("http://dummy");
+		await expect(res.text()).resolves.toBe("body:2");
+	});
+
+	test("InspectorProxyWorker discovery endpoints + devtools websocket connection", async () => {
+		const run = await fakeStartUserWorker({
+			script: `
+				export default {
+					fetch() {
+						console.log('Inside mock user worker');
+
+						return new Response("body:1");
+					}
+				}
+			`,
+		});
+
+		await devEnv.proxy.ready;
+		res = await undici.fetch(`http://${run.inspectorProxyWorkerUrl.host}/json`);
+
+		await expect(res.json()).resolves.toBeInstanceOf(Array);
+
+		ws = new WebSocket(
+			`ws://${run.inspectorProxyWorkerUrl.host}/core:user:${run.config.name}`
+		);
+		const openPromise = new Promise((resolve) => {
+			ws?.addEventListener("open", resolve);
+		});
+		const consoleAPICalledPromise = new Promise((resolve) => {
+			ws?.addEventListener("message", (event) => {
+				assert(typeof event.data === "string");
+				if (event.data.includes("Runtime.consoleAPICalled")) {
+					resolve(JSON.parse(event.data));
+				}
+			});
+		});
+		const executionContextCreatedPromise = new Promise((resolve) => {
+			ws?.addEventListener("message", (event) => {
+				assert(typeof event.data === "string");
+				if (event.data.includes("Runtime.executionContextCreated")) {
+					resolve(JSON.parse(event.data));
+				}
+			});
+		});
+
+		await openPromise;
+		await run.worker.fetch("http://localhost");
+
+		await expect(consoleAPICalledPromise).resolves.toMatchObject({
+			method: "Runtime.consoleAPICalled",
+			params: {
+				args: expect.arrayContaining([
+					{ type: "string", value: "Inside mock user worker" },
+				]),
+			},
+		});
+		await expect(executionContextCreatedPromise).resolves.toMatchObject({
+			method: "Runtime.executionContextCreated",
+			params: {
+				context: { id: expect.any(Number) },
+			},
+		});
+	});
+
+	test("User worker exception", async () => {
+		const consoleErrorSpy = vi.spyOn(console, "error");
+
+		const run = await fakeStartUserWorker({
+			script: `
+					export default {
+						fetch() {
+							throw new Error('Boom!');
+
+							return new Response("body:1");
+						}
+					}
+				`,
+		});
+
+		res = await run.worker.fetch("http://dummy");
+		await expect(res.text()).resolves.toBe("Error: Boom!");
+
+		await new Promise((r) => setTimeout(r, 100)); // allow some time for the error to be logged (TODO: replace with retry/waitUntil helper)
+		expect(consoleErrorSpy).toBeCalledWith(
+			expect.stringContaining("Error: Boom!")
+		);
+
+		// test changes causing a new error cause the new error to propogate
+		fireAndForgetFakeUserWorkerChanges({
+			script: `
+					export default {
+						fetch() {
+							throw new Error('Boom 2!');
+
+							return new Response("body:2");
+						}
+					}
+				`,
+			mfOpts: run.mfOpts,
+			config: run.config,
+		});
+
+		res = await run.worker.fetch("http://dummy");
+		await expect(res.text()).resolves.toBe("Error: Boom 2!");
+
+		await new Promise((r) => setTimeout(r, 100)); // allow some time for the error to be logged (TODO: replace with retry/waitUntil helper)
+		expect(consoleErrorSpy).toBeCalledWith(
+			expect.stringContaining("Error: Boom 2!")
+		);
+
+		// test eyeball requests receive the pretty error page
+		fireAndForgetFakeUserWorkerChanges({
+			script: `
+					export default {
+						fetch() {
+							const e = new Error('Boom 3!');
+
+							// this is how errors are serialised after they are caught by wrangler/miniflare3 middlewares
+							const error = { name: e.name, message: e.message, stack: e.stack };
+							return Response.json(error, {
+								status: 500,
+								headers: { "MF-Experimental-Error-Stack": "true" },
+							});
+						}
+					}
+				`,
+			mfOpts: run.mfOpts,
+			config: run.config,
+		});
+
+		const proxyWorkerUrl = await devEnv.proxy.proxyWorker?.ready;
+		assert(proxyWorkerUrl);
+		res = await undici.fetch(proxyWorkerUrl, {
+			headers: { Accept: "text/html" },
+		});
+		await expect(res.text()).resolves.toEqual(
+			expect.stringContaining(`<h2 class="error-message"> Boom 3! </h2>`) // pretty error page html snippet
+		);
+
+		// test further changes that fix the code
+		fireAndForgetFakeUserWorkerChanges({
+			script: `
+					export default {
+						fetch() {
+							return new Response("body:3");
+						}
+					}
+				`,
+			mfOpts: run.mfOpts,
+			config: run.config,
+		});
+
+		res = await run.worker.fetch("http://dummy");
+		await expect(res.text()).resolves.toBe("body:3");
+
+		consoleErrorSpy.mockReset();
+		res = await run.worker.fetch("http://dummy");
+		await expect(res.text()).resolves.toBe("body:3");
+
+		await new Promise((r) => setTimeout(r, 100)); // allow some time for the error to be logged (TODO: replace with retry/waitUntil helper)
+		expect(consoleErrorSpy).not.toHaveBeenCalled();
+	});
+
+	test("config.dev.{server,inspector} changes, restart the server instance", async () => {
+		const run = await fakeStartUserWorker({
+			script: `
+				export default {
+					fetch() {
+						return new Response("body:1");
+					}
+				}
+			`,
+			config: {
+				dev: {
+					server: { port: await getPort() },
+					inspector: { port: await getPort() },
+				},
+			},
+		});
+
+		res = await run.worker.fetch("http://dummy");
+		await expect(res.text()).resolves.toBe("body:1");
+
+		const oldPort = run.config.dev?.server?.port;
+		res = await undici.fetch(`http://127.0.0.1:${oldPort}`);
+		await expect(res.text()).resolves.toBe("body:1");
+
+		const config2 = fakeConfigUpdate({
+			...run.config,
+			dev: {
+				server: { port: await getPort() },
+				inspector: { port: await getPort() },
+			},
+		});
+		fakeReloadStart(config2);
+		fakeReloadComplete(
+			config2,
+			run.mfOpts,
+			run.userWorkerUrl,
+			run.userWorkerInspectorUrl
+		);
+
+		const newPort = config2.dev?.server?.port;
+
+		res = await run.worker.fetch("http://dummy");
+		await expect(res.text()).resolves.toBe("body:1");
+
+		res = await undici.fetch(`http://127.0.0.1:${newPort}`);
+		await expect(res.text()).resolves.toBe("body:1");
+
+		await expect(
+			undici.fetch(`http://127.0.0.1:${oldPort}`).then((r) => r.text())
+		).rejects.toMatchInlineSnapshot("[TypeError: fetch failed]");
+	});
+
+	test("liveReload", async () => {
+		let resText: string;
+		const scriptRegex = /<script>([\s\S]*)<\/script>/gm;
+
+		const run = await fakeStartUserWorker({
+			script: `
+				export default {
+					fetch() {
+						return new Response("body:1", {
+							headers: { 'Content-Type': 'text/html' }
+						});
+					}
+				}
+			`,
+			config: {
+				dev: { liveReload: true },
+			},
+		});
+
+		// test liveReload: true inserts live-reload <script> tag when the response Content-Type is html
+		res = await run.worker.fetch("http://dummy");
+		resText = await res.text();
+		expect(resText).toEqual(expect.stringContaining("body:1"));
+		expect(resText).toEqual(expect.stringMatching(scriptRegex));
+		expect(resText.replace(scriptRegex, "").trim()).toEqual("body:1"); // test, without the <script> tag, the response is as authored
+
+		fireAndForgetFakeUserWorkerChanges({
+			mfOpts: run.mfOpts,
+			script: `
+				export default {
+					fetch() {
+						return new Response("body:2");
+					}
+				}
+			`,
+			config: {
+				...run.config,
+				dev: { liveReload: true },
+			},
+		});
+
+		// test liveReload does nothing when the response Content-Type is not html
+		res = await run.worker.fetch("http://dummy");
+		resText = await res.text();
+		expect(resText).toMatchInlineSnapshot('"body:2"');
+		expect(resText).toBe("body:2");
+		expect(resText).not.toEqual(expect.stringMatching(scriptRegex));
+
+		fireAndForgetFakeUserWorkerChanges({
+			mfOpts: run.mfOpts,
+			script: `
+				export default {
+					fetch() {
+						return new Response("body:3", {
+							headers: { 'Content-Type': 'text/html' }
+						});
+					}
+				}
+			`,
+			config: {
+				...run.config,
+				dev: { liveReload: false },
+			},
+		});
+
+		// test liveReload: false does nothing even when the response Content-Type is html
+		res = await run.worker.fetch("http://dummy");
+		resText = await res.text();
+		expect(resText).toMatchInlineSnapshot('"body:3"');
+		expect(resText).toBe("body:3");
+		expect(resText).not.toEqual(expect.stringMatching(scriptRegex));
+	});
+
+	test("urlOverrides take effect in the UserWorker", async () => {
+		const run = await fakeStartUserWorker({
+			script: `
+				export default {
+					fetch(request) {
+						return new Response("URL: " + request.url);
+					}
+				}
+			`,
+			config: {
+				dev: {
+					urlOverrides: {
+						hostname: "www.google.com",
+					},
+				},
+			},
+		});
+
+		res = await run.worker.fetch("http://dummy/test/path/1");
+		await expect(res.text()).resolves.toBe(
+			`URL: http://www.google.com/test/path/1`
+		);
+
+		const config2 = fakeConfigUpdate({
+			...run.config,
+			dev: {
+				...run.config.dev,
+				urlOverrides: {
+					secure: true,
+					hostname: "mybank.co.uk",
+				},
+			},
+		});
+		fakeReloadComplete(
+			config2,
+			run.mfOpts,
+			run.userWorkerUrl,
+			run.userWorkerInspectorUrl,
+			1000
+		);
+
+		res = await run.worker.fetch("http://dummy/test/path/2");
+		await expect(res.text()).resolves.toBe(
+			"URL: https://mybank.co.uk/test/path/2"
+		);
+	});
+});
diff --git a/fixtures/dev-env/tests/tsconfig.json b/fixtures/dev-env/tests/tsconfig.json
new file mode 100644
index 000000000000..c35cdd8fea52
--- /dev/null
+++ b/fixtures/dev-env/tests/tsconfig.json
@@ -0,0 +1,12 @@
+{
+	"extends": "@cloudflare/workers-tsconfig/tsconfig.json",
+	"compilerOptions": {
+		"types": ["node"],
+		"jsx": "react"
+	},
+	"include": [
+		"**/*.ts",
+		"../../../node-types.d.ts",
+		"../../../packages/wrangler/src/*.d.ts"
+	]
+}
diff --git a/packages/edge-preview-authenticated-proxy/tests/index.test.ts b/packages/edge-preview-authenticated-proxy/tests/index.test.ts
index a3f2590ed58b..f5dc0426f64a 100644
--- a/packages/edge-preview-authenticated-proxy/tests/index.test.ts
+++ b/packages/edge-preview-authenticated-proxy/tests/index.test.ts
@@ -65,7 +65,6 @@ describe("Preview Worker", () => {
 
 		remote = await unstable_dev(path.join(tmpDir, "remote.js"), {
 			experimental: { disableExperimentalWarning: true },
-			port: 6756,
 		});
 	});
 
@@ -83,7 +82,7 @@ describe("Preview Worker", () => {
 	it("should obtain token from exchange_url", async () => {
 		const resp = await worker.fetch(
 			`https://preview.devprod.cloudflare.dev/exchange?exchange_url=${encodeURIComponent(
-				"http://127.0.0.1:6756/exchange"
+				`http://127.0.0.1:${remote.port}/exchange`
 			)}`,
 			{
 				method: "POST",
@@ -108,9 +107,9 @@ describe("Preview Worker", () => {
 			`https://random-data.preview.devprod.cloudflare.dev/.update-preview-token?token=${encodeURIComponent(
 				token
 			)}&prewarm=${encodeURIComponent(
-				"http://127.0.0.1:6756/prewarm"
+				`http://127.0.0.1:${remote.port}/prewarm`
 			)}&remote=${encodeURIComponent(
-				"http://127.0.0.1:6756"
+				`http://127.0.0.1:${remote.port}`
 			)}&suffix=${encodeURIComponent("/hello?world")}`,
 			{
 				method: "GET",
@@ -152,9 +151,9 @@ describe("Preview Worker", () => {
 	it("should be redirected with cookie", async () => {
 		const resp = await worker.fetch(
 			`https://random-data.preview.devprod.cloudflare.dev/.update-preview-token?token=TEST_TOKEN&prewarm=${encodeURIComponent(
-				"http://127.0.0.1:6756/prewarm"
+				`http://127.0.0.1:${remote.port}/prewarm`
 			)}&remote=${encodeURIComponent(
-				"http://127.0.0.1:6756"
+				`http://127.0.0.1:${remote.port}`
 			)}&suffix=${encodeURIComponent("/hello?world")}`,
 			{
 				method: "GET",
diff --git a/packages/wrangler/.eslintrc.js b/packages/wrangler/.eslintrc.js
index c7d6b30416ec..8738c6659f9d 100644
--- a/packages/wrangler/.eslintrc.js
+++ b/packages/wrangler/.eslintrc.js
@@ -10,6 +10,7 @@ module.exports = {
 	],
 	overrides: [
 		{
+			// TODO: add linting for `startDevWorker` workers in `templates/startDevWorker`
 			files: "src/**/*.ts",
 			excludedFiles: "*.test.ts",
 			parserOptions: {
diff --git a/packages/wrangler/e2e/tsconfig.json b/packages/wrangler/e2e/tsconfig.json
index b54836daa450..fbb2e7c543ff 100644
--- a/packages/wrangler/e2e/tsconfig.json
+++ b/packages/wrangler/e2e/tsconfig.json
@@ -3,6 +3,6 @@
 	"compilerOptions": {
 		"types": ["node"]
 	},
-	"include": ["**/*.ts"],
+	"include": ["**/*.ts", "../src/*.d.ts"],
 	"exclude": []
 }
diff --git a/packages/wrangler/package.json b/packages/wrangler/package.json
index 8758637ba71e..dc5c69621e58 100644
--- a/packages/wrangler/package.json
+++ b/packages/wrangler/package.json
@@ -60,7 +60,7 @@
 		"emit-types": "tsc -p tsconfig.emit.json && node -r esbuild-register scripts/emit-types.ts",
 		"prepublishOnly": "SOURCEMAPS=false npm run build",
 		"start": "pnpm run bundle && cross-env NODE_OPTIONS=--enable-source-maps ./bin/wrangler.js",
-		"test": "pnpm run assert-git-version && jest",
+		"test": "pnpm run assert-git-version && jest --runInBand",
 		"test:ci": "pnpm run test --coverage",
 		"test:debug": "pnpm run test --silent=false --verbose=true",
 		"test:e2e": "vitest --test-timeout 240000 --single-thread --dir ./e2e run",
diff --git a/packages/wrangler/scripts/bundle.ts b/packages/wrangler/scripts/bundle.ts
index 62ebc01c98d9..11741c747079 100644
--- a/packages/wrangler/scripts/bundle.ts
+++ b/packages/wrangler/scripts/bundle.ts
@@ -1,14 +1,17 @@
 import fs from "node:fs/promises";
 import path from "node:path";
-import { build, context } from "esbuild";
+import * as esbuild from "esbuild";
 import { EXTERNAL_DEPENDENCIES } from "./deps";
-import type { BuildOptions } from "esbuild";
+import type { BuildOptions, Plugin, BuildContext } from "esbuild";
 
 // the expectation is that this is being run from the project root
 type BuildFlags = {
 	watch?: boolean;
 };
 
+const WATCH = process.argv.includes("--watch");
+const TEMPLATES_DIR = path.join(__dirname, "../templates");
+
 async function buildMain(flags: BuildFlags = {}) {
 	const outdir = path.resolve("./wrangler-dist");
 	const wranglerPackageDir = path.resolve(".");
@@ -52,13 +55,14 @@ async function buildMain(flags: BuildFlags = {}) {
 				? { ALGOLIA_PUBLIC_KEY: `"${process.env.ALGOLIA_PUBLIC_KEY}"` }
 				: {}),
 		},
+		plugins: [embedWorkersPlugin],
 	};
 
 	if (flags.watch) {
-		const ctx = await context(options);
+		const ctx = await esbuild.context(options);
 		await ctx.watch();
 	} else {
-		await build(options);
+		await esbuild.build(options);
 	}
 
 	// Copy `yoga-layout` `.wasm` file
@@ -74,14 +78,63 @@ async function buildMain(flags: BuildFlags = {}) {
 	await fs.copyFile(wasmSrc, wasmDst);
 }
 
+const workersContexts = new Map<string, BuildContext>();
+const embedWorkersPlugin: Plugin = {
+	name: "embed-workers",
+	setup(build) {
+		const namespace = "embed-worker";
+		build.onResolve({ filter: /^worker:/ }, async (args) => {
+			const name = args.path.substring("worker:".length);
+			// Use `build.resolve()` API so Workers can be written as `m?[jt]s` files
+			const result = await build.resolve("./" + name, {
+				kind: "import-statement",
+				resolveDir: TEMPLATES_DIR,
+			});
+			if (result.errors.length > 0) return { errors: result.errors };
+			return { path: result.path, namespace };
+		});
+		build.onLoad({ filter: /.*/, namespace }, async (args) => {
+			const ctx =
+				workersContexts.get(args.path) ??
+				(await esbuild.context({
+					platform: "node", // Marks `node:*` imports as external
+					format: "esm",
+					target: "esnext",
+					bundle: true,
+					sourcemap: true,
+					sourcesContent: false,
+					metafile: true,
+					entryPoints: [args.path],
+					outdir: build.initialOptions.outdir,
+				}));
+			const result = await ctx.rebuild();
+			workersContexts.set(args.path, ctx);
+			const watchFiles = Object.keys(result?.metafile?.inputs ?? {});
+			const scriptPath = Object.keys(result?.metafile?.outputs ?? {}).find(
+				(filepath) => filepath.endsWith(".js")
+			);
+
+			const contents = `
+				import path from "node:path";
+				const scriptPath = path.resolve(__dirname, "..", "${scriptPath}");
+				export default scriptPath;
+            `;
+
+			return { contents, loader: "js", watchFiles };
+		});
+	},
+};
+
 async function run() {
 	// main cli
 	await buildMain();
 
 	// After built once completely, rerun them both in watch mode
-	if (process.argv.includes("--watch")) {
+	if (WATCH) {
 		console.log("Built. Watching for changes...");
 		await buildMain({ watch: true });
+	} else {
+		for (const ctx of workersContexts.values()) await ctx.dispose();
 	}
 }
 
diff --git a/packages/wrangler/src/__tests__/api-devregistry.test.ts b/packages/wrangler/src/__tests__/api-devregistry.test.ts
index dc69c6f75e63..adb1294340a0 100644
--- a/packages/wrangler/src/__tests__/api-devregistry.test.ts
+++ b/packages/wrangler/src/__tests__/api-devregistry.test.ts
@@ -13,6 +13,8 @@ describe("multi-worker testing", () => {
 	let childWorker: any;
 	// eslint-disable-next-line @typescript-eslint/no-explicit-any
 	let parentWorker: any;
+	// eslint-disable-next-line @typescript-eslint/no-explicit-any
+	const workers: any[] = [];
 
 	beforeAll(async () => {
 		childWorker = await unstable_dev(
@@ -24,6 +26,8 @@ describe("multi-worker testing", () => {
 				},
 			}
 		);
+		workers.push(childWorker);
+
 		parentWorker = await unstable_dev(
 			"src/__tests__/helpers/worker-scripts/parent-worker.js",
 			{
@@ -33,11 +37,13 @@ describe("multi-worker testing", () => {
 				},
 			}
 		);
+		workers.push(parentWorker);
 	});
 
 	afterAll(async () => {
-		await childWorker.stop();
-		await parentWorker.stop();
+		for (const worker of workers) {
+			await worker.stop();
+		}
 	});
 
 	it("parentWorker and childWorker should be added devRegistry", async () => {
@@ -81,13 +87,15 @@ describe("multi-worker testing", () => {
 		(["debug", "info", "log", "warn", "error"] as const).forEach((method) =>
 			jest.spyOn(console, method).mockImplementation((...args: unknown[]) => {
 				logs += `\n${args}`;
+				process.stdout.write(`\n${args}`);
 				// Regexp ignores colour codes
-				if (/\[mf:inf].+GET.+\/.+200.+OK/.test(String(args))) requestResolve();
+				if (/\[wrangler.*:inf].+GET.+\/.+200.+OK/.test(String(args)))
+					requestResolve();
 			})
 		);
 
 		async function startWorker() {
-			return await unstable_dev(
+			const worker = await unstable_dev(
 				"src/__tests__/helpers/worker-scripts/hello-world-worker.js",
 				{
 					// We need the wrangler.toml config to specify a Worker name
@@ -100,29 +108,27 @@ describe("multi-worker testing", () => {
 					},
 				}
 			);
+
+			workers.push(worker);
+
+			return worker;
 		}
 
-		// eslint-disable-next-line @typescript-eslint/no-explicit-any
-		let worker: any;
-		try {
-			worker = await startWorker();
+		let worker = await startWorker();
 
-			// Stop the worker and start it again
-			await worker.stop();
-			await new Promise((r) => setTimeout(r, 2000));
+		// Stop the worker and start it again
+		await worker.stop();
+		await new Promise((r) => setTimeout(r, 2000));
 
-			worker = await startWorker();
+		worker = await startWorker();
 
-			const resp = await worker.fetch();
-			expect(resp).not.toBe(undefined);
+		const resp = await worker.fetch();
+		expect(resp).not.toBe(undefined);
 
-			expect(logs).not.toMatch(
-				/Failed to register worker in local service registry/
-			);
+		await requestPromise;
 
-			await requestPromise;
-		} finally {
-			await worker?.stop();
-		}
+		expect(logs).not.toMatch(
+			/Failed to register worker in local service registry/
+		);
 	}, 10000);
 });
diff --git a/packages/wrangler/src/__tests__/dev.test.tsx b/packages/wrangler/src/__tests__/dev.test.tsx
index ffab0fd92546..43abbcfe0a25 100644
--- a/packages/wrangler/src/__tests__/dev.test.tsx
+++ b/packages/wrangler/src/__tests__/dev.test.tsx
@@ -894,6 +894,7 @@ describe("wrangler dev", () => {
 
 	describe("inspector port", () => {
 		it("should use 9229 as the default port", async () => {
+			(getPort as jest.Mock).mockImplementation((options) => options.port);
 			writeWranglerToml({
 				main: "index.js",
 			});
@@ -912,6 +913,7 @@ describe("wrangler dev", () => {
 		});
 
 		it("should read --inspector-port", async () => {
+			(getPort as jest.Mock).mockImplementation((options) => options.port);
 			writeWranglerToml({
 				main: "index.js",
 			});
diff --git a/packages/wrangler/src/__tests__/jest.setup.ts b/packages/wrangler/src/__tests__/jest.setup.ts
index c379a03d4f02..4aeba03aa64f 100644
--- a/packages/wrangler/src/__tests__/jest.setup.ts
+++ b/packages/wrangler/src/__tests__/jest.setup.ts
@@ -24,9 +24,10 @@ process.env.LC_ALL = "en";
 
 // Mock out getPort since we don't actually care about what ports are open in unit tests.
 jest.mock("get-port", () => {
+	const { default: getPort } = jest.requireActual("get-port");
 	return {
 		__esModule: true,
-		default: jest.fn().mockImplementation(async (options) => options.port),
+		default: jest.fn(getPort),
 	};
 });
 
@@ -99,6 +100,12 @@ fetchMock.dontMock();
 beforeAll(() => {
 	msw.listen({
 		onUnhandledRequest: (request) => {
+			const { hostname } = request.url;
+			const localHostnames = ["localhost", "127.0.0.1"]; // TODO: add other local hostnames if you need them
+			if (localHostnames.includes(hostname)) {
+				return request.passthrough();
+			}
+
 			throw new Error(
 				`No mock found for ${request.method} ${request.url.href}
 				`
@@ -226,3 +233,34 @@ afterEach(() => {
 	// It is important that we clear mocks between tests to avoid leakage.
 	jest.clearAllMocks();
 });
+
+// make jest understand virtual `worker:` imports
+jest.mock(
+	"worker:startDevWorker/ProxyWorker",
+	() => {
+		const path = jest.requireActual("path");
+		const { getBasePath } = jest.requireActual("../paths");
+
+		return {
+			__esModule: true,
+			default: path.resolve(getBasePath(), `wrangler-dist/ProxyWorker.js`),
+		};
+	},
+	{ virtual: true }
+);
+jest.mock(
+	"worker:startDevWorker/InspectorProxyWorker",
+	() => {
+		const path = jest.requireActual("path");
+		const { getBasePath } = jest.requireActual("../paths");
+
+		return {
+			__esModule: true,
+			default: path.resolve(
+				getBasePath(),
+				`wrangler-dist/InspectorProxyWorker.js`
+			),
+		};
+	},
+	{ virtual: true }
+);
diff --git a/packages/wrangler/src/api/dev.ts b/packages/wrangler/src/api/dev.ts
index 628aa06ad63f..fc4ca218947e 100644
--- a/packages/wrangler/src/api/dev.ts
+++ b/packages/wrangler/src/api/dev.ts
@@ -7,6 +7,7 @@ import type { Rule } from "../config/environment";
 import type { CfModule } from "../deployment-bundle/worker";
 import type { StartDevOptions } from "../dev";
 import type { EnablePagesAssetsServiceBindingOptions } from "../miniflare-cli/types";
+import type { ProxyData } from "./startDevWorker";
 import type { Json } from "miniflare";
 import type { RequestInit, Response, RequestInfo } from "undici";
 
@@ -74,6 +75,7 @@ export interface UnstableDevOptions {
 export interface UnstableDevWorker {
 	port: number;
 	address: string;
+	proxyData: ProxyData;
 	stop: () => Promise<void>;
 	fetch: (input?: RequestInfo, init?: RequestInit) => Promise<Response>;
 	waitUntilExit: () => Promise<void>;
@@ -127,7 +129,11 @@ export async function unstable_dev(
 		);
 	}
 
-	type ReadyInformation = { address: string; port: number };
+	type ReadyInformation = {
+		address: string;
+		port: number;
+		proxyData: ProxyData;
+	};
 	let readyResolve: (info: ReadyInformation) => void;
 	const readyPromise = new Promise<ReadyInformation>((resolve) => {
 		readyResolve = resolve;
@@ -153,8 +159,8 @@ export async function unstable_dev(
 		forceLocal,
 		liveReload,
 		showInteractiveDevSession,
-		onReady: (address, port) => {
-			readyResolve({ address, port });
+		onReady: (address, port, proxyData) => {
+			readyResolve({ address, port, proxyData });
 		},
 		config: options?.config,
 		env: options?.env,
@@ -201,10 +207,11 @@ export async function unstable_dev(
 		// in testMode, we can run multiple wranglers in parallel, but rebuilds might not work out of the box
 		// once the devServer is ready for requests, we resolve the ready promise
 		const devServer = await startApiDev(devOptions);
-		const { port, address } = await readyPromise;
+		const { port, address, proxyData } = await readyPromise;
 		return {
 			port,
 			address,
+			proxyData,
 			stop: devServer.stop,
 			fetch: async (input?: RequestInfo, init?: RequestInit) => {
 				return await fetch(
@@ -225,10 +232,11 @@ export async function unstable_dev(
 	} else {
 		//outside of test mode, rebuilds work fine, but only one instance of wrangler will work at a time
 		const devServer = await startDev(devOptions);
-		const { port, address } = await readyPromise;
+		const { port, address, proxyData } = await readyPromise;
 		return {
 			port,
 			address,
+			proxyData,
 			stop: devServer.stop,
 			fetch: async (input?: RequestInfo, init?: RequestInit) => {
 				return await fetch(
diff --git a/packages/wrangler/src/api/index.ts b/packages/wrangler/src/api/index.ts
index 2cf99840526a..dac524fe319e 100644
--- a/packages/wrangler/src/api/index.ts
+++ b/packages/wrangler/src/api/index.ts
@@ -9,3 +9,4 @@ export {
 	getMTlsCertificateByName,
 	deleteMTlsCertificate,
 } from "./mtls-certificate";
+export * from "./startDevWorker";
diff --git a/packages/wrangler/src/api/startDevWorker/BaseController.ts b/packages/wrangler/src/api/startDevWorker/BaseController.ts
new file mode 100644
index 000000000000..7bd9b689831c
--- /dev/null
+++ b/packages/wrangler/src/api/startDevWorker/BaseController.ts
@@ -0,0 +1,40 @@
+import { EventEmitter } from "node:events";
+import type {
+	BundleCompleteEvent,
+	BundleStartEvent,
+	ErrorEvent,
+	PreviewTokenExpiredEvent,
+	ReloadCompleteEvent,
+	ReloadStartEvent,
+} from "./events";
+
+export abstract class Controller extends EventEmitter {}
+
+export abstract class RuntimeController extends Controller {
+	// ******************
+	//   Event Handlers
+	// ******************
+
+	abstract onBundleStart(_: BundleStartEvent): void;
+	abstract onBundleComplete(_: BundleCompleteEvent): void;
+	abstract onPreviewTokenExpired(_: PreviewTokenExpiredEvent): void;
+	abstract teardown(): Promise<void>;
+
+	// *********************
+	//   Event Dispatchers
+	// *********************
+
+	abstract emitReloadStartEvent(data: ReloadStartEvent): void;
+	abstract emitReloadCompletetEvent(data: ReloadCompleteEvent): void;
+
+	// *********************
+	//   Event Subscribers
+	// *********************
+
+	on(event: "reloadStart", listener: (_: ReloadStartEvent) => void): this;
+	on(event: "reloadComplete", listener: (_: ReloadCompleteEvent) => void): this;
+	// @ts-expect-error Missing overload implementation (only need the signature types, base implementation is fine)
+	on(event: "error", listener: (_: ErrorEvent) => void): this;
+	// @ts-expect-error Missing initialisation (only need the signature types, base implementation is fine)
+	once: typeof this.on;
+}
diff --git a/packages/wrangler/src/api/startDevWorker/BundlerController.ts b/packages/wrangler/src/api/startDevWorker/BundlerController.ts
new file mode 100644
index 000000000000..d78cc135bce8
--- /dev/null
+++ b/packages/wrangler/src/api/startDevWorker/BundlerController.ts
@@ -0,0 +1,44 @@
+import { Controller } from "./BaseController";
+import { notImplemented } from "./NotImplementedError";
+import type {
+	BundleCompleteEvent,
+	BundleStartEvent,
+	ConfigUpdateEvent,
+	ErrorEvent,
+} from "./events";
+
+export class BundlerController extends Controller {
+	// ******************
+	//   Event Handlers
+	// ******************
+
+	onConfigUpdate(_: ConfigUpdateEvent) {
+		notImplemented(this.onConfigUpdate.name, this.constructor.name);
+	}
+
+	async teardown() {
+		notImplemented(this.teardown.name, this.constructor.name);
+	}
+
+	// *********************
+	//   Event Dispatchers
+	// *********************
+
+	emitBundleStartEvent(data: BundleStartEvent) {
+		this.emit("bundleStart", data);
+	}
+	emitBundleCompletetEvent(data: BundleCompleteEvent) {
+		this.emit("bundleComplete", data);
+	}
+
+	// *********************
+	//   Event Subscribers
+	// *********************
+
+	on(event: "bundleStart", listener: (_: BundleStartEvent) => void): this;
+	on(event: "bundleComplete", listener: (_: BundleCompleteEvent) => void): this;
+	// @ts-expect-error Missing overload implementation (only need the signature types, base implementation is fine)
+	on(event: "error", listener: (_: ErrorEvent) => void): this;
+	// @ts-expect-error Missing initialisation (only need the signature types, base implementation is fine)
+	once: typeof this.on;
+}
diff --git a/packages/wrangler/src/api/startDevWorker/ConfigController.ts b/packages/wrangler/src/api/startDevWorker/ConfigController.ts
new file mode 100644
index 000000000000..74aa66456f28
--- /dev/null
+++ b/packages/wrangler/src/api/startDevWorker/ConfigController.ts
@@ -0,0 +1,42 @@
+import { EventEmitter } from "node:events";
+// import { readFileSync } from "../../parse";
+import { notImplemented } from "./NotImplementedError";
+import type { ConfigUpdateEvent, ErrorEvent } from "./events";
+import type { StartDevWorkerOptions } from "./types";
+
+export class ConfigController extends EventEmitter {
+	config?: StartDevWorkerOptions;
+
+	setOptions(_: StartDevWorkerOptions) {
+		notImplemented(this.setOptions.name, this.constructor.name);
+	}
+	updateOptions(_: Partial<StartDevWorkerOptions>) {
+		notImplemented(this.updateOptions.name, this.constructor.name);
+	}
+
+	// ******************
+	//   Event Handlers
+	// ******************
+
+	async teardown() {
+		notImplemented(this.teardown.name, this.constructor.name);
+	}
+
+	// *********************
+	//   Event Dispatchers
+	// *********************
+
+	emitConfigUpdateEvent(data: ConfigUpdateEvent) {
+		this.emit("configUpdate", data);
+	}
+
+	// *********************
+	//   Event Subscribers
+	// *********************
+
+	on(event: "configUpdate", listener: (_: ConfigUpdateEvent) => void): this;
+	// @ts-expect-error Missing overload implementation (only need the signature types, base implementation is fine)
+	on(event: "error", listener: (_: ErrorEvent) => void): this;
+	// @ts-expect-error Missing initialisation (only need the signature types, base implementation is fine)
+	once: typeof this.on;
+}
diff --git a/packages/wrangler/src/api/startDevWorker/DevEnv.ts b/packages/wrangler/src/api/startDevWorker/DevEnv.ts
new file mode 100644
index 000000000000..85ee7002e62b
--- /dev/null
+++ b/packages/wrangler/src/api/startDevWorker/DevEnv.ts
@@ -0,0 +1,148 @@
+import { EventEmitter } from "node:events";
+import { fetch, Request, type RequestInit } from "miniflare";
+import { logger } from "../../logger";
+import { BundlerController } from "./BundlerController";
+import { ConfigController } from "./ConfigController";
+import { LocalRuntimeController } from "./LocalRuntimeController";
+import { ProxyController } from "./ProxyController";
+import { RemoteRuntimeController } from "./RemoteRuntimeController";
+import type { RuntimeController } from "./BaseController";
+import type { ErrorEvent } from "./events";
+import type { StartDevWorkerOptions, DevWorker } from "./types";
+
+/**
+ * @internal
+ */
+export class DevEnv extends EventEmitter {
+	config: ConfigController;
+	bundler: BundlerController;
+	runtimes: RuntimeController[];
+	proxy: ProxyController;
+
+	startWorker(options: StartDevWorkerOptions): DevWorker {
+		const worker = createWorkerObject(this);
+
+		this.config.setOptions(options);
+
+		return worker;
+	}
+
+	constructor({
+		config = new ConfigController(),
+		bundler = new BundlerController(),
+		runtimes = [
+			new LocalRuntimeController(),
+			new RemoteRuntimeController(),
+		] as RuntimeController[],
+		proxy = new ProxyController(),
+	} = {}) {
+		super();
+
+		this.config = config;
+		this.bundler = bundler;
+		this.runtimes = runtimes;
+		this.proxy = proxy;
+
+		[config, bundler, ...runtimes, proxy].forEach((controller) =>
+			controller.on("error", (event) => this.emitErrorEvent(event))
+		);
+
+		this.on("error", (event) => {
+			logger.error(event);
+		});
+
+		config.on("configUpdate", (event) => {
+			bundler.onConfigUpdate(event);
+			proxy.onConfigUpdate(event);
+		});
+
+		bundler.on("bundleStart", (event) => {
+			proxy.onBundleStart(event);
+			runtimes.forEach((runtime) => {
+				runtime.onBundleStart(event);
+			});
+		});
+		bundler.on("bundleComplete", (event) => {
+			runtimes.forEach((runtime) => {
+				runtime.onBundleComplete(event);
+			});
+		});
+
+		runtimes.forEach((runtime) => {
+			runtime.on("reloadStart", (event) => {
+				proxy.onReloadStart(event);
+			});
+			runtime.on("reloadComplete", (event) => {
+				proxy.onReloadComplete(event);
+			});
+		});
+
+		proxy.on("previewTokenExpired", (event) => {
+			runtimes.forEach((runtime) => {
+				runtime.onPreviewTokenExpired(event);
+			});
+		});
+	}
+
+	// *********************
+	//   Event Dispatchers
+	// *********************
+
+	async teardown() {
+		this.emit("teardown");
+
+		await Promise.all([
+			this.config.teardown(),
+			this.bundler.teardown(),
+			this.runtimes.forEach((runtime) => runtime.teardown()),
+			this.proxy.teardown(),
+		]);
+	}
+
+	emitErrorEvent(data: ErrorEvent) {
+		this.emit("error", data);
+	}
+}
+
+export function createWorkerObject(devEnv: DevEnv): DevWorker {
+	return {
+		get ready() {
+			return devEnv.proxy.ready.promise.then(() => undefined);
+		},
+		get config() {
+			return devEnv.config.config;
+		},
+		setOptions(options) {
+			return devEnv.config.setOptions(options);
+		},
+		updateOptions(options) {
+			return devEnv.config.updateOptions(options);
+		},
+		async fetch(...args) {
+			const { proxyWorker } = await devEnv.proxy.ready.promise;
+			// return proxyWorker.dispatchFetch(...args);
+			// ^ bug: Miniflare#dispatchFetch uses one HTTP/1.1 connection, preventing parallel requests (pause/play requests + buffered eyeball requests)
+			// workaround: use undici.fetch
+			const proxyWorkerUrl = await proxyWorker.ready;
+			const req = new Request(...args);
+			const url = new URL(req.url);
+			url.protocol = proxyWorkerUrl.protocol;
+			url.hostname = proxyWorkerUrl.hostname;
+			url.port = proxyWorkerUrl.port;
+			// /workaround
+
+			return fetch(url, req as RequestInit);
+		},
+		async queue(..._args) {
+			// const { worker } = await devEnv.proxy.ready;
+			// return worker.queue(...args);
+		},
+		async scheduled(..._args) {
+			// const { worker } = await devEnv.proxy.ready;
+			// return worker.scheduled(...args);
+		},
+		async dispose() {
+			await devEnv.teardown();
+		},
+	};
+}
diff --git a/packages/wrangler/src/api/startDevWorker/LocalRuntimeController.ts b/packages/wrangler/src/api/startDevWorker/LocalRuntimeController.ts
new file mode 100644
index 000000000000..699070b14569
--- /dev/null
+++ b/packages/wrangler/src/api/startDevWorker/LocalRuntimeController.ts
@@ -0,0 +1,41 @@
+// import { readFileSync } from "../../parse";
+import { RuntimeController } from "./BaseController";
+import { notImplemented } from "./NotImplementedError";
+import type {
+	BundleCompleteEvent,
+	BundleStartEvent,
+	PreviewTokenExpiredEvent,
+	ReloadCompleteEvent,
+	ReloadStartEvent,
+} from "./events";
+
+export class LocalRuntimeController extends RuntimeController {
+	// ******************
+	//   Event Handlers
+	// ******************
+
+	onBundleStart(_: BundleStartEvent) {
+		notImplemented(this.onBundleStart.name, this.constructor.name);
+	}
+	onBundleComplete(_: BundleCompleteEvent) {
+		notImplemented(this.onBundleComplete.name, this.constructor.name);
+	}
+	onPreviewTokenExpired(_: PreviewTokenExpiredEvent): void {
+		// ignore in local runtime
+	}
+
+	async teardown() {
+		notImplemented(this.teardown.name, this.constructor.name);
+	}
+
+	// *********************
+	//   Event Dispatchers
+	// *********************
+
+	emitReloadStartEvent(data: ReloadStartEvent) {
+		this.emit("reloadComplete", data);
+	}
+	emitReloadCompletetEvent(data: ReloadCompleteEvent) {
+		this.emit("reloadComplete", data);
+	}
+}
diff --git a/packages/wrangler/src/api/startDevWorker/NotImplementedError.ts b/packages/wrangler/src/api/startDevWorker/NotImplementedError.ts
new file mode 100644
index 000000000000..7bfc32be7fbe
--- /dev/null
+++ b/packages/wrangler/src/api/startDevWorker/NotImplementedError.ts
@@ -0,0 +1,15 @@
+import { logger } from "../../logger";
+
+export class NotImplementedError extends Error {
+	constructor(func: string, namespace?: string) {
+		if (namespace) func = `${namespace}#${func}`;
+		super(`Not Implemented Error: ${func}`);
+	}
+}
+
+export function notImplemented(func: string, namespace?: string) {
+	if (namespace) func = `${namespace}#${func}`;
+	logger.debug(`Not Implemented Error: ${func}`);
+
+	return new NotImplementedError(func, namespace);
+}
diff --git a/packages/wrangler/src/api/startDevWorker/ProxyController.ts b/packages/wrangler/src/api/startDevWorker/ProxyController.ts
new file mode 100644
index 000000000000..849fa4db21bf
--- /dev/null
+++ b/packages/wrangler/src/api/startDevWorker/ProxyController.ts
@@ -0,0 +1,527 @@
+import assert from "node:assert";
+import { randomUUID } from "node:crypto";
+import { EventEmitter } from "node:events";
+import path from "node:path";
+import { LogLevel, Miniflare, Response } from "miniflare";
+import { WebSocket } from "miniflare";
+import inspectorProxyWorkerPath from "worker:startDevWorker/InspectorProxyWorker";
+import proxyWorkerPath from "worker:startDevWorker/ProxyWorker";
+import {
+	logConsoleMessage,
+	maybeHandleNetworkLoadResource,
+} from "../../dev/inspect";
+import { WranglerLog, castLogLevel } from "../../dev/miniflare";
+import { getHttpsOptions } from "../../https-options";
+import { logger } from "../../logger";
+import { getSourceMappedStack } from "../../sourcemap";
+import { castErrorCause } from "./events";
+import { assertNever, createDeferred, type DeferredPromise } from "./utils";
+import type { EsbuildBundle } from "../../dev/use-esbuild";
+import type {
+	BundleStartEvent,
+	ConfigUpdateEvent,
+	ErrorEvent,
+	InspectorProxyWorkerIncomingWebSocketMessage,
+	InspectorProxyWorkerOutgoingRequestBody,
+	InspectorProxyWorkerOutgoingWebsocketMessage,
+	PreviewTokenExpiredEvent,
+	ProxyData,
+	ProxyWorkerIncomingRequestBody,
+	ProxyWorkerOutgoingRequestBody,
+	ReadyEvent,
+	ReloadCompleteEvent,
+	ReloadStartEvent,
+	SerializedError,
+} from "./events";
+import type { StartDevWorkerOptions } from "./types";
+import type { MiniflareOptions } from "miniflare";
+
+export class ProxyController extends EventEmitter {
+	public ready = createDeferred<ReadyEvent>();
+
+	public proxyWorker?: Miniflare;
+	public inspectorProxyWorker?: Miniflare;
+	proxyWorkerOptions?: MiniflareOptions;
+	inspectorProxyWorkerOptions?: MiniflareOptions;
+	inspectorProxyWorkerWebSocket?: DeferredPromise<WebSocket>;
+
+	protected latestConfig?: StartDevWorkerOptions;
+	protected latestBundle?: EsbuildBundle;
+	secret = randomUUID();
+
+	protected createProxyWorker() {
+		if (this._torndown) return;
+		assert(this.latestConfig !== undefined);
+
+		const cert =
+			this.latestConfig.dev?.server?.secure ||
+			this.latestConfig.dev?.inspector?.secure
+				? getHttpsOptions()
+				: undefined;
+
+		const proxyWorkerOptions: MiniflareOptions = {
+			verbose: true,
+			compatibilityFlags: ["nodejs_compat"],
+			modulesRoot: path.dirname(proxyWorkerPath),
+			modules: [{ type: "ESModule", path: proxyWorkerPath }],
+			durableObjects: {
+				DURABLE_OBJECT: "ProxyWorker",
+			},
+			serviceBindings: {
+				PROXY_CONTROLLER: async (req): Promise<Response> => {
+					const message = (await req.json()) as ProxyWorkerOutgoingRequestBody;
+
+					this.onProxyWorkerMessage(message);
+
+					return new Response(null, { status: 204 });
+				},
+			},
+			bindings: {
+				PROXY_CONTROLLER_AUTH_SECRET: this.secret,
+			},
+
+			host: this.latestConfig.dev?.server?.hostname,
+			port: this.latestConfig.dev?.server?.port,
+			https: this.latestConfig.dev?.server?.secure,
+			httpsCert: cert?.cert,
+			httpsKey: cert?.key,
+
+			// log requests into the ProxyWorker (for local + remote mode)
+			log: new ProxyControllerLogger(castLogLevel(logger.loggerLevel), {
+				prefix:
+					// if debugging, log requests with specic ProxyWorker prefix
+					logger.loggerLevel === "debug" ? "wrangler-ProxyWorker" : "wrangler",
+			}),
+		};
+		const inspectorProxyWorkerOptions: MiniflareOptions = {
+			verbose: true,
+			compatibilityFlags: ["nodejs_compat"],
+			modulesRoot: path.dirname(inspectorProxyWorkerPath),
+			modules: [{ type: "ESModule", path: inspectorProxyWorkerPath }],
+			durableObjects: {
+				DURABLE_OBJECT: "InspectorProxyWorker",
+			},
+			serviceBindings: {
+				PROXY_CONTROLLER: async (req): Promise<Response> => {
+					const body =
+						(await req.json()) as InspectorProxyWorkerOutgoingRequestBody;
+
+					return this.onInspectorProxyWorkerRequest(body);
+				},
+			},
+			bindings: {
+				PROXY_CONTROLLER_AUTH_SECRET: this.secret,
+			},
+
+			host: this.latestConfig.dev?.inspector?.hostname,
+			port: this.latestConfig.dev?.inspector?.port,
+			https: this.latestConfig.dev?.inspector?.secure,
+			httpsCert: cert?.cert,
+			httpsKey: cert?.key,
+
+			// only if debugging, log requests to InspectorProxyWorker
+			log:
+				logger.loggerLevel === "debug"
+					? new ProxyControllerLogger(LogLevel.DEBUG, {
+							prefix: "wrangler-InspectorProxyWorker",
+					  })
+					: undefined,
+		};
+
+		const proxyWorkerOptionsChanged = didMiniflareOptionsChange(
+			this.proxyWorkerOptions,
+			proxyWorkerOptions
+		);
+		const inspectorProxyWorkerOptionsChanged = didMiniflareOptionsChange(
+			this.inspectorProxyWorkerOptions,
+			inspectorProxyWorkerOptions
+		);
+
+		if (this.proxyWorker === undefined) {
+			this.proxyWorker = new Miniflare(proxyWorkerOptions);
+			this.proxyWorkerOptions = proxyWorkerOptions;
+		}
+		if (this.inspectorProxyWorker === undefined) {
+			this.inspectorProxyWorker = new Miniflare(inspectorProxyWorkerOptions);
+			this.inspectorProxyWorkerOptions = inspectorProxyWorkerOptions;
+		}
+
+		if (proxyWorkerOptionsChanged || inspectorProxyWorkerOptionsChanged) {
+			// this creates a new .ready promise that will be resolved when both ProxyWorkers are ready
+			// it also respects any await-ers of the existing .ready promise
+			this.ready = createDeferred<ReadyEvent>(this.ready);
+		}
+		if (proxyWorkerOptionsChanged) {
+			logger.debug("ProxyWorker miniflare options changed, reinstantiating...");
+			// TODO: ideally we'd use the same miniflare instance via .setOptions but bug: it doesn't respect port changes (easy fix incoming)
+			// Ideally we'd do:
+			//    void this.proxyWorker.setOptions(proxyWorkerOptions);
+			//    this.proxyWorkerOptions = proxyWorkerOptions;
+			// Instead, for now, we do:
+			void this.proxyWorker.dispose();
+			this.proxyWorker = new Miniflare(proxyWorkerOptions);
+			this.proxyWorkerOptions = proxyWorkerOptions;
+		}
+		if (inspectorProxyWorkerOptionsChanged) {
+			logger.debug(
+				"InspectorProxyWorker miniflare options changed, reinstantiating..."
+			);
+			// TODO: ideally we'd use the same miniflare instance via .setOptions but bug: it doesn't respect port changes (easy fix incoming)
+			// Ideally we'd do:
+			//    void this.inspectorProxyWorker.setOptions(inspectorProxyWorkerOptions);
+			//    this.inspectorProxyWorkerOptions = inspectorProxyWorkerOptions;
+			// Instead, for now, we do:
+			void this.inspectorProxyWorker.dispose();
+			this.inspectorProxyWorker = new Miniflare(inspectorProxyWorkerOptions);
+			this.inspectorProxyWorkerOptions = inspectorProxyWorkerOptions;
+		}
+
+		// store the non-null versions for callbacks
+		const { proxyWorker, inspectorProxyWorker } = this;
+
+		void Promise.all([proxyWorker.ready, this.reconnectInspectorProxyWorker()])
+			.then(() => {
+				this.emitReadyEvent(proxyWorker, inspectorProxyWorker);
+			})
+			.catch((error) => {
+				this.emitErrorEvent(
+					"Failed to start ProxyWorker or InspectorProxyWorker",
+					error
+				);
+			});
+	}
+
+	async reconnectInspectorProxyWorker(): Promise<WebSocket | undefined> {
+		if (this._torndown) return;
+
+		const existingWebSocket = await this.inspectorProxyWorkerWebSocket?.promise;
+		if (existingWebSocket?.readyState === WebSocket.READY_STATE_OPEN) {
+			return existingWebSocket;
+		}
+
+		this.inspectorProxyWorkerWebSocket = createDeferred<WebSocket>();
+
+		let webSocket: WebSocket | null = null;
+
+		try {
+			assert(this.inspectorProxyWorker);
+			({ webSocket } = await this.inspectorProxyWorker.dispatchFetch(
+				"http://dummy/cdn-cgi/InspectorProxyWorker/websocket",
+				{ headers: { Authorization: this.secret, Upgrade: "websocket" } }
+			));
+		} catch (cause) {
+			if (this._torndown) return;
+
+			const error = castErrorCause(cause);
+
+			this.inspectorProxyWorkerWebSocket?.reject(error);
+			this.emitErrorEvent("Could not connect to InspectorProxyWorker", error);
+			return;
+		}
+
+		assert(
+			webSocket,
+			"Expected webSocket on response from inspectorProxyWorker"
+		);
+
+		webSocket.addEventListener("message", (event) => {
+			assert(typeof event.data === "string");
+
+			this.onInspectorProxyWorkerMessage(JSON.parse(event.data));
+		});
+		webSocket.addEventListener("close", () => {
+			// don't reconnect
+		});
+		webSocket.addEventListener("error", () => {
+			if (this._torndown) return;
+
+			void this.reconnectInspectorProxyWorker();
+		});
+
+		webSocket.accept();
+		this.inspectorProxyWorkerWebSocket?.resolve(webSocket);
+
+		return webSocket;
+	}
+
+	async sendMessageToProxyWorker(
+		message: ProxyWorkerIncomingRequestBody,
+		retries = 3
+	): Promise<void> {
+		if (this._torndown) return;
+		assert(this.proxyWorker, "proxyWorker should already be instantiated");
+
+		try {
+			await this.proxyWorker.dispatchFetch(
+				`http://dummy/cdn-cgi/ProxyWorker/${message.type}`,
+				{
+					headers: { Authorization: this.secret },
+					cf: { hostMetadata: message },
+				}
+			);
+		} catch (cause) {
+			if (this._torndown) return;
+
+			const error = castErrorCause(cause);
+
+			if (retries > 0) {
+				return this.sendMessageToProxyWorker(message, retries - 1);
+			}
+
+			this.emitErrorEvent(
+				`Failed to send message to ProxyWorker: ${JSON.stringify(message)}`,
+				error
+			);
+
+			throw error;
+		}
+	}
+	async sendMessageToInspectorProxyWorker(
+		message: InspectorProxyWorkerIncomingWebSocketMessage,
+		retries = 3
+	): Promise<void> {
+		if (this._torndown) return;
+
+		try {
+			const websocket = await this.inspectorProxyWorkerWebSocket?.promise;
+			assert(websocket);
+
+			if (websocket.readyState >= WebSocket.READY_STATE_CLOSING) {
+				await this.reconnectInspectorProxyWorker();
+			}
+
+			websocket.send(JSON.stringify(message));
+		} catch (cause) {
+			if (this._torndown) return;
+
+			const error = castErrorCause(cause);
+
+			if (retries > 0) {
+				return this.sendMessageToInspectorProxyWorker(message, retries - 1);
+			}
+
+			this.emitErrorEvent(
+				`Failed to send message to InspectorProxyWorker: ${JSON.stringify(
+					message
+				)}`,
+				error
+			);
+
+			throw error;
+		}
+	}
+
+	// ******************
+	//   Event Handlers
+	// ******************
+
+	onConfigUpdate(data: ConfigUpdateEvent) {
+		this.latestConfig = data.config;
+		this.createProxyWorker();
+
+		void this.sendMessageToProxyWorker({ type: "pause" });
+	}
+	onBundleStart(data: BundleStartEvent) {
+		this.latestConfig = data.config;
+
+		void this.sendMessageToProxyWorker({ type: "pause" });
+	}
+	onReloadStart(data: ReloadStartEvent) {
+		this.latestConfig = data.config;
+
+		void this.sendMessageToProxyWorker({ type: "pause" });
+	}
+	onReloadComplete(data: ReloadCompleteEvent) {
+		this.latestConfig = data.config;
+		this.latestBundle = data.bundle;
+
+		void this.sendMessageToProxyWorker({
+			type: "play",
+			proxyData: data.proxyData,
+		});
+
+		void this.sendMessageToInspectorProxyWorker({
+			type: "reloadComplete",
+			proxyData: data.proxyData,
+		});
+	}
+	onProxyWorkerMessage(message: ProxyWorkerOutgoingRequestBody) {
+		switch (message.type) {
+			case "previewTokenExpired":
+				this.emitPreviewTokenExpiredEvent(message.proxyData);
+
+				break;
+			case "error":
+				this.emitErrorEvent("Error inside ProxyWorker", message.error);
+
+				break;
+			case "debug-log":
+				logger.debug("[ProxyWorker]", ...message.args);
+
+				break;
+			default:
+				assertNever(message);
+		}
+	}
+	onInspectorProxyWorkerMessage(
+		message: InspectorProxyWorkerOutgoingWebsocketMessage
+	) {
+		switch (message.method) {
+			case "Runtime.consoleAPICalled": {
+				if (this._torndown) return;
+
+				logConsoleMessage(message.params);
+
+				break;
+			}
+			case "Runtime.exceptionThrown": {
+				if (this._torndown) return;
+
+				const stack = getSourceMappedStack(message.params.exceptionDetails);
+				logger.error(message.params.exceptionDetails.text, stack);
+				break;
+			}
+			default: {
+				assertNever(message);
+			}
+		}
+	}
+	async onInspectorProxyWorkerRequest(
+		message: InspectorProxyWorkerOutgoingRequestBody
+	) {
+		switch (message.type) {
+			case "runtime-websocket-error":
+				// TODO: consider sending proxyData again to trigger the InspectorProxyWorker to reconnect to the runtime
+				logger.error(message.error);
+
+				break;
+			case "error":
+				this.emitErrorEvent("Error inside InspectorProxyWorker", message.error);
+
+				break;
+			case "debug-log":
+				if (this._torndown) break;
+
+				logger.debug("[InspectorProxyWorker]", ...message.args);
+
+				break;
+			case "load-network-resource": {
+				assert(this.latestConfig !== undefined);
+				assert(this.latestBundle !== undefined);
+
+				let maybeContents: string | undefined;
+				if (message.url.startsWith("wrangler-file:")) {
+					maybeContents = maybeHandleNetworkLoadResource(
+						message.url.replace("wrangler-file:", "file:"),
+						this.latestBundle,
+						this.latestBundle.sourceMapMetadata?.tmpDir
+					);
+				}
+
+				if (maybeContents === undefined) {
+					return new Response(null, { status: 404 });
+				}
+
+				return new Response(maybeContents);
+			}
+			default:
+				assertNever(message);
+				return new Response(null, { status: 404 });
+		}
+
+		return new Response(null, { status: 204 });
+	}
+
+	_torndown = false;
+	async teardown() {
+		logger.debug("ProxyController teardown");
+		this._torndown = true;
+
+		const { proxyWorker, inspectorProxyWorker } = this;
+		this.proxyWorker = undefined;
+		this.inspectorProxyWorker = undefined;
+
+		await Promise.all([
+			proxyWorker?.dispose(),
+			inspectorProxyWorker?.dispose(),
+			this.inspectorProxyWorkerWebSocket?.promise
+				.then((ws) => ws.close())
+				.catch(() => {
+					/* ignore */
+				}),
+		]);
+	}
+
+	// *********************
+	//   Event Dispatchers
+	// *********************
+
+	emitReadyEvent(proxyWorker: Miniflare, inspectorProxyWorker: Miniflare) {
+		const data: ReadyEvent = {
+			type: "ready",
+			proxyWorker,
+			inspectorProxyWorker,
+		};
+
+		this.emit("ready", data);
+		this.ready.resolve(data);
+	}
+	emitPreviewTokenExpiredEvent(proxyData: ProxyData) {
+		this.emit("previewTokenExpired", {
+			type: "previewTokenExpired",
+			proxyData,
+		});
+	}
+	emitErrorEvent(reason: string, cause?: Error | SerializedError) {
+		this.emit("error", { source: "ProxyController", cause, reason });
+	}
+
+	// *********************
+	//   Event Subscribers
+	// *********************
+
+	on(event: "ready", listener: (_: ReadyEvent) => void): this;
+	on(
+		event: "previewTokenExpired",
+		listener: (_: PreviewTokenExpiredEvent) => void
+	): this;
+	// @ts-expect-error Missing overload implementation (only need the signature types, base implementation is fine)
+	on(event: "error", listener: (_: ErrorEvent) => void): this;
+	// @ts-expect-error Missing initialisation (only need the signature types, base implementation is fine)
+	once: typeof this.on;
+}
+
+export class ProxyControllerLogger extends WranglerLog {
+	info(message: string) {
+		// filter out request logs being handled by the ProxyWorker
+		// the requests log remaining are handled by the UserWorker
+		// keep the ProxyWorker request logs if we're in debug mode
+		if (message.includes("/cdn-cgi/") && this.level !== LogLevel.DEBUG) return;
+		super.info(message);
+	}
+
+	// TODO: remove this override when miniflare is fixed https://jira.cfdata.org/browse/DEVX-983
+	error(message: Error) {
+		try {
+			super.error(message);
+		} catch {
+			// miniflare shouldn't throw in logger.error
+			// for now, ignore errors from the logger
+		}
+	}
+}
+
+function deepEquality(a: unknown, b: unknown): boolean {
+	// could be more efficient, but this is fine for now
+	return JSON.stringify(a) === JSON.stringify(b);
+}
+
+function didMiniflareOptionsChange(
+	prev: MiniflareOptions | undefined,
+	next: MiniflareOptions
+) {
+	if (prev === undefined) return false; // first time, so 'no change'
+
+	// otherwise, if they're not deeply equal, they've changed
+	return !deepEquality(prev, next);
+}
diff --git a/packages/wrangler/src/api/startDevWorker/RemoteRuntimeController.ts b/packages/wrangler/src/api/startDevWorker/RemoteRuntimeController.ts
new file mode 100644
index 000000000000..71f289b338c3
--- /dev/null
+++ b/packages/wrangler/src/api/startDevWorker/RemoteRuntimeController.ts
@@ -0,0 +1,41 @@
+// import { readFileSync } from "../../parse";
+import { RuntimeController } from "./BaseController";
+import { notImplemented } from "./NotImplementedError";
+import type {
+	BundleCompleteEvent,
+	BundleStartEvent,
+	PreviewTokenExpiredEvent,
+	ReloadCompleteEvent,
+	ReloadStartEvent,
+} from "./events";
+
+export class RemoteRuntimeController extends RuntimeController {
+	// ******************
+	//   Event Handlers
+	// ******************
+
+	onBundleStart(_: BundleStartEvent) {
+		notImplemented(this.onBundleStart.name, this.constructor.name);
+	}
+	onBundleComplete(_: BundleCompleteEvent) {
+		notImplemented(this.onBundleComplete.name, this.constructor.name);
+	}
+	onPreviewTokenExpired(_: PreviewTokenExpiredEvent): void {
+		notImplemented(this.onPreviewTokenExpired.name, this.constructor.name);
+	}
+
+	async teardown() {
+		notImplemented(this.teardown.name, this.constructor.name);
+	}
+
+	// *********************
+	//   Event Dispatchers
+	// *********************
+
+	emitReloadStartEvent(data: ReloadStartEvent) {
+		this.emit("reloadComplete", data);
+	}
+	emitReloadCompletetEvent(data: ReloadCompleteEvent) {
+		this.emit("reloadComplete", data);
+	}
+}
diff --git a/packages/wrangler/src/api/startDevWorker/bundle-allowed-paths.ts b/packages/wrangler/src/api/startDevWorker/bundle-allowed-paths.ts
new file mode 100644
index 000000000000..b459971997fd
--- /dev/null
+++ b/packages/wrangler/src/api/startDevWorker/bundle-allowed-paths.ts
@@ -0,0 +1,99 @@
+/**
+ * Browser DevTools will send `Network.loadNetworkResource` commands for source
+ * maps and source files. We only want to allow files referenced by the bundle
+ * to be requested (to prevent arbitrary file access). This module exports
+ * functions for checking whether a specific file may be requested as a source
+ * file, or source map (i.e. is safe to serve from the file system).
+ */
+import assert from "node:assert";
+import fs from "node:fs";
+import path from "node:path";
+import { fileURLToPath, pathToFileURL } from "node:url";
+import type { EsbuildBundle } from "../../dev/use-esbuild";
+import type { RawSourceMap } from "source-map";
+
+export function isAllowedSourcePath(
+	bundle: EsbuildBundle,
+	filePath: string
+): boolean {
+	const allowed = getBundleReferencedPaths(bundle);
+	return allowed.sourcePaths.has(filePath);
+}
+export function isAllowedSourceMapPath(
+	bundle: EsbuildBundle,
+	filePath: string
+): boolean {
+	const allowed = getBundleReferencedPaths(bundle);
+	return allowed.sourceMapPaths.has(filePath);
+}
+
+interface BundleReferencedPaths {
+	sourcePaths: Set<string>;
+	sourceMapPaths: Set<string>;
+}
+const bundleReferencedPathsCache = new WeakMap<
+	EsbuildBundle,
+	BundleReferencedPaths
+>();
+function getBundleReferencedPaths(
+	bundle: EsbuildBundle
+): BundleReferencedPaths {
+	let allowed = bundleReferencedPathsCache.get(bundle);
+	if (allowed !== undefined) return allowed;
+	allowed = { sourcePaths: new Set(), sourceMapPaths: new Set() };
+	bundleReferencedPathsCache.set(bundle, allowed);
+
+	for (const sourcePath of getBundleSourcePaths(bundle)) {
+		// We don't need to add `sourcePath` to `allowed` here, as DevTools sends
+		// `Debugger.getScriptSource` commands instead, which get the code from V8.
+
+		const sourceMappingURL = maybeGetSourceMappingURL(sourcePath);
+		if (sourceMappingURL === undefined) continue;
+		const sourceMappingPath = fileURLToPath(sourceMappingURL);
+		allowed.sourceMapPaths.add(sourceMappingPath);
+
+		const sourceMapData = fs.readFileSync(sourceMappingPath, "utf8");
+		const sourceMap: RawSourceMap = JSON.parse(sourceMapData);
+
+		const sourceRoot = sourceMap.sourceRoot ?? "";
+		for (const source of sourceMap.sources) {
+			const sourceURL = new URL(
+				path.posix.join(sourceRoot, source),
+				sourceMappingURL
+			);
+			allowed.sourcePaths.add(fileURLToPath(sourceURL));
+		}
+	}
+
+	return allowed;
+}
+
+function* getBundleSourcePaths(bundle: EsbuildBundle): Generator<string> {
+	yield bundle.path;
+	for (const module of bundle.modules) {
+		if (module.type !== "esm" && module.type !== "commonjs") continue;
+		if (module.filePath === undefined) continue;
+		yield module.filePath;
+	}
+}
+
+function maybeGetSourceMappingURL(sourcePath: string): URL | undefined {
+	const source = fs.readFileSync(sourcePath, "utf8");
+	const sourceMappingURLIndex = source.lastIndexOf("//# sourceMappingURL=");
+	if (sourceMappingURLIndex === -1) return;
+
+	const sourceMappingURLMatch = source
+		.substring(sourceMappingURLIndex)
+		.match(/^\/\/# sourceMappingURL=(.+)/);
+	assert(sourceMappingURLMatch !== null);
+	const sourceMappingURLSpecifier = sourceMappingURLMatch[1];
+
+	const sourceURL = pathToFileURL(sourcePath);
+	try {
+		const sourceMappingURL = new URL(sourceMappingURLSpecifier, sourceURL);
+		if (sourceMappingURL.protocol !== "file:") return;
+		return sourceMappingURL;
+	} catch {
+		// If we can't parse `sourceMappingURLSpecifier`, ignore it
+	}
+}
diff --git a/packages/wrangler/src/api/startDevWorker/devtools.ts b/packages/wrangler/src/api/startDevWorker/devtools.ts
new file mode 100644
index 000000000000..8a3afb85a631
--- /dev/null
+++ b/packages/wrangler/src/api/startDevWorker/devtools.ts
@@ -0,0 +1,41 @@
+import type Protocol from "devtools-protocol/types/protocol-mapping";
+
+type _Params<ParamsArray extends [unknown?]> = ParamsArray extends [infer P]
+	? P
+	: undefined;
+
+type _EventMethods = keyof Protocol.Events;
+export type DevToolsEvent<Method extends _EventMethods> = Method extends unknown
+	? {
+			method: Method;
+			params: _Params<Protocol.Events[Method]>;
+	  }
+	: never;
+
+export type DevToolsEvents = DevToolsEvent<_EventMethods>;
+
+type _CommandMethods = keyof Protocol.Commands;
+export type DevToolsCommandRequest<Method extends _CommandMethods> =
+	Method extends unknown
+		? _Params<Protocol.Commands[Method]["paramsType"]> extends undefined
+			? {
+					id: number;
+					method: Method;
+			  }
+			: {
+					id: number;
+					method: Method;
+					params: _Params<Protocol.Commands[Method]["paramsType"]>;
+			  }
+		: never;
+
+export type DevToolsCommandRequests = DevToolsCommandRequest<_CommandMethods>;
+
+export type DevToolsCommandResponse<Method extends _CommandMethods> =
+	Method extends unknown
+		? {
+				id: number;
+				result: Protocol.Commands[Method]["returnType"];
+		  }
+		: never;
+export type DevToolsCommandResponses = DevToolsCommandResponse<_CommandMethods>;
diff --git a/packages/wrangler/src/api/startDevWorker/events.ts b/packages/wrangler/src/api/startDevWorker/events.ts
new file mode 100644
index 000000000000..e6b806d2b129
--- /dev/null
+++ b/packages/wrangler/src/api/startDevWorker/events.ts
@@ -0,0 +1,138 @@
+import type { EsbuildBundle } from "../../dev/use-esbuild";
+import type { DevToolsEvent } from "./devtools";
+import type { StartDevWorkerOptions } from "./types";
+import type { Miniflare } from "miniflare";
+
+export type TeardownEvent = {
+	type: "teardown";
+};
+export type ErrorEvent = {
+	type: "error";
+	reason: string;
+	cause: Error;
+	source:
+		| "ConfigController"
+		| "BundlerController"
+		| "LocalRuntimeController"
+		| "RemoteRuntimeController"
+		| "ProxyController"
+		| "ProxyWorker"
+		| "InspectorProxyWorker";
+};
+export function castErrorCause(cause: unknown) {
+	if (cause instanceof Error) return cause;
+
+	const error = new Error();
+	error.cause = cause;
+
+	return error;
+}
+
+// ConfigController
+export type ConfigUpdateEvent = {
+	type: "configUpdate";
+
+	config: StartDevWorkerOptions;
+};
+
+// BundlerController
+export type BundleStartEvent = {
+	type: "bundleStart";
+
+	config: StartDevWorkerOptions;
+};
+export type BundleCompleteEvent = {
+	type: "bundleComplete";
+
+	config: StartDevWorkerOptions;
+	bundle: EsbuildBundle;
+};
+
+// RuntimeController
+export type ReloadStartEvent = {
+	type: "reloadStart";
+
+	config: StartDevWorkerOptions;
+	bundle: EsbuildBundle;
+};
+export type ReloadCompleteEvent = {
+	type: "reloadComplete";
+
+	config: StartDevWorkerOptions;
+	bundle: EsbuildBundle;
+	proxyData: ProxyData;
+};
+
+// ProxyController
+export type PreviewTokenExpiredEvent = {
+	type: "previewTokenExpired";
+
+	proxyData: ProxyData;
+	// ... other details of failed request/response
+};
+export type ReadyEvent = {
+	type: "ready";
+
+	proxyWorker: Miniflare;
+	inspectorProxyWorker: Miniflare;
+};
+
+// ProxyWorker
+export type ProxyWorkerIncomingRequestBody =
+	| { type: "play"; proxyData: ProxyData }
+	| { type: "pause" };
+export type ProxyWorkerOutgoingRequestBody =
+	| { type: "error"; error: SerializedError }
+	| { type: "previewTokenExpired"; proxyData: ProxyData }
+	| { type: "debug-log"; args: Parameters<typeof console.debug> };
+
+// InspectorProxyWorker
+export * from "./devtools";
+export type InspectorProxyWorkerIncomingWebSocketMessage = {
+	type: ReloadCompleteEvent["type"];
+	proxyData: ProxyData;
+};
+export type InspectorProxyWorkerOutgoingWebsocketMessage =
+	// Relayed Chrome DevTools Protocol Messages
+	| DevToolsEvent<"Runtime.consoleAPICalled">
+	| DevToolsEvent<"Runtime.exceptionThrown">;
+
+export type InspectorProxyWorkerOutgoingRequestBody =
+	| { type: "error"; error: SerializedError }
+	| { type: "runtime-websocket-error"; error: SerializedError }
+	| { type: "debug-log"; args: Parameters<typeof console.debug> }
+	// Intercepted Chrome DevTools Protocol Messages
+	| { type: "load-network-resource"; url: string }; // responds with `url`'s contents
+
+export type SerializedError = {
+	message: string;
+	name?: string;
+	stack?: string | undefined;
+	cause?: unknown;
+};
+export function serialiseError(e: unknown): SerializedError {
+	if (e instanceof Error) {
+		return {
+			message: e.message,
+			name: e.name,
+			stack: e.stack,
+			cause: serialiseError(e.cause),
+		};
+	} else {
+		return { message: String(e) };
+	}
+}
+
+export type UrlOriginParts = Pick<URL, "protocol" | "hostname" | "port">;
+export type UrlOriginAndPathnameParts = Pick<
+	URL,
+	"protocol" | "hostname" | "port" | "pathname"
+>;
+
+export type ProxyData = {
+	userWorkerUrl: UrlOriginParts;
+	userWorkerInspectorUrl: UrlOriginAndPathnameParts;
+	userWorkerInnerUrlOverrides: Partial<UrlOriginParts>;
+	headers: Record<string, string>;
+	liveReload?: boolean;
+};
diff --git a/packages/wrangler/src/api/startDevWorker/index.ts b/packages/wrangler/src/api/startDevWorker/index.ts
new file mode 100644
index 000000000000..582a4c3206d1
--- /dev/null
+++ b/packages/wrangler/src/api/startDevWorker/index.ts
@@ -0,0 +1,12 @@
+import { DevEnv } from "./DevEnv";
+import type { StartDevWorkerOptions, DevWorker } from "./types";
+
+export { DevEnv };
+export * from "./types";
+export * from "./events";
+
+export function startWorker(options: StartDevWorkerOptions): DevWorker {
+	const devEnv = new DevEnv();
+
+	return devEnv.startWorker(options);
+}
diff --git a/packages/wrangler/src/api/startDevWorker/types.ts b/packages/wrangler/src/api/startDevWorker/types.ts
new file mode 100644
index 000000000000..b476d38dab4d
--- /dev/null
+++ b/packages/wrangler/src/api/startDevWorker/types.ts
@@ -0,0 +1,197 @@
+import type { RawConfig } from "../../config/config";
+import type { CfAccount } from "../../dev/create-worker-preview";
+import type { Json, Request, Response, DispatchFetch } from "miniflare";
+import type * as undici from "undici";
+
+export interface DevWorker {
+	ready: Promise<void>;
+	config?: StartDevWorkerOptions;
+	setOptions(options: StartDevWorkerOptions): void;
+	updateOptions(options: Partial<StartDevWorkerOptions>): void;
+	fetch: DispatchFetch;
+	scheduled(cron?: string): Promise<void>;
+	queue(queueName: string, ...messages: unknown[]): Promise<void>;
+	dispose(): Promise<void>;
+}
+
+export interface StartDevWorkerOptions {
+	/** The name of the worker. */
+	name: string;
+	/**
+	 * The javascript or typescript entry-point of the worker.
+	 * This is the `main` property of a wrangler.toml.
+	 * You can specify a file path or provide the contents directly.
+	 */
+	script: File<string>;
+	/** The configuration of the worker. */
+	config?: File<string | RawConfig> & { env?: string };
+	/** The compatibility date for the workerd runtime. */
+	compatibilityDate?: string;
+	/** The compatibility flags for the workerd runtime. */
+	compatibilityFlags?: string[];
+
+	/** The bindings available to the worker. The specified bindind type will be exposed to the worker on the `env` object under the same key. */
+	bindings?: Record<string, Binding>; // Type level constraint for bindings not sharing names
+	/** The triggers which will cause the worker's exported default handlers to be called. */
+	triggers?: Trigger[];
+
+	/** Options applying to (legacy) Worker Sites. Please consider using Cloudflare Pages. */
+	site?: {
+		path: string;
+		include?: string[];
+		exclude?: string[];
+	};
+
+	/** Options applying to the worker's build step. Applies to deploy and dev. */
+	build?: {
+		/** Whether the worker and its dependencies are bundled. Defaults to true. */
+		bundle?: boolean;
+		/** Specifies types of modules matched by globs. */
+		moduleRules?: ModuleRule[];
+		/** Replace global identifiers with constant expressions, e.g. ['debug=true','version="1.0.0"'] or { debug: 'true', version: '"1.0.0"' }. Only takes effect if bundle: true. */
+		define: string[] | Record<string, string>;
+		/** Whether the bundled worker is minified. Only takes effect if bundle: true. */
+		minify: boolean;
+		/** Options controlling a custom build step. */
+		custom: {
+			/** Custom shell command to run before bundling. Runs even if bundle. */
+			command: string;
+			/** The cwd to run the command in. */
+			workingDirectory?: string;
+			/** Filepath(s) to watch for changes. Upon changes, the command will be rerun. */
+			watch?: string | string[];
+		};
+	};
+
+	/** Options applying to the worker's development preview environment. */
+	dev?: {
+		/** Options applying to the worker's inspector server. */
+		inspector?: { hostname?: string; port?: number; secure?: boolean };
+		/** Whether the worker runs on the edge or locally. */
+		remote?: boolean;
+		/** Cloudflare Account credentials. Can be provided upfront or as a function which will be called only when required. */
+		auth?: Hook<CfAccount>;
+		/** Whether local storage (KV, Durable Objects, R2, D1, etc) is persisted. You can also specify the directory to persist data to. */
+		persist?: boolean | { path: string };
+		/** Controls which logs are logged 🤙. */
+		logLevel?: LogLevel;
+		/** Whether the worker server restarts upon source/config file changes. */
+		watch?: boolean;
+		/** Whether a script tag is inserted on text/html responses which will reload the page upon file changes. Defaults to false. */
+		liveReload?: boolean;
+
+		/** The local address to reach your worker. Applies to remote: true (remote mode) and remote: false (local mode). */
+		server?: { hostname?: string; port?: number; secure?: boolean }; // hostname: --ip, port: --port, secure: --local-protocol
+		/** Controls what request.url looks like inside the worker. */
+		urlOverrides?: { hostname?: string; secure?: boolean }; // hostname: --host (remote)/--local-upstream (local), port: doesn't make sense in remote/=== server.port in local, secure: --upstream-protocol
+		/** A hook for outbound fetch calls from within the worker. */
+		outboundService?: ServiceFetch;
+		/** An undici MockAgent to declaratively mock fetch calls to particular resources. */
+		mockFetch?: undici.MockAgent;
+	};
+}
+
+export type Hook<T, Args extends unknown[] = unknown[]> =
+	| T
+	| Promise<T>
+	| ((...args: Args) => T | Promise<T>);
+
+export type LogLevel = "debug" | "info" | "log" | "warn" | "error" | "none";
+
+export type File<Contents = string> =
+	| { path: string } // `path` resolved relative to cwd
+	| { contents: Contents; path?: string }; // `contents` used instead, `path` can be specified if needed e.g. for module resolution
+export type BinaryFile = File<Uint8Array>; // Note: Node's `Buffer`s are instances of `Uint8Array`
+
+export interface Location {
+	hostname?: string;
+	port?: number;
+	secure?: boolean; // Usually `https`, but could be `wss` for inspector
+}
+
+export type PatternRoute = {
+	pattern: string;
+} & (
+	| { pattern: string; customDomain: true }
+	| { pattern: string; zoneId: string; customDomain?: true; zoneName?: never }
+	| { pattern: string; zoneName: string; customDomain?: true; zoneId?: never }
+);
+export type WorkersDevRoute = { workersDev: true };
+export type Route = PatternRoute | WorkersDevRoute;
+
+export interface ModuleRule {
+	type:
+		| "ESModule"
+		| "CommonJS"
+		| "NodeJSCompat"
+		| "CompiledWasm"
+		| "Text"
+		| "Data";
+	include?: string[];
+	fallthrough?: boolean;
+}
+
+export type Trigger =
+	| { type: "workers.dev" }
+	| { type: "route"; pattern: string; customDomain: true }
+	| {
+			type: "route";
+			pattern: string;
+			zoneId: string;
+			customDomain?: true;
+			zoneName?: never;
+	  }
+	| {
+			type: "route";
+			pattern: string;
+			zoneName: string;
+			customDomain?: true;
+			zoneId?: never;
+	  }
+	| { type: "schedule"; schedule: string }
+	| {
+			type: "queue-consumer";
+			name: string;
+			maxBatchSize?: number;
+			maxBatchTimeout?: number;
+			maxRetries?: string;
+			deadLetterQueue?: string;
+	  };
+
+export type Binding =
+	| { type: "kv"; id: string }
+	| { type: "r2"; bucket_name: string }
+	| {
+			type: "d1";
+			/** The binding name used to refer to the D1 database in the worker. */
+			binding: string;
+			/** The name of this D1 database. */
+			database_name: string;
+			/** The UUID of this D1 database (not required). */
+			database_id: string;
+			/** The UUID of this D1 database for Wrangler Dev (if specified). */
+			preview_database_id?: string;
+			/** The name of the migrations table for this D1 database (defaults to 'd1_migrations'). */
+			migrations_table?: string;
+			/** The path to the directory of migrations for this D1 database (defaults to './migrations'). */
+			migrations_dir?: string;
+			/** Internal use only. */
+			database_internal_env?: string;
+	  }
+	| {
+			type: "durable-object";
+			className: string;
+			service?: ServiceDesignator;
+	  }
+	| { type: "service"; service: ServiceDesignator | ServiceFetch }
+	| { type: "queue-producer"; name: string }
+	| { type: "constellation"; project_id: string }
+	| { type: "var"; value: string | Json | Uint8Array }
+	| { type: `unsafe-${string}`; [key: string]: unknown };
+
+export type ServiceFetch = (request: Request) => Promise<Response>;
+
+export interface ServiceDesignator {
+	name: string;
+	env?: string;
+}
diff --git a/packages/wrangler/src/api/startDevWorker/utils.ts b/packages/wrangler/src/api/startDevWorker/utils.ts
new file mode 100644
index 000000000000..694f0405d310
--- /dev/null
+++ b/packages/wrangler/src/api/startDevWorker/utils.ts
@@ -0,0 +1,43 @@
+import assert from "node:assert";
+
+export type MaybePromise<T> = T | Promise<T>;
+export type DeferredPromise<T> = {
+	promise: Promise<T>;
+	resolve: (_: MaybePromise<T>) => void;
+	reject: (_: Error) => void;
+};
+
+export function createDeferred<T>(
+	previousDeferred?: DeferredPromise<T>
+): DeferredPromise<T> {
+	let resolve, reject;
+	const newPromise = new Promise<T>((_resolve, _reject) => {
+		resolve = _resolve;
+		reject = _reject;
+	});
+	assert(resolve);
+	assert(reject);
+
+	// if passed a previousDeferred, ensure it is resolved with the newDeferred
+	// so that await-ers of previousDeferred are now await-ing newDeferred
+	previousDeferred?.resolve(newPromise);
+
+	return {
+		promise: newPromise,
+		resolve,
+		reject,
+	};
+}
+
+export function assertNever(_value: never) {}
+
+export function urlFromParts(
+	parts: Partial<URL>,
+	base = "http://localhost"
+): URL {
+	const url = new URL(base);
+
+	Object.assign(url, parts);
+
+	return url;
+}
diff --git a/packages/wrangler/src/cli.ts b/packages/wrangler/src/cli.ts
index 0c062f57ddd0..13b570855001 100644
--- a/packages/wrangler/src/cli.ts
+++ b/packages/wrangler/src/cli.ts
@@ -1,6 +1,6 @@
 import process from "process";
 import { hideBin } from "yargs/helpers";
-import { unstable_dev, unstable_pages } from "./api";
+import { unstable_dev, unstable_pages, DevEnv as unstable_DevEnv } from "./api";
 import { FatalError } from "./errors";
 import { main } from ".";
 
@@ -24,5 +24,5 @@ if (typeof jest === "undefined" && require.main === module) {
  * It makes it possible to import wrangler from 'wrangler',
  * and call wrangler.unstable_dev().
  */
-export { unstable_dev, unstable_pages };
+export { unstable_dev, unstable_pages, unstable_DevEnv };
 export type { UnstableDevWorker, UnstableDevOptions };
diff --git a/packages/wrangler/src/dev.tsx b/packages/wrangler/src/dev.tsx
index 28bf91392a3d..7e1087a1ba79 100644
--- a/packages/wrangler/src/dev.tsx
+++ b/packages/wrangler/src/dev.tsx
@@ -26,6 +26,7 @@ import {
 	isLegacyEnv,
 	printWranglerBanner,
 } from "./index";
+import type { ProxyData } from "./api";
 import type { Config, Environment } from "./config";
 import type { Route, Rule } from "./config/environment";
 import type { CfWorkerInit, CfModule } from "./deployment-bundle/worker";
@@ -340,7 +341,7 @@ export type StartDevOptions = DevArguments &
 		forceLocal?: boolean;
 		disableDevRegistry?: boolean;
 		enablePagesAssetsServiceBinding?: EnablePagesAssetsServiceBindingOptions;
-		onReady?: (ip: string, port: number) => void;
+		onReady?: (ip: string, port: number, proxyData: ProxyData) => void;
 		showInteractiveDevSession?: boolean;
 	};
 
diff --git a/packages/wrangler/src/dev/dev.tsx b/packages/wrangler/src/dev/dev.tsx
index de32921899fb..9821bb5cd8db 100644
--- a/packages/wrangler/src/dev/dev.tsx
+++ b/packages/wrangler/src/dev/dev.tsx
@@ -6,11 +6,18 @@ import { watch } from "chokidar";
 import clipboardy from "clipboardy";
 import commandExists from "command-exists";
 import { Box, Text, useApp, useInput, useStdin } from "ink";
-import React, { useEffect, useRef, useState } from "react";
+import React, {
+	useCallback,
+	useEffect,
+	useMemo,
+	useRef,
+	useState,
+} from "react";
 import { useErrorHandler, withErrorBoundary } from "react-error-boundary";
 import onExit from "signal-exit";
 import tmp from "tmp-promise";
 import { fetch } from "undici";
+import { DevEnv } from "../api";
 import { runCustomBuild } from "../deployment-bundle/run-custom-build";
 import {
 	getBoundRegisteredWorkers,
@@ -25,6 +32,7 @@ import { Local } from "./local";
 import { Remote } from "./remote";
 import { useEsbuild } from "./use-esbuild";
 import { validateDevProps } from "./validate-dev-props";
+import type { ProxyData, StartDevWorkerOptions } from "../api";
 import type { Config } from "../config";
 import type { Route } from "../config/environment";
 import type { Entry } from "../deployment-bundle/entry";
@@ -32,6 +40,7 @@ import type { CfModule, CfWorkerInit } from "../deployment-bundle/worker";
 import type { WorkerRegistry } from "../dev-registry";
 import type { EnablePagesAssetsServiceBindingOptions } from "../miniflare-cli/types";
 import type { AssetPaths } from "../sites";
+import type { EsbuildBundle } from "./use-esbuild";
 
 /**
  * This hooks establishes a connection with the dev registry,
@@ -157,7 +166,9 @@ export type DevProps = {
 	host: string | undefined;
 	routes: Route[] | undefined;
 	inspect: boolean;
-	onReady: ((ip: string, port: number) => void) | undefined;
+	onReady:
+		| ((ip: string, port: number, proxyData: ProxyData) => void)
+		| undefined;
 	showInteractiveDevSession: boolean | undefined;
 	forceLocal: boolean | undefined;
 	enablePagesAssetsServiceBinding?: EnablePagesAssetsServiceBindingOptions;
@@ -203,12 +214,12 @@ function InteractiveDevSession(props: DevProps) {
 
 	useTunnel(toggles.tunnel);
 
-	const onReady = (newIp: string, newPort: number) => {
+	const onReady = (newIp: string, newPort: number, proxyData: ProxyData) => {
 		if (newIp !== props.initialIp || newPort !== props.initialPort) {
 			ip = newIp;
 			port = newPort;
 			if (props.onReady) {
-				props.onReady(newIp, newPort);
+				props.onReady(newIp, newPort, proxyData);
 			}
 		}
 	};
@@ -246,7 +257,55 @@ type DevSessionProps = DevProps & {
 };
 
 function DevSession(props: DevSessionProps) {
-	useCustomBuild(props.entry, props.build);
+	const [devEnv] = useState(() => new DevEnv());
+	useEffect(() => {
+		return () => {
+			void devEnv.teardown();
+		};
+	}, [devEnv]);
+	const startDevWorkerOptions: StartDevWorkerOptions = useMemo(
+		() => ({
+			name: props.name ?? "worker",
+			script: { contents: "" },
+			dev: {
+				server: {
+					hostname: props.initialIp,
+					port: props.initialPort,
+					secure: props.localProtocol === "https",
+				},
+				inspector: {
+					port: props.inspectorPort,
+				},
+				liveReload: props.liveReload,
+			},
+		}),
+		[
+			props.name,
+			props.initialIp,
+			props.initialPort,
+			props.localProtocol,
+			props.inspectorPort,
+			props.liveReload,
+		]
+	);
+	const onBundleStart = useCallback(() => {
+		devEnv.proxy.onBundleStart({
+			type: "bundleStart",
+			config: startDevWorkerOptions,
+		});
+	}, [devEnv, startDevWorkerOptions]);
+	const onReloadStart = useCallback(
+		(bundle: EsbuildBundle) => {
+			devEnv.proxy.onReloadStart({
+				type: "reloadStart",
+				config: startDevWorkerOptions,
+				bundle,
+			});
+		},
+		[devEnv, startDevWorkerOptions]
+	);
+
+	useCustomBuild(props.entry, props.build, onBundleStart);
 
 	const directory = useTmpDir();
 
@@ -256,6 +315,13 @@ function DevSession(props: DevSessionProps) {
 		props.bindings.durable_objects,
 		props.local ? "local" : "remote"
 	);
+	useEffect(() => {
+		// temp: fake these events by calling the handler directly
+		devEnv.proxy.onConfigUpdate({
+			type: "configUpdate",
+			config: startDevWorkerOptions,
+		});
+	}, [devEnv, startDevWorkerOptions]);
 
 	const bundle = useEsbuild({
 		entry: props.entry,
@@ -284,7 +350,11 @@ function DevSession(props: DevSessionProps) {
 		targetConsumer: "dev",
 		testScheduled: props.testScheduled ?? false,
 		experimentalLocal: props.experimentalLocal,
+		onBundleStart,
 	});
+	useEffect(() => {
+		if (bundle) onReloadStart(bundle);
+	}, [onReloadStart, bundle]);
 
 	// TODO(queues) support remote wrangler dev
 	if (
@@ -302,7 +372,11 @@ function DevSession(props: DevSessionProps) {
 		);
 	}
 
-	const announceAndOnReady: typeof props.onReady = (finalIp, finalPort) => {
+	const announceAndOnReady: typeof props.onReady = async (
+		finalIp,
+		finalPort,
+		proxyData
+	) => {
 		if (process.send) {
 			process.send(
 				JSON.stringify({
@@ -313,8 +387,24 @@ function DevSession(props: DevSessionProps) {
 			);
 		}
 
+		if (bundle) {
+			devEnv.proxy.onReloadComplete({
+				type: "reloadComplete",
+				config: startDevWorkerOptions,
+				bundle,
+				proxyData,
+			});
+		}
+
 		if (props.onReady) {
-			props.onReady(finalIp, finalPort);
+			// at this point (in the layers of onReady callbacks), we have devEnv in scope
+			// so rewrite the onReady params to be the ip/port of the ProxyWorker instead of the UserWorker
+			const { proxyWorker } = await devEnv.proxy.ready.promise;
+			const url = await proxyWorker.ready;
+			finalIp = url.hostname;
+			finalPort = parseInt(url.port);
+
+			props.onReady(finalIp, finalPort, proxyData);
 		}
 	};
 
@@ -329,8 +419,8 @@ function DevSession(props: DevSessionProps) {
 			bindings={props.bindings}
 			workerDefinitions={workerDefinitions}
 			assetPaths={props.assetPaths}
-			initialPort={props.initialPort}
-			initialIp={props.initialIp}
+			initialPort={0} // hard-code for userworker, DevEnv-ProxyWorker now uses this prop value
+			initialIp={"127.0.0.1"} // hard-code for userworker, DevEnv-ProxyWorker now uses this prop value
 			rules={props.rules}
 			inspectorPort={props.inspectorPort}
 			runtimeInspectorPort={props.runtimeInspectorPort}
@@ -338,7 +428,7 @@ function DevSession(props: DevSessionProps) {
 			liveReload={props.liveReload}
 			crons={props.crons}
 			queueConsumers={props.queueConsumers}
-			localProtocol={props.localProtocol}
+			localProtocol={"http"} // hard-code for userworker, DevEnv-ProxyWorker now uses this prop value
 			localUpstream={props.localUpstream}
 			inspect={props.inspect}
 			onReady={announceAndOnReady}
@@ -410,7 +500,11 @@ function useTmpDir(): string | undefined {
 	return directory;
 }
 
-function useCustomBuild(expectedEntry: Entry, build: Config["build"]): void {
+function useCustomBuild(
+	expectedEntry: Entry,
+	build: Config["build"],
+	onBundleStart: () => void
+): void {
 	useEffect(() => {
 		if (!build.command) return;
 		let watcher: ReturnType<typeof watch> | undefined;
@@ -423,6 +517,7 @@ function useCustomBuild(expectedEntry: Entry, build: Config["build"]): void {
 					path.relative(expectedEntry.directory, expectedEntry.file) || ".";
 				//TODO: we should buffer requests to the proxy until this completes
 				logger.log(`The file ${filePath} changed, restarting build...`);
+				onBundleStart();
 				runCustomBuild(expectedEntry.file, relativeFile, build).catch((err) => {
 					logger.error("Custom build failed:", err);
 				});
@@ -432,7 +527,7 @@ function useCustomBuild(expectedEntry: Entry, build: Config["build"]): void {
 		return () => {
 			void watcher?.close();
 		};
-	}, [build, expectedEntry]);
+	}, [build, expectedEntry, onBundleStart]);
 }
 
 function sleep(period: number) {
diff --git a/packages/wrangler/src/dev/inspect.ts b/packages/wrangler/src/dev/inspect.ts
index 1c5d0b156d6d..a7a956361bc3 100644
--- a/packages/wrangler/src/dev/inspect.ts
+++ b/packages/wrangler/src/dev/inspect.ts
@@ -1,617 +1,16 @@
 import { readFileSync } from "fs";
-import assert from "node:assert";
-import crypto from "node:crypto";
-import { createServer } from "node:http";
 import os from "node:os";
-import path from "node:path";
-import { URL, fileURLToPath, pathToFileURL } from "node:url";
+import { URL, fileURLToPath } from "node:url";
+import path from "path";
 import open from "open";
-import { useEffect, useRef, useState } from "react";
-import WebSocket, { WebSocketServer } from "ws";
-import { version } from "../../package.json";
+import {
+	isAllowedSourceMapPath,
+	isAllowedSourcePath,
+} from "../api/startDevWorker/bundle-allowed-paths";
 import { logger } from "../logger";
-import { getSourceMappedStack } from "../sourcemap";
-import { getAccessToken } from "../user/access";
-import { waitForPortToBeAvailable } from "./proxy";
-import type { SourceMapMetadata } from "../deployment-bundle/bundle";
+import type { EsbuildBundle } from "../dev/use-esbuild";
 import type Protocol from "devtools-protocol";
-import type { IncomingMessage, Server, ServerResponse } from "node:http";
 import type { RawSourceMap } from "source-map";
-import type { MessageEvent } from "ws";
-
-/**
- * `useInspector` is a hook for debugging Workers applications
- *  when using `wrangler dev`.
- *
- * When we start a session with `wrangler dev`, the Workers platform
- * also exposes a debugging websocket that implements the DevTools
- * Protocol. While we could just start up DevTools and connect to this
- * URL, that URL changes every time we make a change to the
- * worker, or when the session expires. Instead, we start up a proxy
- * server locally that acts as a bridge between the remote DevTools
- * server and the local DevTools instance. So whenever the URL changes,
- * we can can silently connect to it and keep the local DevTools instance
- * up to date. Further, we also intercept these messages and selectively
- * log them directly to the terminal (namely, calls to `console.<x>`,
- * and exceptions)
- */
-
-// TODO:
-// - clear devtools whenever we save changes to the worker
-// - clear devtools when we switch between local/remote modes
-// - handle more methods from console
-
-interface InspectorProps {
-	/**
-	 * The port that the local proxy server should listen on.
-	 */
-	port: number;
-	/**
-	 * The websocket URL exposed by Workers that the inspector should connect to.
-	 */
-	inspectorUrl: string | undefined;
-	/**
-	 * Whether console statements and exceptions should be logged to the terminal.
-	 * (We don't log them in local mode because they're already getting
-	 * logged to the terminal by nature of them actually running in node locally.)
-	 */
-	logToTerminal: boolean;
-	/**
-	 * Sourcemap path, so that stacktraces can be interpretted
-	 */
-	sourceMapPath: string | undefined;
-
-	sourceMapMetadata: SourceMapMetadata | undefined;
-
-	host?: string;
-
-	name?: string;
-}
-
-type LocalWebSocket = WebSocket & { isDevTools?: boolean };
-
-export default function useInspector(props: InspectorProps) {
-	/** A unique ID for this session. */
-	const inspectorIdRef = useRef(crypto.randomUUID());
-
-	/** The websocket from the devtools instance. */
-	const [localWebSocket, setLocalWebSocket] = useState<LocalWebSocket>();
-	/**  The websocket from the edge */
-	const [remoteWebSocket, setRemoteWebSocket] = useState<WebSocket>();
-
-	/**
-	 * Source maps included in `Debugger.scriptParsed` events sent by the current
-	 * `remoteWebSocket`. Each source map is given a unique ID which must be
-	 * included when fetching the source map to prevent arbitrary file access.
-	 * We assume each `Debugger.scriptParsed` event will trigger a single fetch
-	 * for the corresponding source map, so remove source maps after they've been
-	 * fetched once.
-	 */
-	const sourceMaps = useRef<Map<string /* id */, string /* filePath */>>();
-	sourceMaps.current ??= new Map();
-	/**
-	 * For source maps without `sourcesContent`, DevTools will request the
-	 * contents of source files too. Again, we'd like to prevent arbitrary file
-	 * access here, so only allow fetching sources if we've seen the path
-	 * when responding with a source map. We again assume each source will be
-	 * fetched once, so remove allowed sources after fetch.
-	 */
-	const allowedSourcePaths = useRef<Set<string /* filePath */>>();
-	allowedSourcePaths.current ??= new Set();
-
-	/**
-	 *  The local proxy server that acts as the bridge between
-	 *  the remote websocket and the local DevTools instance.
-	 */
-	const serverRef = useRef<Server>();
-	if (serverRef.current === undefined) {
-		serverRef.current = createServer(
-			(req: IncomingMessage, res: ServerResponse) => {
-				switch (req.url) {
-					// We implement a couple of well known end points
-					// that are queried for metadata by chrome://inspect
-					case "/json/version":
-						res.setHeader("Content-Type", "application/json");
-						res.end(
-							JSON.stringify({
-								Browser: `wrangler/v${version}`,
-								// TODO: (someday): The DevTools protocol should match that of Edge Worker.
-								// This could be exposed by the preview API.
-								"Protocol-Version": "1.3",
-							})
-						);
-						return;
-					case "/json":
-					case "/json/list":
-						{
-							res.setHeader("Content-Type", "application/json");
-							const localHost = `localhost:${props.port}/ws`;
-							const devtoolsFrontendUrl = `devtools://devtools/bundled/js_app.html?experiments=true&v8only=true&ws=${localHost}`;
-							const devtoolsFrontendUrlCompat = `devtools://devtools/bundled/inspector.html?experiments=true&v8only=true&ws=${localHost}`;
-							res.end(
-								JSON.stringify([
-									{
-										id: inspectorIdRef.current,
-										type: "node",
-										description: "workers",
-										webSocketDebuggerUrl: `ws://${localHost}`,
-										devtoolsFrontendUrl,
-										devtoolsFrontendUrlCompat,
-										// Below are fields that are visible in the DevTools UI.
-										title: "Cloudflare Worker",
-										faviconUrl: "https://workers.cloudflare.com/favicon.ico",
-										url:
-											"https://" +
-											(remoteWebSocket
-												? new URL(remoteWebSocket.url).host
-												: "workers.dev"),
-									},
-								])
-							);
-						}
-						return;
-					default:
-						break;
-				}
-			}
-		);
-	}
-	const server = serverRef.current;
-
-	/**
-	 * The websocket server that runs on top of the proxy server.
-	 */
-	const wsServerRef = useRef<WebSocketServer>();
-	if (wsServerRef.current === undefined) {
-		wsServerRef.current = new WebSocketServer({
-			server,
-			clientTracking: true,
-		});
-	}
-	const wsServer = wsServerRef.current;
-
-	wsServer.on("connection", (ws, req) => {
-		if (wsServer.clients.size > 1) {
-			/** We only want to have one active Devtools instance at a time. */
-			logger.error(
-				"Tried to open a new devtools window when a previous one was already open."
-			);
-			ws.close(1013, "Too many clients; only one can be connected at a time");
-		} else {
-			// Since Wrangler proxies the inspector, reloading Chrome DevTools won't trigger debugger initialisation events (because it's connecting to an extant session).
-			// This sends a `Debugger.disable` message to the remote when a new WebSocket connection is initialised,
-			// with the assumption that the new connection will shortly send a `Debugger.enable` event and trigger re-initialisation.
-			// The key initialisation messages that are needed are the `Debugger.scriptParsed events`.
-			remoteWebSocket?.send(
-				JSON.stringify({
-					// This number is arbitrary, and is chosen to be high so as not to conflict with messages that DevTools might actually send.
-					// For completeness, these options don't work: 0, -1, or Number.MAX_SAFE_INTEGER
-					id: 100_000_000,
-					method: "Debugger.disable",
-				})
-			);
-
-			// Our patched DevTools are hosted on a `https://` URL. These cannot
-			// access `file://` URLs, meaning local source maps cannot be fetched.
-			// To get around this, we can rewrite `Debugger.scriptParsed` events to
-			// include a special `worker:` scheme for source maps, and respond to
-			// `Network.loadNetworkResource` commands for these. Unfortunately, this
-			// breaks IDE's built-in debuggers (e.g. VSCode and WebStorm), so we only
-			// want to enable this transformation when we detect hosted DevTools has
-			// connected. We do this by looking at the WebSocket handshake headers:
-			//
-			// # DevTools
-			//
-			// Upgrade: websocket
-			// Host: localhost:9229
-			// (from Chrome)  User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/116.0.0.0 Safari/537.36
-			// (from Firefox) User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.15; rv:109.0) Gecko/20100101 Firefox/116.0
-			// Origin: https://devtools.devprod.cloudflare.dev
-			// ...
-			//
-			// # VSCode
-			//
-			// Upgrade: websocket
-			// Host: localhost
-			// ...
-			//
-			// # WebStorm
-			//
-			// Upgrade: websocket
-			// Host: localhost:9229
-			// Origin: http://localhost:9229
-			// ...
-			//
-			// From this, we could just use the presence of a `User-Agent` header to
-			// determine if DevTools connected, but VSCode/WebStorm could very well
-			// add this in future versions. We could also look for an `Origin` header
-			// matching the hosted DevTools URL, but this would prevent preview/local
-			// versions working. Instead, we look for a browser-like `User-Agent`.
-			const localWs: LocalWebSocket = ws;
-			localWs.isDevTools = /mozilla/i.test(req.headers["user-agent"] ?? "");
-
-			// As promised, save the created websocket in a state hook
-			setLocalWebSocket(localWs);
-
-			ws.addEventListener("close", () => {
-				// And cleanup when devtools closes
-				setLocalWebSocket(undefined);
-			});
-		}
-	});
-
-	/**
-	 * We start and stop the server in an effect to take advantage
-	 * of the component lifecycle. Convenient.
-	 */
-	useEffect(() => {
-		const abortController = new AbortController();
-		async function startInspectorProxy() {
-			await waitForPortToBeAvailable(props.port, {
-				retryPeriod: 200,
-				timeout: 2000,
-				abortSignal: abortController.signal,
-			});
-			server.listen(props.port);
-		}
-		startInspectorProxy().catch((err) => {
-			if ((err as { code: string }).code !== "ABORT_ERR") {
-				logger.error("Failed to start inspector:", err);
-			}
-		});
-		return () => {
-			server.close();
-			// Also disconnect any open websockets/devtools connections
-			wsServer.clients.forEach((ws) => ws.close());
-			wsServer.close();
-			abortController.abort();
-		};
-	}, [props.port, server, wsServer]);
-
-	/**
-	 * When connecting to the remote websocket, if we don't start either
-	 * the devtools instance or make an actual request to the worker in time,
-	 * then the connecting process can error out. When this happens, we
-	 * want to simply retry the connection. We use a state hook to trigger retries
-	 * of the effect that connects to the remote websocket.
-	 */
-	const [
-		retryRemoteWebSocketConnectionSigil,
-		setRetryRemoteWebSocketConnectionSigil,
-	] = useState<number>(0);
-	function retryRemoteWebSocketConnection() {
-		setRetryRemoteWebSocketConnectionSigil((x) => x + 1);
-	}
-
-	/** A simple incrementing id to attach to messages we send to devtools */
-	const messageCounterRef = useRef(1);
-
-	const cfAccessRef = useRef<string>();
-
-	useEffect(() => {
-		const run = async () => {
-			if (props.host && !cfAccessRef.current) {
-				const token = await getAccessToken(props.host);
-				cfAccessRef.current = token;
-			}
-		};
-		if (props.host) void run();
-	}, [props.host]);
-
-	// This effect tracks the connection to the remote websocket
-	// (stored in, no surprises here, `remoteWebSocket`)
-	useEffect(() => {
-		if (!props.inspectorUrl) {
-			return;
-		}
-
-		// The actual websocket instance
-		const ws = new WebSocket(props.inspectorUrl, {
-			headers: {
-				cookie: `CF_Authorization=${cfAccessRef.current}`,
-			},
-		});
-		setRemoteWebSocket(ws);
-
-		/**
-		 * A handle to the interval we run to keep the websocket alive
-		 */
-		let keepAliveInterval: NodeJS.Timer;
-
-		/**
-		 * Test if the websocket is closed
-		 */
-		function isClosed() {
-			return (
-				ws.readyState === WebSocket.CLOSED ||
-				ws.readyState === WebSocket.CLOSING
-			);
-		}
-
-		/**
-		 * Send a message to the remote websocket
-		 */
-		function send(event: Record<string, unknown>): void {
-			if (!isClosed()) {
-				ws.send(JSON.stringify(event));
-			}
-		}
-
-		/**
-		 * Closes the inspector.
-		 */
-		function close(): void {
-			if (!isClosed()) {
-				send({
-					method: "Runtime.discardConsoleEntries",
-					id: messageCounterRef.current++,
-				});
-				try {
-					ws.close();
-				} catch (err) {
-					// Closing before the websocket is ready will throw an error.
-				}
-			}
-		}
-
-		/**
-		 * Since we have a handle on the remote websocket, we can tap
-		 * into its events, and log any pertinent ones directly to
-		 * the terminal (which means you have insight into your worker
-		 * without having to open the devtools).
-		 */
-		if (props.logToTerminal) {
-			ws.addEventListener("message", async (event: MessageEvent) => {
-				if (typeof event.data === "string") {
-					const evt = JSON.parse(event.data);
-					if (evt.method === "Runtime.exceptionThrown") {
-						const params = evt.params as Protocol.Runtime.ExceptionThrownEvent;
-						const stack = getSourceMappedStack(params.exceptionDetails);
-						logger.error(params.exceptionDetails.text, stack);
-					}
-					if (evt.method === "Runtime.consoleAPICalled") {
-						logConsoleMessage(
-							evt.params as Protocol.Runtime.ConsoleAPICalledEvent
-						);
-					}
-				} else {
-					// We should never get here, but who know is 2022...
-					logger.error("Unrecognised devtools event:", event);
-				}
-			});
-		}
-
-		ws.addEventListener("open", () => {
-			send({ method: "Runtime.enable", id: messageCounterRef.current++ });
-			// TODO: This doesn't actually work. Must fix.
-			send({ method: "Network.enable", id: messageCounterRef.current++ });
-
-			keepAliveInterval = setInterval(() => {
-				send({
-					method: "Runtime.getIsolateId",
-					id: messageCounterRef.current++,
-				});
-			}, 10_000);
-		});
-
-		ws.on("unexpected-response", () => {
-			logger.log("Waiting for connection...");
-			/**
-			 * This usually means the worker is not "ready" yet
-			 * so we'll just retry the connection process
-			 */
-			retryRemoteWebSocketConnection();
-		});
-
-		ws.addEventListener("close", () => {
-			clearInterval(keepAliveInterval);
-		});
-
-		return () => {
-			// clean up! Let's first stop the heartbeat interval
-			clearInterval(keepAliveInterval);
-			// Then we'll send a message to the devtools instance to
-			// tell it to clear the console.
-			wsServer.clients.forEach((client) => {
-				// We could've used `localSocket` here, but
-				// then we would have had to add it to the effect
-				// change detection array, which would have made a
-				// bunch of other stuff complicated. So we'll just
-				// cycle through all of the server's connected clients
-				// (in practice, there should only be one or zero) and send
-				// the Log.clear message.
-				client.send(
-					JSON.stringify({
-						// TODO: This doesn't actually work. Must fix.
-						method: "Log.clear",
-						// we can disable the next eslint warning since
-						// we're referencing a ref that stays alive
-						// eslint-disable-next-line react-hooks/exhaustive-deps
-						id: messageCounterRef.current++,
-						params: {},
-					})
-				);
-			});
-			// Finally, we'll close the websocket
-			close();
-			// And we'll clear `remoteWebsocket`
-			setRemoteWebSocket(undefined);
-		};
-	}, [
-		props.inspectorUrl,
-		props.logToTerminal,
-		props.sourceMapPath,
-		wsServer,
-		// We use a state value as a sigil to trigger a retry of the
-		// remote websocket connection. It's not used inside the effect,
-		// so react-hooks/exhaustive-deps doesn't complain if it's not
-		// included in the dependency array. But its presence is critical,
-		// so do NOT remove it from the dependency list.
-		retryRemoteWebSocketConnectionSigil,
-	]);
-
-	/**
-	 * We want to make sure we don't lose any messages we receive from the
-	 * remote websocket before devtools connects. So we use a ref to buffer
-	 * messages, and flush them whenever devtools connects.
-	 */
-	const messageBufferRef = useRef<MessageEvent[]>([]);
-
-	// This effect tracks the state changes _between_ the local
-	// and remote websockets, and handles how messages flow between them.
-	useEffect(() => {
-		/**
-		 * This event listener is used for buffering messages from
-		 * the remote websocket, and flushing them
-		 * when the local websocket connects.
-		 */
-		function bufferMessageFromRemoteSocket(event: MessageEvent) {
-			messageBufferRef.current.push(event);
-			// TODO: maybe we should have a max limit on this?
-			// if so, we should be careful when removing messages
-			// from the front, because they could be critical for
-			// devtools (like execution context creation, etc)
-		}
-
-		if (remoteWebSocket && !localWebSocket) {
-			// The local websocket hasn't connected yet, so we'll
-			// buffer messages until it does.
-			remoteWebSocket.addEventListener(
-				"message",
-				bufferMessageFromRemoteSocket
-			);
-		}
-
-		/** Send a message from the local websocket to the remote websocket */
-		function sendMessageToRemoteWebSocket(event: MessageEvent) {
-			try {
-				// Intercept Network.loadNetworkResource to load sourcemaps
-				const message = JSON.parse(event.data as string);
-				if (message.method === "Network.loadNetworkResource") {
-					// `sourceMaps.current` and `allowSourcePaths.current` are always
-					// defined after `useRef()`
-					assert(sourceMaps.current !== undefined);
-					assert(allowedSourcePaths.current !== undefined);
-					const maybeText = maybeHandleNetworkLoadResource(
-						message.params.url,
-						sourceMaps.current,
-						allowedSourcePaths.current,
-						props.sourceMapMetadata?.tmpDir
-					);
-					if (maybeText !== undefined) {
-						sendMessageToLocalWebSocket({
-							data: JSON.stringify({
-								id: message.id,
-								result: { resource: { success: true, text: maybeText } },
-							}),
-						});
-						return;
-					}
-				}
-			} catch (e) {
-				logger.debug(e);
-				// Ignore errors, fallthrough to the remote inspector
-			}
-			try {
-				assert(
-					remoteWebSocket,
-					"Trying to send a message to an undefined `remoteWebSocket`"
-				);
-				remoteWebSocket.send(event.data);
-			} catch (e) {
-				if (
-					(e as Error).message !==
-					"WebSocket is not open: readyState 0 (CONNECTING)"
-				) {
-					/**
-					 * ^ this just means we haven't opened a websocket yet
-					 * usually happens until there's at least one request
-					 * which is weird, because we may miss something that
-					 * happens on the first request. Maybe we should buffer
-					 * these messages too?
-					 */
-					logger.error(e);
-				}
-			}
-		}
-
-		/** Send a message from the local websocket to the remote websocket */
-		function sendMessageToLocalWebSocket(event: Pick<MessageEvent, "data">) {
-			assert(
-				localWebSocket,
-				"Trying to send a message to an undefined `localWebSocket`"
-			);
-			try {
-				// Intercept Debugger.scriptParsed responses to inject URL schemes
-				if (localWebSocket.isDevTools) {
-					const message = JSON.parse(event.data as string);
-					if (message.method === "Debugger.scriptParsed") {
-						if (message.params.sourceMapURL) {
-							const url = new URL(
-								message.params.sourceMapURL,
-								message.params.url
-							);
-							if (url.protocol === "file:") {
-								// `sourceMaps.current` is always defined after `useRef()`
-								assert(sourceMaps.current !== undefined);
-								const name = props.name ?? "worker";
-								const id = crypto.randomUUID();
-								sourceMaps.current.set(id, fileURLToPath(url));
-								// The hostname of this URL will show up next to the cloud icon
-								// under authored sources, so use the worker name.
-								message.params.sourceMapURL = `worker://${name}/${id}`;
-								localWebSocket.send(JSON.stringify(message));
-								return;
-							}
-						}
-					}
-				}
-			} catch (e) {
-				logger.debug(e);
-				// Ignore errors, fallthrough to the local websocket
-			}
-
-			localWebSocket.send(event.data);
-		}
-
-		if (localWebSocket && remoteWebSocket) {
-			// Both the remote and local websockets are connected, so let's
-			// start sending messages between them.
-			localWebSocket.addEventListener("message", sendMessageToRemoteWebSocket);
-			remoteWebSocket.addEventListener("message", sendMessageToLocalWebSocket);
-
-			// Also, let's flush any buffered messages
-			messageBufferRef.current.forEach(sendMessageToLocalWebSocket);
-			messageBufferRef.current = [];
-		}
-
-		return () => {
-			// Cleanup like good citizens
-			if (remoteWebSocket) {
-				remoteWebSocket.removeEventListener(
-					"message",
-					bufferMessageFromRemoteSocket
-				);
-				remoteWebSocket.removeEventListener(
-					"message",
-					sendMessageToLocalWebSocket
-				);
-			}
-			if (localWebSocket) {
-				localWebSocket.removeEventListener(
-					"message",
-					sendMessageToRemoteWebSocket
-				);
-			}
-		};
-	}, [
-		localWebSocket,
-		remoteWebSocket,
-		props.name,
-		props.sourceMapMetadata,
-		props.sourceMapPath,
-	]);
-}
 
 /**
  * This function converts a message serialized as a devtools event
@@ -646,7 +45,9 @@ const mapConsoleAPIMessageTypeToConsoleMethod: {
 	endGroup: "groupEnd",
 };
 
-function logConsoleMessage(evt: Protocol.Runtime.ConsoleAPICalledEvent): void {
+export function logConsoleMessage(
+	evt: Protocol.Runtime.ConsoleAPICalledEvent
+): void {
 	const args: string[] = [];
 	for (const ro of evt.args) {
 		switch (ro.type) {
@@ -786,28 +187,20 @@ function logConsoleMessage(evt: Protocol.Runtime.ConsoleAPICalledEvent): void {
 	}
 }
 
-function maybeHandleNetworkLoadResource(
+export function maybeHandleNetworkLoadResource(
 	url: string | URL,
-	sourceMaps: Map<string /* id */, string /* filePath */>,
-	allowedSourcePaths: Set<string /* filePath */>,
+	bundle: EsbuildBundle,
 	tmpDir?: string
 ): string | undefined {
 	if (typeof url === "string") url = new URL(url);
-	if (url.protocol !== "worker:") return;
-
-	// Check whether we have a source map matching this ID...
-	const id = url.pathname.substring(1);
-	const maybeSourceMapFilePath = sourceMaps.get(id);
-	if (maybeSourceMapFilePath !== undefined) {
-		// Assume DevTools fetches each source map once (after receipt of the
-		// `Debugger.scriptParsed` event), and remove it from the map to prevent
-		// unbounded growth.
-		sourceMaps.delete(id);
+	if (url.protocol !== "file:") return;
+	const filePath = fileURLToPath(url);
 
+	if (isAllowedSourceMapPath(bundle, filePath)) {
 		// Read and parse the source map
 		const sourceMap: RawSourceMap & {
 			x_google_ignoreList?: number[];
-		} = JSON.parse(readFileSync(maybeSourceMapFilePath, "utf-8"));
+		} = JSON.parse(readFileSync(filePath, "utf-8"));
 
 		// See https://docs.google.com/document/d/1U1RGAehQwRypUTovF1KRlpiOFze0b-_2gc6fAH0KY0k/edit#heading=h.mt2g20loc2ct
 		// The above link documents the `x_google_ignoreList property`, which is
@@ -827,28 +220,10 @@ function maybeHandleNetworkLoadResource(
 			})
 			.filter((i): i is number => i !== undefined);
 
-		// If this source map doesn't have inline sources, DevTools will attempt to
-		// make requests for them, so add all sources paths in this map to the
-		// allowed set.
-		if (!sourceMap.sourcesContent) {
-			const fileURL = pathToFileURL(maybeSourceMapFilePath);
-			for (const source of sourceMap.sources) {
-				const sourcePath = fileURLToPath(new URL(source, fileURL));
-				allowedSourcePaths.add(sourcePath);
-			}
-		}
-
 		return JSON.stringify(sourceMap);
 	}
 
-	// Otherwise, assume this is a request for a source file. Resolve the ID
-	// relative to the current working directory, and check if this is allowed.
-	const filePath = path.resolve(id);
-	if (allowedSourcePaths.has(filePath)) {
-		// Assume DevTools fetches each source once (after receipt of the
-		// `Network.loadNetworkResource` command response for the source map), and
-		// remove it from the set to prevent unbounded growth.
-		allowedSourcePaths.delete(filePath);
+	if (isAllowedSourcePath(bundle, filePath)) {
 		return readFileSync(filePath, "utf-8");
 	}
 }
diff --git a/packages/wrangler/src/dev/local.tsx b/packages/wrangler/src/dev/local.tsx
index 5242ee5a7f48..da51ec68c0a0 100644
--- a/packages/wrangler/src/dev/local.tsx
+++ b/packages/wrangler/src/dev/local.tsx
@@ -1,12 +1,12 @@
 import assert from "node:assert";
 import chalk from "chalk";
-import { useEffect, useRef, useState } from "react";
+import { useEffect, useRef } from "react";
 import onExit from "signal-exit";
-import { fetch } from "undici";
 import { registerWorker } from "../dev-registry";
 import { logger } from "../logger";
-import useInspector from "./inspect";
 import { MiniflareServer } from "./miniflare";
+import { DEFAULT_WORKER_NAME } from "./miniflare";
+import type { ProxyData } from "../api";
 import type { Config } from "../config";
 import type { CfWorkerInit, CfScriptFormat } from "../deployment-bundle/worker";
 import type { WorkerRegistry } from "../dev-registry";
@@ -37,7 +37,9 @@ export interface LocalProps {
 	localProtocol: "http" | "https";
 	localUpstream: string | undefined;
 	inspect: boolean;
-	onReady: ((ip: string, port: number) => void) | undefined;
+	onReady:
+		| ((ip: string, port: number, proxyData: ProxyData) => void)
+		| undefined;
 	enablePagesAssetsServiceBinding?: EnablePagesAssetsServiceBindingOptions;
 	testScheduled?: boolean;
 	sourceMapPath: string | undefined;
@@ -115,36 +117,15 @@ export function maybeRegisterLocalWorker(event: ReloadedEvent, name?: string) {
 	});
 }
 
-// https://chromedevtools.github.io/devtools-protocol/#endpoints
-interface InspectorWebSocketTarget {
-	id: string;
-	title: string;
-	type: "node";
-	description: string;
-	webSocketDebuggerUrl: string;
-	devtoolsFrontendUrl: string;
-	devtoolsFrontendUrlCompat: string;
-	faviconUrl: string;
-	url: string;
-}
-
 export function Local(props: LocalProps) {
-	const { inspectorUrl } = useLocalWorker(props);
-	useInspector({
-		inspectorUrl,
-		port: props.inspectorPort,
-		logToTerminal: true,
-		sourceMapPath: props.sourceMapPath,
-		name: props.name,
-		sourceMapMetadata: props.bundle?.sourceMapMetadata,
-	});
+	useLocalWorker(props);
+
 	return null;
 }
 
 function useLocalWorker(props: LocalProps) {
 	const miniflareServerRef = useRef<MiniflareServer>();
 	const removeMiniflareServerExitListenerRef = useRef<() => void>();
-	const [inspectorUrl, setInspectorUrl] = useState<string | undefined>();
 
 	useEffect(() => {
 		if (props.bindings.services && props.bindings.services.length > 0) {
@@ -177,33 +158,32 @@ function useLocalWorker(props: LocalProps) {
 			miniflareServerRef.current = server = newServer;
 			server.addEventListener("reloaded", async (event) => {
 				await maybeRegisterLocalWorker(event, props.name);
-				props.onReady?.(event.url.hostname, parseInt(event.url.port));
 
-				try {
-					// Fetch the inspector JSON response from the DevTools Inspector protocol
-					const jsonUrl = `http://127.0.0.1:${props.runtimeInspectorPort}/json`;
-					const res = await fetch(jsonUrl);
-					const body = (await res.json()) as InspectorWebSocketTarget[];
-					const debuggerUrl = body?.find(({ id }) =>
-						id.startsWith("core:user")
-					)?.webSocketDebuggerUrl;
-					if (debuggerUrl === undefined) {
-						setInspectorUrl(undefined);
-					} else {
-						const url = new URL(debuggerUrl);
-						// Force inspector URL to be different on each reload so `useEffect`
-						// in `useInspector` is re-run to connect to newly restarted
-						// `workerd` server when updating options. Can't use a query param
-						// here as that seems to cause an infinite connection loop, can't
-						// use a hash as those are forbidden by `ws`, so username it is.
-						url.username = `${Date.now()}-${Math.floor(
-							Math.random() * Number.MAX_SAFE_INTEGER
-						)}`;
-						setInspectorUrl(url.toString());
-					}
-				} catch (error: unknown) {
-					logger.error("Error attempting to retrieve debugger URL:", error);
-				}
+				const proxyData: ProxyData = {
+					userWorkerUrl: {
+						protocol: event.url.protocol,
+						hostname: event.url.hostname,
+						port: event.url.port,
+					},
+					userWorkerInspectorUrl: {
+						protocol: "ws:",
+						hostname: "127.0.0.1",
+						port: props.runtimeInspectorPort.toString(),
+						pathname: `/core:user:${props.name ?? DEFAULT_WORKER_NAME}`,
+					},
+					userWorkerInnerUrlOverrides: {
+						protocol: props.localProtocol,
+						hostname: props.localUpstream,
+					},
+					headers: {}, // no headers needed in local-mode
+					liveReload: props.liveReload,
+				};
+
+				props.onReady?.(
+					event.url.hostname,
+					parseInt(event.url.port),
+					proxyData
+				);
 			});
 			server.addEventListener("error", ({ error }) => {
 				if (
@@ -254,6 +234,4 @@ function useLocalWorker(props: LocalProps) {
 		},
 		[]
 	);
-
-	return { inspectorUrl };
 }
diff --git a/packages/wrangler/src/dev/miniflare.ts b/packages/wrangler/src/dev/miniflare.ts
index 5808a735d116..7ea00de63bf1 100644
--- a/packages/wrangler/src/dev/miniflare.ts
+++ b/packages/wrangler/src/dev/miniflare.ts
@@ -1,14 +1,7 @@
 import assert from "node:assert";
 import { realpathSync } from "node:fs";
 import path from "node:path";
-import {
-	Log,
-	LogLevel,
-	NoOpLog,
-	TypedEventTarget,
-	Mutex,
-	Miniflare,
-} from "miniflare";
+import { Log, LogLevel, TypedEventTarget, Mutex, Miniflare } from "miniflare";
 import { ModuleTypeToRuleType } from "../deployment-bundle/module-collection";
 import { withSourceURLs } from "../deployment-bundle/source-url";
 import { getHttpsOptions } from "../https-options";
@@ -112,7 +105,7 @@ export interface ConfigBundle {
 	serviceBindings: Record<string, (_request: Request) => Promise<Response>>;
 }
 
-class WranglerLog extends Log {
+export class WranglerLog extends Log {
 	#warnedCompatibilityDateFallback = false;
 
 	info(message: string) {
@@ -139,21 +132,43 @@ class WranglerLog extends Log {
 		}
 		super.warn(message);
 	}
+
+	// TODO: remove this override when miniflare is fixed https://jira.cfdata.org/browse/DEVX-983
+	error(message: Error) {
+		try {
+			super.error(message);
+		} catch {
+			// miniflare shouldn't throw in logger.error
+			// for now, ignore errors from the logger
+		}
+	}
 }
 
+export const DEFAULT_WORKER_NAME = "worker";
 function getName(config: ConfigBundle) {
-	return config.name ?? "worker";
+	return config.name ?? DEFAULT_WORKER_NAME;
 }
 const IDENTIFIER_UNSAFE_REGEXP = /[^a-zA-Z0-9_$]/g;
 function getIdentifier(name: string) {
 	return name.replace(IDENTIFIER_UNSAFE_REGEXP, "_");
 }
 
+export function castLogLevel(level: LoggerLevel): LogLevel {
+	let key = level.toUpperCase() as Uppercase<LoggerLevel>;
+	if (key === "LOG") key = "INFO";
+
+	return LogLevel[key];
+}
+
 function buildLog(): Log {
-	let level = logger.loggerLevel.toUpperCase() as Uppercase<LoggerLevel>;
-	if (level === "LOG") level = "INFO";
-	const logLevel = LogLevel[level];
-	return logLevel === LogLevel.NONE ? new NoOpLog() : new WranglerLog(logLevel);
+	let level = castLogLevel(logger.loggerLevel);
+
+	// if we're in DEBUG or VERBOSE mode, clamp logLevel to WARN -- ie. don't show request logs for user worker
+	if (level <= LogLevel.DEBUG) {
+		level = Math.min(level, LogLevel.WARN);
+	}
+
+	return new WranglerLog(level, { prefix: "wrangler-UserWorker" });
 }
 
 async function buildSourceOptions(
diff --git a/packages/wrangler/src/dev/remote.tsx b/packages/wrangler/src/dev/remote.tsx
index 786a59b6159b..3009505521ea 100644
--- a/packages/wrangler/src/dev/remote.tsx
+++ b/packages/wrangler/src/dev/remote.tsx
@@ -18,8 +18,8 @@ import {
 	createPreviewSession,
 	createWorkerPreview,
 } from "./create-worker-preview";
-import useInspector from "./inspect";
-import { startPreviewServer, usePreviewServer } from "./proxy";
+import { startPreviewServer } from "./proxy";
+import type { ProxyData } from "../api";
 import type { Route } from "../config/environment";
 import type {
 	CfModule,
@@ -57,7 +57,9 @@ interface RemoteProps {
 	zone: string | undefined;
 	host: string | undefined;
 	routes: Route[] | undefined;
-	onReady?: ((ip: string, port: number) => void) | undefined;
+	onReady?:
+		| ((ip: string, port: number, proxyData: ProxyData) => void)
+		| undefined;
 	sourceMapPath: string | undefined;
 	sendMetrics: boolean | undefined;
 }
@@ -67,7 +69,7 @@ export function Remote(props: RemoteProps) {
 	const accountChoicesRef = useRef<Promise<ChooseAccountItem[]>>();
 	const [accountChoices, setAccountChoices] = useState<ChooseAccountItem[]>();
 
-	const previewToken = useWorker({
+	useWorker({
 		name: props.name,
 		bundle: props.bundle,
 		format: props.format,
@@ -89,29 +91,6 @@ export function Remote(props: RemoteProps) {
 		port: props.port,
 	});
 
-	usePreviewServer({
-		previewToken,
-		assetDirectory: props.isWorkersSite
-			? undefined
-			: props.assetPaths?.assetDirectory,
-		localProtocol: props.localProtocol,
-		localPort: props.port,
-		ip: props.ip,
-	});
-
-	useInspector({
-		inspectorUrl:
-			props.inspect && previewToken
-				? previewToken.inspectorUrl.href
-				: undefined,
-		port: props.inspectorPort,
-		logToTerminal: true,
-		sourceMapPath: props.sourceMapPath,
-		host: previewToken?.host,
-		name: props.name,
-		sourceMapMetadata: props.bundle?.sourceMapMetadata,
-	});
-
 	const errorHandler = useErrorHandler();
 
 	// This effect handles the async step of fetching the available accounts for the current user.
@@ -173,7 +152,9 @@ interface RemoteWorkerProps {
 	zone: string | undefined;
 	host: string | undefined;
 	routes: Route[] | undefined;
-	onReady: ((ip: string, port: number) => void) | undefined;
+	onReady:
+		| ((ip: string, port: number, proxyData: ProxyData) => void)
+		| undefined;
 	sendMetrics: boolean | undefined;
 	port: number;
 }
@@ -324,7 +305,24 @@ export function useWorker(
 				});
 			}
 			*/
-			onReady?.(props.host || "localhost", props.port);
+			const proxyData: ProxyData = {
+				userWorkerUrl: {
+					protocol: "https:",
+					hostname: workerPreviewToken.host,
+					port: "443",
+				},
+				userWorkerInspectorUrl: {
+					protocol: workerPreviewToken.inspectorUrl.protocol,
+					hostname: workerPreviewToken.inspectorUrl.hostname,
+					port: workerPreviewToken.inspectorUrl.port.toString(),
+					pathname: workerPreviewToken.inspectorUrl.pathname,
+				},
+				userWorkerInnerUrlOverrides: {}, // we did not permit overriding request.url in remote mode
+				headers: { "cf-workers-preview-token": workerPreviewToken.value },
+				liveReload: false, // liveReload currently disabled in remote-mode, but will be supported with startDevWorker
+			};
+
+			onReady?.(props.host || "localhost", props.port, proxyData);
 		}
 		start().catch((err) => {
 			// we want to log the error, but not end the process
@@ -418,7 +416,26 @@ export async function startRemoteServer(props: RemoteProps) {
 		localProtocol: props.localProtocol,
 		localPort: props.port,
 		ip: props.ip,
-		onReady: props.onReady,
+		onReady: (ip, port) => {
+			const proxyData: ProxyData = {
+				userWorkerUrl: {
+					protocol: "https:",
+					hostname: previewToken.host,
+					port: "443",
+				},
+				userWorkerInspectorUrl: {
+					protocol: previewToken.inspectorUrl.protocol,
+					hostname: previewToken.inspectorUrl.hostname,
+					port: previewToken.inspectorUrl.port.toString(),
+					pathname: previewToken.inspectorUrl.pathname,
+				},
+				userWorkerInnerUrlOverrides: {}, // we did not permit overriding request.url in remote mode
+				headers: { "cf-workers-preview-token": previewToken.value },
+				liveReload: false, // liveReload currently disabled in remote-mode, but will be supported with startDevWorker
+			};
+
+			props.onReady?.(ip, port, proxyData);
+		},
 	});
 	if (!previewServer) {
 		throw logger.error("Failed to start remote server");
diff --git a/packages/wrangler/src/dev/start-server.ts b/packages/wrangler/src/dev/start-server.ts
index eab09d66c1a4..24a64eef4060 100644
--- a/packages/wrangler/src/dev/start-server.ts
+++ b/packages/wrangler/src/dev/start-server.ts
@@ -4,6 +4,7 @@ import * as util from "node:util";
 import chalk from "chalk";
 import onExit from "signal-exit";
 import tmp from "tmp-promise";
+import { DevEnv, type StartDevWorkerOptions } from "../api";
 import { bundleWorker } from "../deployment-bundle/bundle";
 import { getBundleType } from "../deployment-bundle/bundle-type";
 import { dedupeModulesByName } from "../deployment-bundle/dedupe-modules";
@@ -21,9 +22,10 @@ import {
 } from "../dev-registry";
 import { logger } from "../logger";
 import { localPropsToConfigBundle, maybeRegisterLocalWorker } from "./local";
-import { MiniflareServer } from "./miniflare";
+import { DEFAULT_WORKER_NAME, MiniflareServer } from "./miniflare";
 import { startRemoteServer } from "./remote";
 import { validateDevProps } from "./validate-dev-props";
+import type { ProxyData } from "../api";
 import type { Config } from "../config";
 import type { DurableObjectBindings } from "../config/environment";
 import type { Entry } from "../deployment-bundle/entry";
@@ -80,6 +82,38 @@ export async function startDevServer(
 		}
 	}
 
+	const devEnv = new DevEnv();
+	const startDevWorkerOptions: StartDevWorkerOptions = {
+		name: props.name ?? "worker",
+		script: { contents: "" },
+		dev: {
+			server: {
+				hostname: props.initialIp,
+				port: props.initialPort,
+				secure: props.localProtocol === "https",
+			},
+			inspector: {
+				port: props.inspectorPort,
+			},
+			urlOverrides: {
+				secure: props.localProtocol === "https",
+				hostname: props.localUpstream,
+			},
+			liveReload: props.liveReload,
+			remote: !props.local,
+		},
+	};
+
+	// temp: fake these events by calling the handler directly
+	devEnv.proxy.onConfigUpdate({
+		type: "configUpdate",
+		config: startDevWorkerOptions,
+	});
+	devEnv.proxy.onBundleStart({
+		type: "bundleStart",
+		config: startDevWorkerOptions,
+	});
+
 	//implement a react-free version of useEsbuild
 	const bundle = await runEsbuild({
 		entry: props.entry,
@@ -108,6 +142,13 @@ export async function startDevServer(
 	});
 
 	if (props.local) {
+		// temp: fake these events by calling the handler directly
+		devEnv.proxy.onReloadStart({
+			type: "reloadStart",
+			config: startDevWorkerOptions,
+			bundle,
+		});
+
 		const { stop } = await startLocalServer({
 			name: props.name,
 			bundle: bundle,
@@ -127,8 +168,25 @@ export async function startDevServer(
 			queueConsumers: props.queueConsumers,
 			localProtocol: props.localProtocol,
 			localUpstream: props.localUpstream,
-			inspect: props.inspect,
-			onReady: props.onReady,
+			inspect: true,
+			onReady: async (ip, port, proxyData) => {
+				// at this point (in the layers of onReady callbacks), we have devEnv in scope
+				// so rewrite the onReady params to be the ip/port of the ProxyWorker instead of the UserWorker
+				const { proxyWorker } = await devEnv.proxy.ready.promise;
+				const url = await proxyWorker.ready;
+				ip = url.hostname;
+				port = parseInt(url.port);
+
+				props.onReady?.(ip, port, proxyData);
+
+				// temp: fake these events by calling the handler directly
+				devEnv.proxy.onReloadComplete({
+					type: "reloadComplete",
+					config: startDevWorkerOptions,
+					bundle,
+					proxyData,
+				});
+			},
 			enablePagesAssetsServiceBinding: props.enablePagesAssetsServiceBinding,
 			usageModel: props.usageModel,
 			workerDefinitions,
@@ -139,6 +197,7 @@ export async function startDevServer(
 			stop: async () => {
 				stop();
 				await stopWorkerRegistry();
+				await devEnv.teardown();
 			},
 			// TODO: inspectorUrl,
 		};
@@ -164,7 +223,24 @@ export async function startDevServer(
 			zone: props.zone,
 			host: props.host,
 			routes: props.routes,
-			onReady: props.onReady,
+			onReady: async (ip, port, proxyData) => {
+				// at this point (in the layers of onReady callbacks), we have devEnv in scope
+				// so rewrite the onReady params to be the ip/port of the ProxyWorker instead of the UserWorker
+				const { proxyWorker } = await devEnv.proxy.ready.promise;
+				const url = await proxyWorker.ready;
+				ip = url.hostname;
+				port = parseInt(url.port);
+
+				props.onReady?.(ip, port, proxyData);
+
+				// temp: fake these events by calling the handler directly
+				devEnv.proxy.onReloadComplete({
+					type: "reloadComplete",
+					config: startDevWorkerOptions,
+					bundle,
+					proxyData,
+				});
+			},
 			sourceMapPath: bundle?.sourceMapPath,
 			sendMetrics: props.sendMetrics,
 		});
@@ -172,6 +248,7 @@ export async function startDevServer(
 			stop: async () => {
 				stop();
 				await stopWorkerRegistry();
+				await devEnv.teardown();
 			},
 			// TODO: inspectorUrl,
 		};
@@ -214,7 +291,7 @@ async function runEsbuild({
 	doBindings,
 }: {
 	entry: Entry;
-	destination: string | undefined;
+	destination: string;
 	jsxFactory: string | undefined;
 	jsxFragment: string | undefined;
 	processEntrypoint: boolean;
@@ -234,9 +311,7 @@ async function runEsbuild({
 	testScheduled?: boolean;
 	local: boolean;
 	doBindings: DurableObjectBindings;
-}): Promise<EsbuildBundle | undefined> {
-	if (!destination) return;
-
+}): Promise<EsbuildBundle> {
 	if (noBundle) {
 		additionalModules = dedupeModulesByName([
 			...((await doFindAdditionalModules(entry, rules)) ?? []),
@@ -321,7 +396,28 @@ export async function startLocalServer(props: LocalProps) {
 		const server = new MiniflareServer();
 		server.addEventListener("reloaded", async (event) => {
 			await maybeRegisterLocalWorker(event, props.name);
-			props.onReady?.(event.url.hostname, parseInt(event.url.port));
+
+			const proxyData: ProxyData = {
+				userWorkerUrl: {
+					protocol: event.url.protocol,
+					hostname: event.url.hostname,
+					port: event.url.port,
+				},
+				userWorkerInspectorUrl: {
+					protocol: "ws:",
+					hostname: "127.0.0.1",
+					port: props.runtimeInspectorPort.toString(),
+					pathname: `/core:user:${props.name ?? DEFAULT_WORKER_NAME}`,
+				},
+				userWorkerInnerUrlOverrides: {
+					protocol: props.localProtocol,
+					hostname: props.localUpstream,
+				},
+				headers: {},
+				liveReload: props.liveReload,
+			};
+
+			props.onReady?.(event.url.hostname, parseInt(event.url.port), proxyData);
 			// Note `unstable_dev` doesn't do anything with the inspector URL yet
 			resolve({
 				stop: () => {
diff --git a/packages/wrangler/src/dev/use-esbuild.ts b/packages/wrangler/src/dev/use-esbuild.ts
index 808e9079b38e..f8e50f1d67d7 100644
--- a/packages/wrangler/src/dev/use-esbuild.ts
+++ b/packages/wrangler/src/dev/use-esbuild.ts
@@ -56,6 +56,7 @@ export function useEsbuild({
 	targetConsumer,
 	testScheduled,
 	experimentalLocal,
+	onBundleStart,
 }: {
 	entry: Entry;
 	destination: string | undefined;
@@ -80,6 +81,7 @@ export function useEsbuild({
 	targetConsumer: "dev" | "deploy";
 	testScheduled: boolean;
 	experimentalLocal: boolean | undefined;
+	onBundleStart: () => void;
 }): EsbuildBundle | undefined {
 	const [bundle, setBundle] = useState<EsbuildBundle>();
 	const { exit } = useApp();
@@ -129,6 +131,9 @@ export function useEsbuild({
 		const onEnd = {
 			name: "on-end",
 			setup(b: PluginBuild) {
+				b.onStart(() => {
+					onBundleStart();
+				});
 				b.onEnd(async (result: BuildResult) => {
 					const errors = result.errors;
 					const warnings = result.warnings;
@@ -248,6 +253,7 @@ export function useEsbuild({
 		targetConsumer,
 		testScheduled,
 		experimentalLocal,
+		onBundleStart,
 	]);
 	return bundle;
 }
diff --git a/packages/wrangler/src/https-options.ts b/packages/wrangler/src/https-options.ts
index 0fb86f4fea78..58e4836533d7 100644
--- a/packages/wrangler/src/https-options.ts
+++ b/packages/wrangler/src/https-options.ts
@@ -1,7 +1,6 @@
 import * as fs from "node:fs";
 import os from "node:os";
 import * as path from "node:path";
-import { promisify } from "node:util";
 import { getGlobalWranglerConfigPath } from "./global-wrangler-config-path";
 import { logger } from "./logger";
 import type { Attributes, Options } from "selfsigned";
@@ -17,7 +16,7 @@ const ONE_DAY_IN_MS = 86400000;
  *
  * The certificates are self-signed and generated locally, and cached in the `CERT_ROOT` directory.
  */
-export async function getHttpsOptions() {
+export function getHttpsOptions() {
 	const certDirectory = path.join(getGlobalWranglerConfigPath(), "local-cert");
 	const keyPath = path.join(certDirectory, "key.pem");
 	const certPath = path.join(certDirectory, "cert.pem");
@@ -29,7 +28,7 @@ export async function getHttpsOptions() {
 
 	if (regenerate) {
 		logger.log("Generating new self-signed certificate...");
-		const { key, cert } = await generateCertificate();
+		const { key, cert } = generateCertificate();
 		try {
 			// Write certificate files so we can reuse them later.
 			fs.mkdirSync(certDirectory, { recursive: true });
@@ -67,14 +66,13 @@ function hasCertificateExpired(keyPath: string, certPath: string): boolean {
 /**
  * Generate a new self-signed certificate and cache it in `CERT_ROOT` directory.
  */
-async function generateCertificate() {
+function generateCertificate() {
 	// `selfsigned` imports `node-forge`, which is a pretty big library.
 	// To reduce startup time, only load this dynamically when needed.
 	// eslint-disable-next-line @typescript-eslint/consistent-type-imports
-	const generate: typeof import("selfsigned").generate = promisify(
+	const generate: typeof import("selfsigned").generate =
 		// eslint-disable-next-line @typescript-eslint/no-var-requires
-		require("selfsigned").generate
-	);
+		require("selfsigned").generate;
 
 	const certAttrs: Attributes = [{ name: "commonName", value: "localhost" }];
 
@@ -109,7 +107,7 @@ async function generateCertificate() {
 		],
 	};
 
-	const { private: key, cert } = await generate(certAttrs, certOptions);
+	const { private: key, cert } = generate(certAttrs, certOptions);
 	return { key, cert };
 }
 
diff --git a/packages/wrangler/src/worker.d.ts b/packages/wrangler/src/worker.d.ts
new file mode 100644
index 000000000000..1df5a8e911ef
--- /dev/null
+++ b/packages/wrangler/src/worker.d.ts
@@ -0,0 +1,4 @@
+declare module "worker:*" {
+    const module: { path: string, contents: string };
+    export default path;
+}
diff --git a/packages/wrangler/templates/startDevWorker/InspectorProxyWorker.ts b/packages/wrangler/templates/startDevWorker/InspectorProxyWorker.ts
new file mode 100644
index 000000000000..7bc70ffce761
--- /dev/null
+++ b/packages/wrangler/templates/startDevWorker/InspectorProxyWorker.ts
@@ -0,0 +1,526 @@
+import assert from "node:assert";
+import {
+	DevToolsCommandRequest,
+	DevToolsCommandRequests,
+	DevToolsCommandResponses,
+	DevToolsEvent,
+	DevToolsEvents,
+	type InspectorProxyWorkerIncomingWebSocketMessage,
+	type InspectorProxyWorkerOutgoingRequestBody,
+	type InspectorProxyWorkerOutgoingWebsocketMessage,
+	type ProxyData,
+	serialiseError,
+} from "../../src/api/startDevWorker/events";
+import {
+	assertNever,
+	createDeferred,
+	DeferredPromise,
+	MaybePromise,
+	urlFromParts,
+} from "../../src/api/startDevWorker/utils";
+
+interface Env {
+	PROXY_CONTROLLER: Fetcher;
+	PROXY_CONTROLLER_AUTH_SECRET: string;
+	WRANGLER_VERSION: string;
+	DURABLE_OBJECT: DurableObjectNamespace;
+}
+
+export default {
+	fetch(req, env) {
+		const singleton = env.DURABLE_OBJECT.idFromName("");
+		const inspectorProxy = env.DURABLE_OBJECT.get(singleton);
+
+		return inspectorProxy.fetch(req);
+	},
+} as ExportedHandler<Env>;
+
+function isDevToolsEvent<Method extends DevToolsEvents["method"]>(
+	event: unknown,
+	name: Method
+): event is DevToolsEvent<Method> {
+	return (
+		typeof event === "object" &&
+		event !== null &&
+		"method" in event &&
+		event.method === name
+	);
+}
+
+export class InspectorProxyWorker implements DurableObject {
+	constructor(_state: DurableObjectState, readonly env: Env) {}
+
+	websockets: {
+		proxyController?: WebSocket;
+		runtime?: WebSocket;
+		devtools?: WebSocket;
+
+		// Browser DevTools cannot read the filesystem,
+		// instead they fetch via `Network.loadNetworkResource` messages.
+		// IDE DevTools can read the filesystem and expect absolute paths.
+		devtoolsHasFileSystemAccess?: boolean;
+
+		// We want to be able to delay devtools connection response
+		// until we've connected to the runtime inspector server
+		// so this deferred holds a promise to websockets.runtime
+		runtimeDeferred: DeferredPromise<WebSocket>;
+	} = {
+		runtimeDeferred: createDeferred<WebSocket>(),
+	};
+	proxyData?: ProxyData;
+	runtimeMessageBuffer: (DevToolsCommandResponses | DevToolsEvents)[] = [];
+
+	async fetch(req: Request) {
+		if (
+			req.headers.get("Authorization") === this.env.PROXY_CONTROLLER_AUTH_SECRET
+		) {
+			return this.handleProxyControllerRequest(req);
+		}
+
+		if (req.headers.get("Upgrade") === "websocket") {
+			return this.handleDevToolsWebSocketUpgradeRequest(req);
+		}
+
+		return this.handleDevToolsJsonRequest(req);
+	}
+
+	// ************************
+	// **  PROXY CONTROLLER  **
+	// ************************
+
+	handleProxyControllerRequest(req: Request) {
+		assert(
+			req.headers.get("Upgrade") === "websocket",
+			"Expected proxy controller data request to be WebSocket upgrade"
+		);
+
+		const { 0: response, 1: proxyController } = new WebSocketPair();
+		proxyController.accept();
+		proxyController.addEventListener("close", () => {
+			// don't reconnect the proxyController websocket
+			// ProxyController can detect this event and reconnect itself
+
+			if (this.websockets.proxyController === proxyController) {
+				this.websockets.proxyController = undefined;
+			}
+		});
+		proxyController.addEventListener("error", () => {
+			// don't reconnect the proxyController websocket
+			// ProxyController can detect this event and reconnect itself
+
+			if (this.websockets.proxyController === proxyController) {
+				this.websockets.proxyController = undefined;
+			}
+		});
+		proxyController.addEventListener(
+			"message",
+			this.handleProxyControllerIncomingMessage
+		);
+
+		this.websockets.proxyController = proxyController;
+
+		return new Response(null, {
+			status: 101,
+			webSocket: response,
+		});
+	}
+
+	sendProxyControllerMessage(
+		message: string | InspectorProxyWorkerOutgoingWebsocketMessage
+	) {
+		message = typeof message === "string" ? message : JSON.stringify(message);
+
+		// if the proxyController websocket is disconnected, throw away the message
+		this.websockets.proxyController?.send(message);
+	}
+
+	async sendProxyControllerRequest(
+		message: InspectorProxyWorkerOutgoingRequestBody
+	) {
+		try {
+			const res = await this.env.PROXY_CONTROLLER.fetch("http://dummy", {
+				method: "POST",
+				body: JSON.stringify(message),
+			});
+			return res.ok ? await res.text() : undefined;
+		} catch (e) {
+			this.sendDebugLog(
+				"FAILED TO SEND PROXY CONTROLLER REQUEST",
+				serialiseError(e)
+			);
+			return undefined;
+		}
+	}
+
+	sendDebugLog: typeof console.debug = (...args) => {
+		this.sendProxyControllerRequest({ type: "debug-log", args });
+	};
+
+	// ***************
+	// **  RUNTIME  **
+	// ***************
+
+	handleRuntimeIncomingMessage = (event: MessageEvent) => {
+		assert(typeof event.data === "string");
+
+		const msg = JSON.parse(event.data) as
+			| DevToolsCommandResponses
+			| DevToolsEvents;
+		this.sendDebugLog("RUNTIME INCOMING MESSAGE", msg);
+
+		if (
+			isDevToolsEvent(msg, "Runtime.exceptionThrown") ||
+			isDevToolsEvent(msg, "Runtime.consoleAPICalled")
+		) {
+			this.sendProxyControllerMessage(event.data);
+		}
+
+		this.runtimeMessageBuffer.push(msg);
+		this.tryDrainRuntimeMessageBuffer();
+	};
+
+	handleRuntimeScriptParsed(msg: DevToolsEvent<"Debugger.scriptParsed">) {
+		// If the devtools does not have filesystem access,
+		// rewrite the sourceMapURL to use a special scheme.
+		// This special scheme is used to indicate whether
+		// to intercept each loadNetworkResource message.
+
+		if (
+			!this.websockets.devtoolsHasFileSystemAccess &&
+			msg.params.sourceMapURL !== undefined
+		) {
+			const url = new URL(msg.params.sourceMapURL, msg.params.url);
+			if (url.protocol === "file:") {
+				msg.params.sourceMapURL = url.href.replace("file:", "wrangler-file:");
+			}
+		}
+
+		void this.sendDevToolsMessage(msg);
+	}
+
+	tryDrainRuntimeMessageBuffer = () => {
+		// If we don't have a DevTools WebSocket, try again later
+		if (this.websockets.devtools === undefined) return;
+
+		// clear the buffer and replay each message to devtools
+		for (const msg of this.runtimeMessageBuffer.splice(0)) {
+			if (isDevToolsEvent(msg, "Debugger.scriptParsed")) {
+				this.handleRuntimeScriptParsed(msg);
+			} else {
+				void this.sendDevToolsMessage(msg);
+			}
+		}
+	};
+
+	handleProxyControllerIncomingMessage = (event: MessageEvent) => {
+		assert(
+			typeof event.data === "string",
+			"Expected event.data from proxy controller to be string"
+		);
+
+		const message: InspectorProxyWorkerIncomingWebSocketMessage = JSON.parse(
+			event.data
+		);
+
+		this.sendDebugLog("handleProxyControllerIncomingMessage", event.data);
+
+		switch (message.type) {
+			case "reloadComplete": {
+				this.proxyData = message.proxyData;
+
+				this.reconnectRuntimeWebSocket();
+
+				break;
+			}
+			default: {
+				assertNever(message.type);
+			}
+		}
+	};
+
+	runtimeKeepAliveInterval: number | null = null;
+	reconnectRuntimeWebSocket() {
+		assert(this.proxyData, "Expected this.proxyData to be defined");
+
+		this.sendDebugLog("reconnectRuntimeWebSocket");
+
+		this.websockets.runtimeDeferred = createDeferred<WebSocket>(
+			this.websockets.runtimeDeferred
+		);
+
+		const runtimeWebSocketUrl = urlFromParts(
+			this.proxyData.userWorkerInspectorUrl
+		).href;
+		this.sendDebugLog("NEW RUNTIME WEBSOCKET", runtimeWebSocketUrl);
+		const runtime = new WebSocket(runtimeWebSocketUrl);
+
+		this.websockets.runtime?.close();
+		this.websockets.runtime = runtime;
+
+		runtime.addEventListener("message", this.handleRuntimeIncomingMessage);
+
+		runtime.addEventListener("close", (event) => {
+			this.sendDebugLog("RUNTIME WEBSOCKET CLOSED", event.code, event.reason);
+
+			clearInterval(this.runtimeKeepAliveInterval);
+
+			if (this.websockets.runtime === runtime) {
+				this.websockets.runtime = undefined;
+			}
+
+			// don't reconnect the runtime websocket
+			// if it closes unexpectedly (very rare or a case where reconnecting won't succeed anyway)
+			// wait for a new proxy-data message or manual restart
+		});
+
+		runtime.addEventListener("error", (event) => {
+			clearInterval(this.runtimeKeepAliveInterval);
+
+			if (this.websockets.runtime === runtime) {
+				this.websockets.runtime = undefined;
+			}
+
+			this.sendProxyControllerRequest({
+				type: "runtime-websocket-error",
+				error: {
+					message: event.message,
+					cause: event.error,
+				},
+			});
+
+			// don't reconnect the runtime websocket
+			// if it closes unexpectedly (very rare or a case where reconnecting won't succeed anyway)
+			// wait for a new proxy-data message or manual restart
+		});
+
+		runtime.addEventListener("open", () => {
+			this.handleRuntimeWebSocketOpen(runtime);
+		});
+	}
+
+	#runtimeMessageCounter = 1e8;
+	nextCounter() {
+		return ++this.#runtimeMessageCounter;
+	}
+	handleRuntimeWebSocketOpen(runtime: WebSocket) {
+		this.sendDebugLog("RUNTIME WEBSOCKET OPENED");
+
+		this.sendRuntimeMessage(
+			{ method: "Runtime.enable", id: this.nextCounter() },
+			runtime
+		);
+		this.sendRuntimeMessage(
+			{ method: "Debugger.enable", id: this.nextCounter() },
+			runtime
+		);
+		this.sendRuntimeMessage(
+			{ method: "Network.enable", id: this.nextCounter() },
+			runtime
+		);
+
+		clearInterval(this.runtimeKeepAliveInterval);
+		this.runtimeKeepAliveInterval = setInterval(() => {
+			this.sendRuntimeMessage(
+				{ method: "Runtime.getIsolateId", id: this.nextCounter() },
+				runtime
+			);
+		}, 10_000) as any;
+
+		this.websockets.runtimeDeferred.resolve(runtime);
+	}
+
+	async sendRuntimeMessage(
+		message: string | DevToolsCommandRequests,
+		runtime: MaybePromise<WebSocket> = this.websockets.runtimeDeferred.promise
+	) {
+		runtime = await runtime;
+		message = typeof message === "string" ? message : JSON.stringify(message);
+
+		this.sendDebugLog("SEND TO RUNTIME", message);
+
+		runtime.send(message);
+	}
+
+	// ****************
+	// **  DEVTOOLS  **
+	// ****************
+
+	#inspectorId = crypto.randomUUID();
+	async handleDevToolsJsonRequest(req: Request) {
+		const url = new URL(req.url);
+
+		if (url.pathname === "/json/version") {
+			return Response.json({
+				Browser: `wrangler/v${this.env.WRANGLER_VERSION}`,
+				// TODO: (someday): The DevTools protocol should match that of workerd.
+				// This could be exposed by the preview API.
+				"Protocol-Version": "1.3",
+			});
+		}
+
+		if (url.pathname === "/json" || url.pathname === "/json/list") {
+			// TODO: can we remove the `/ws` here if we only have a single worker?
+			const localHost = `${url.host}/ws`;
+			const devtoolsFrontendUrl = `https://devtools.devprod.cloudflare.dev/js_app?theme=systemPreferred&debugger=true&ws=${localHost}`;
+
+			return Response.json([
+				{
+					id: this.#inspectorId,
+					type: "node", // TODO: can we specify different type?
+					description: "workers",
+					webSocketDebuggerUrl: `ws://${localHost}`,
+					devtoolsFrontendUrl,
+					devtoolsFrontendUrlCompat: devtoolsFrontendUrl,
+					// Below are fields that are visible in the DevTools UI.
+					title: "Cloudflare Worker",
+					faviconUrl: "https://workers.cloudflare.com/favicon.ico",
+					// url: "http://" + localHost, // looks unnecessary
+				},
+			]);
+		}
+
+		return new Response(null, { status: 404 });
+	}
+
+	async handleDevToolsWebSocketUpgradeRequest(req: Request) {
+		// DevTools attempting to connect
+		this.sendDebugLog("DEVTOOLS WEBSOCKET TRYING TO CONNECT");
+
+		// Delay devtools connection response until we've connected to the runtime inspector server
+		await this.websockets.runtimeDeferred.promise;
+
+		this.sendDebugLog("DEVTOOLS WEBSOCKET CAN NOW CONNECT");
+
+		assert(
+			req.headers.get("Upgrade") === "websocket",
+			"Expected DevTools connection to be WebSocket upgrade"
+		);
+		const { 0: response, 1: devtools } = new WebSocketPair();
+		devtools.accept();
+
+		if (this.websockets.devtools !== undefined) {
+			/** We only want to have one active Devtools instance at a time. */
+			// TODO(consider): prioritise new websocket over previous
+			devtools.close(
+				1013,
+				"Too many clients; only one can be connected at a time"
+			);
+		} else {
+			devtools.addEventListener("message", this.handleDevToolsIncomingMessage);
+			devtools.addEventListener("close", () => {
+				if (this.websockets.devtools === devtools) {
+					this.websockets.devtools = undefined;
+				}
+			});
+			devtools.addEventListener("error", (event) => {
+				if (this.websockets.devtools === devtools) {
+					this.websockets.devtools = undefined;
+				}
+			});
+
+			// Since Wrangler proxies the inspector, reloading Chrome DevTools won't trigger debugger initialisation events (because it's connecting to an extant session).
+			// This sends a `Debugger.disable` message to the remote when a new WebSocket connection is initialised,
+			// with the assumption that the new connection will shortly send a `Debugger.enable` event and trigger re-initialisation.
+			// The key initialisation messages that are needed are the `Debugger.scriptParsed events`.
+			this.sendRuntimeMessage({
+				id: this.nextCounter(),
+				method: "Debugger.disable",
+			});
+
+			this.sendDebugLog("DEVTOOLS WEBSOCKET CONNECTED");
+
+			// Our patched DevTools are hosted on a `https://` URL. These cannot
+			// access `file://` URLs, meaning local source maps cannot be fetched.
+			// To get around this, we can rewrite `Debugger.scriptParsed` events to
+			// include a special `worker:` scheme for source maps, and respond to
+			// `Network.loadNetworkResource` commands for these. Unfortunately, this
+			// breaks IDE's built-in debuggers (e.g. VSCode and WebStorm), so we only
+			// want to enable this transformation when we detect hosted DevTools has
+			// connected. We do this by looking at the WebSocket handshake headers:
+			//
+			//  DevTools
+			//
+			// Upgrade: websocket
+			// Host: localhost:9229
+			// (from Chrome)  User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/116.0.0.0 Safari/537.36
+			// (from Firefox) User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.15; rv:109.0) Gecko/20100101 Firefox/116.0
+			// Origin: https://devtools.devprod.cloudflare.dev
+			// ...
+			//
+			//  VSCode
+			//
+			// Upgrade: websocket
+			// Host: localhost
+			// ...
+			//
+			//  WebStorm
+			//
+			// Upgrade: websocket
+			// Host: localhost:9229
+			// Origin: http://localhost:9229
+			// ...
+			//
+			// From this, we could just use the presence of a `User-Agent` header to
+			// determine if DevTools connected, but VSCode/WebStorm could very well
+			// add this in future versions. We could also look for an `Origin` header
+			// matching the hosted DevTools URL, but this would prevent preview/local
+			// versions working. Instead, we look for a browser-like `User-Agent`.
+			const userAgent = req.headers.get("User-Agent") ?? "";
+			const hasFileSystemAccess = !/mozilla/i.test(userAgent);
+
+			this.websockets.devtools = devtools;
+			this.websockets.devtoolsHasFileSystemAccess = hasFileSystemAccess;
+
+			this.tryDrainRuntimeMessageBuffer();
+		}
+
+		return new Response(null, { status: 101, webSocket: response });
+	}
+
+	handleDevToolsIncomingMessage = (event: MessageEvent) => {
+		assert(
+			typeof event.data === "string",
+			"Expected devtools incoming message to be of type string"
+		);
+
+		const message = JSON.parse(event.data) as DevToolsCommandRequests;
+		this.sendDebugLog("DEVTOOLS INCOMING MESSAGE", message);
+
+		if (message.method === "Network.loadNetworkResource") {
+			return void this.handleDevToolsLoadNetworkResource(message);
+		}
+
+		this.sendRuntimeMessage(JSON.stringify(message));
+	};
+
+	async handleDevToolsLoadNetworkResource(
+		message: DevToolsCommandRequest<"Network.loadNetworkResource">
+	) {
+		const response = await this.sendProxyControllerRequest({
+			type: "load-network-resource",
+			url: message.params.url,
+		});
+		if (response === undefined) {
+			this.sendRuntimeMessage(JSON.stringify(message));
+		} else {
+			// this.websockets.devtools can be undefined here
+			// the incoming message implies we have a devtools connection, but after
+			// the await it could've dropped in which case we can safely not respond
+			this.sendDevToolsMessage({
+				id: message.id,
+				// @ts-expect-error DevTools Protocol type does not match our patched devtools -- result.resource.text was added
+				result: { resource: { success: true, text: response } },
+			});
+		}
+	}
+
+	sendDevToolsMessage(
+		message: string | DevToolsCommandResponses | DevToolsEvents
+	) {
+		message = typeof message === "string" ? message : JSON.stringify(message);
+
+		this.sendDebugLog("SEND TO DEVTOOLS", message);
+
+		this.websockets.devtools?.send(message);
+	}
+}
diff --git a/packages/wrangler/templates/startDevWorker/ProxyWorker.ts b/packages/wrangler/templates/startDevWorker/ProxyWorker.ts
new file mode 100644
index 000000000000..e02c917e010f
--- /dev/null
+++ b/packages/wrangler/templates/startDevWorker/ProxyWorker.ts
@@ -0,0 +1,260 @@
+import assert from "node:assert";
+import type {
+	ProxyWorkerIncomingRequestBody,
+	ProxyWorkerOutgoingRequestBody,
+	ProxyData,
+} from "../../src/api/startDevWorker/events";
+import {
+	DeferredPromise,
+	createDeferred,
+} from "../../src/api/startDevWorker/utils";
+
+interface Env {
+	PROXY_CONTROLLER: Fetcher;
+	PROXY_CONTROLLER_AUTH_SECRET: string;
+	DURABLE_OBJECT: DurableObjectNamespace;
+}
+
+// request.cf.hostMetadata is verbose to type using the workers-types Request -- this allows us to have Request correctly typed in this scope
+type Request = Parameters<
+	NonNullable<
+		ExportedHandler<Env, unknown, ProxyWorkerIncomingRequestBody>["fetch"]
+	>
+>[0];
+
+const LIVE_RELOAD_PROTOCOL = "WRANGLER_PROXYWORKER_LIVE_RELOAD_PROTOCOL";
+export default {
+	fetch(req, env) {
+		const singleton = env.DURABLE_OBJECT.idFromName("");
+		const inspectorProxy = env.DURABLE_OBJECT.get(singleton);
+
+		return inspectorProxy.fetch(req);
+	},
+} as ExportedHandler<Env, unknown, ProxyWorkerIncomingRequestBody>;
+
+export class ProxyWorker implements DurableObject {
+	constructor(readonly state: DurableObjectState, readonly env: Env) {}
+
+	proxyData?: ProxyData;
+	requestQueue = new Map<Request, DeferredPromise<Response>>();
+
+	fetch(request: Request) {
+		if (isRequestForLiveReloadWebsocket(request)) {
+			// requests for live-reload websocket
+
+			return this.handleLiveReloadWebSocket(request);
+		}
+
+		if (isRequestFromProxyController(request, this.env)) {
+			// requests from ProxyController
+
+			return this.processProxyControllerRequest(request);
+		}
+
+		// regular requests to be proxied
+		const deferred = createDeferred<Response>();
+
+		this.requestQueue.set(request, deferred);
+		this.processQueue();
+
+		return deferred.promise;
+	}
+
+	handleLiveReloadWebSocket(request: Request) {
+		const { 0: response, 1: liveReload } = new WebSocketPair();
+		const websocketProtocol =
+			request.headers.get("Sec-WebSocket-Protocol") ?? "";
+
+		this.state.acceptWebSocket(liveReload, ["live-reload"]);
+
+		return new Response(null, {
+			status: 101,
+			webSocket: response,
+			headers: { "Sec-WebSocket-Protocol": websocketProtocol },
+		});
+	}
+
+	processProxyControllerRequest(request: Request) {
+		const event = request.cf?.hostMetadata;
+		switch (event?.type) {
+			case "pause":
+				this.proxyData = undefined;
+				break;
+
+			case "play":
+				this.proxyData = event.proxyData;
+				this.processQueue();
+				this.state
+					.getWebSockets("live-reload")
+					.forEach((ws) => ws.send("reload"));
+
+				break;
+		}
+
+		return new Response(null, { status: 204 });
+	}
+
+	processQueue() {
+		const { proxyData } = this; // destructuring is required to keep the type-narrowing (not undefined) in the .then callback and to ensure the same proxyData is used throughout each request
+		if (proxyData === undefined) return;
+
+		for (const [request, deferredResponse] of this.requestQueue) {
+			this.requestQueue.delete(request);
+
+			const url = new URL(request.url);
+			const headers = new Headers(request.headers);
+
+			// override url parts for proxying
+			Object.assign(url, proxyData.userWorkerUrl);
+
+			// set request.url in the UserWorker
+			// this will no longer disable miniflare's pretty error page in the UserWorker after https://github.com/cloudflare/miniflare/pull/689
+			const innerUrl = new URL(url.href);
+			Object.assign(innerUrl, proxyData.userWorkerInnerUrlOverrides);
+			if (
+				proxyData.userWorkerInnerUrlOverrides &&
+				proxyData.userWorkerInnerUrlOverrides.port === undefined
+			) {
+				// if userWorkerInnerUrlOverrides is set but port is not, remove port from innerUrl
+				// eg. if userWorkerInnerUrlOverrides is { hostname: 'example.com' }, then innerUrl will be http://example.com/... not http://example.com:8787/...
+				innerUrl.port = "";
+			}
+			headers.set("MF-Original-URL", innerUrl.href);
+
+			// merge proxyData headers with the request headers
+			for (const [key, value] of Object.entries(proxyData.headers ?? {})) {
+				if (key.toLowerCase() === "cookie") {
+					const existing = request.headers.get("cookie") ?? "";
+					headers.set("cookie", `${existing};${value}`);
+				} else {
+					headers.set(key, value);
+				}
+			}
+
+			// explicitly NOT await-ing this promise, we are in a loop and want to process the whole queue quickly
+			// if we decide to await, we should include a timeout (~100ms) in case the user worker has long-running/parellel requests
+			void fetch(url, new Request(request, { headers }))
+				.then((res) => {
+					if (isHtmlResponse(res)) {
+						res = insertLiveReloadScript(request, res, this.env, proxyData);
+					}
+
+					deferredResponse.resolve(res);
+				})
+				.catch((error: Error) => {
+					// errors here are network errors or from response post-processing
+					// to catch only network errors, use the 2nd param of the fetch.then()
+
+					void sendMessageToProxyController(this.env, {
+						type: "error",
+						error: {
+							name: error.name,
+							message: error.message,
+							stack: error.stack,
+							cause: error.cause,
+						},
+					});
+
+					deferredResponse.reject(error);
+				});
+		}
+	}
+}
+
+function isRequestFromProxyController(req: Request, env: Env): boolean {
+	return req.headers.get("Authorization") === env.PROXY_CONTROLLER_AUTH_SECRET;
+}
+function isHtmlResponse(res: Response): boolean {
+	return res.headers.get("content-type")?.startsWith("text/html") ?? false;
+}
+function isRequestForLiveReloadWebsocket(req: Request): boolean {
+	const websocketProtocol = req.headers.get("Sec-WebSocket-Protocol");
+	const isWebSocketUpgrade = req.headers.get("Upgrade") === "websocket";
+
+	return isWebSocketUpgrade && websocketProtocol === LIVE_RELOAD_PROTOCOL;
+}
+
+async function sendMessageToProxyController(
+	env: Env,
+	message: ProxyWorkerOutgoingRequestBody,
+	retries = 3
+) {
+	try {
+		await env.PROXY_CONTROLLER.fetch("http://dummy", {
+			method: "POST",
+			body: JSON.stringify(message),
+		});
+	} catch (cause) {
+		if (retries > 0) {
+			return sendMessageToProxyController(env, message, retries - 1);
+		}
+
+		// no point sending an error message if we can't send this message
+
+		throw cause;
+	}
+}
+
+function insertLiveReloadScript(
+	request: Request,
+	response: Response,
+	env: Env,
+	proxyData: ProxyData
+) {
+	const htmlRewriter = new HTMLRewriter();
+
+	// if preview-token-expired response, errorDetails will contain "Invalid Workers Preview configuration"
+	let errorDetails = "";
+	htmlRewriter.on("#cf-error-details", {
+		text(element) {
+			errorDetails += element.text;
+		},
+	});
+
+	htmlRewriter.onDocument({
+		end(end) {
+			if (
+				response.status === 400 &&
+				errorDetails.includes("Invalid Workers Preview configuration")
+			) {
+				void sendMessageToProxyController(env, {
+					type: "previewTokenExpired",
+					proxyData,
+				});
+			}
+
+			// if liveReload enabled, append a script tag
+			// TODO: compare to existing nodejs implementation
+			if (proxyData.liveReload) {
+				const websocketUrl = new URL(request.url);
+				websocketUrl.protocol =
+					websocketUrl.protocol === "http:" ? "ws:" : "wss:";
+
+				end.append(
+					`
+					<script>
+						(function() {
+							var ws;
+							function recover() {
+								ws = null;
+								setTimeout(initLiveReload, 100);
+							}
+							function initLiveReload() {
+								if (ws) return;
+                var origin = (location.protocol === "http:" ? "ws://" : "wss://") + location.host;
+								ws = new WebSocket(origin + "/cdn-cgi/live-reload", "${LIVE_RELOAD_PROTOCOL}");
+								ws.onclose = recover;
+								ws.onerror = recover;
+								ws.onmessage = location.reload.bind(location);
+							}
+						})();
+					</script>
+				`,
+					{ html: true }
+				);
+			}
+		},
+	});
+
+	return htmlRewriter.transform(response);
+}
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 127df3302f4a..38cd17645c18 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -102,6 +102,30 @@ importers:
         specifier: workspace:*
         version: link:../../packages/wrangler
 
+  fixtures/dev-env:
+    devDependencies:
+      '@cloudflare/workers-tsconfig':
+        specifier: workspace:^
+        version: link:../../packages/workers-tsconfig
+      '@types/ws':
+        specifier: ^8.5.7
+        version: 8.5.7
+      get-port:
+        specifier: ^7.0.0
+        version: 7.0.0
+      miniflare:
+        specifier: 3.20231002.1
+        version: 3.20231002.1
+      undici:
+        specifier: ^5.23.0
+        version: 5.23.0
+      wrangler:
+        specifier: workspace:*
+        version: link:../../packages/wrangler
+      ws:
+        specifier: ^8.14.2
+        version: 8.14.2
+
   fixtures/external-durable-objects-app:
     devDependencies:
       '@cloudflare/workers-tsconfig':
@@ -3479,6 +3503,15 @@ packages:
       marked: 0.3.19
     dev: false
 
+  /@cloudflare/workerd-darwin-64@1.20231002.0:
+    resolution: {integrity: sha512-sgtjzVO/wtI/6S7O0bk4zQAv2xlvqOxB18AXzlit6uXgbYFGeQedRHjhKVMOacGmWEnM4C3ir/fxJGsc3Pyxng==}
+    engines: {node: '>=16'}
+    cpu: [x64]
+    os: [darwin]
+    requiresBuild: true
+    dev: true
+    optional: true
+
   /@cloudflare/workerd-darwin-64@1.20231016.0:
     resolution: {integrity: sha512-rPAnF8Q25+eHEsAopihWeftPW/P0QapY9d7qaUmtOXztWdd6YPQ7JuiWVj4Nvjphge1BleehxAbo4I3Z4L2H1g==}
     engines: {node: '>=16'}
@@ -3487,6 +3520,15 @@ packages:
     requiresBuild: true
     optional: true
 
+  /@cloudflare/workerd-darwin-arm64@1.20231002.0:
+    resolution: {integrity: sha512-dv8nztYFaTYYgBpyy80vc4hdMYv9mhyNbvBsZywm8S7ivcIpzogi0UKkGU4E/G0lYK6W3WtwTBqwRe+pXJ1+Ww==}
+    engines: {node: '>=16'}
+    cpu: [arm64]
+    os: [darwin]
+    requiresBuild: true
+    dev: true
+    optional: true
+
   /@cloudflare/workerd-darwin-arm64@1.20231016.0:
     resolution: {integrity: sha512-MvydDdiLXt+jy57vrVZ2lU6EQwCdpieyZoN8uBXSWzfG3zR/6dxU1+okvPQPlHN0jtlufqPeHrpJyAqqgLHUKA==}
     engines: {node: '>=16'}
@@ -3495,6 +3537,15 @@ packages:
     requiresBuild: true
     optional: true
 
+  /@cloudflare/workerd-linux-64@1.20231002.0:
+    resolution: {integrity: sha512-UG8SlLcGzaQDSSw6FR4+Zf408925wkLOCAi8w5qEoFYu3g4Ef7ZenstesCOsyWL7qBDKx0/iwk6+a76W5IHI0Q==}
+    engines: {node: '>=16'}
+    cpu: [x64]
+    os: [linux]
+    requiresBuild: true
+    dev: true
+    optional: true
+
   /@cloudflare/workerd-linux-64@1.20231016.0:
     resolution: {integrity: sha512-y6Sj37yTzM8QbAghG9LRqoSBrsREnQz8NkcmpjSxeK6KMc2g0L5A/OemCdugNlIiv+zRv9BYX1aosaoxY5JbeQ==}
     engines: {node: '>=16'}
@@ -3503,6 +3554,15 @@ packages:
     requiresBuild: true
     optional: true
 
+  /@cloudflare/workerd-linux-arm64@1.20231002.0:
+    resolution: {integrity: sha512-GPaa66ZSq1gK09r87c5CJbHIApcIU//LVHz3rnUxK0//00YCwUuGUUK1dn/ylg+fVqDQxIDmH+ABnobBanvcDA==}
+    engines: {node: '>=16'}
+    cpu: [arm64]
+    os: [linux]
+    requiresBuild: true
+    dev: true
+    optional: true
+
   /@cloudflare/workerd-linux-arm64@1.20231016.0:
     resolution: {integrity: sha512-LqMIRUHD1YeRg2TPIfIQEhapSKMFSq561RypvJoXZvTwSbaROxGdW6Ku+PvButqTkEvuAtfzN/kGje7fvfQMHg==}
     engines: {node: '>=16'}
@@ -3511,6 +3571,15 @@ packages:
     requiresBuild: true
     optional: true
 
+  /@cloudflare/workerd-windows-64@1.20231002.0:
+    resolution: {integrity: sha512-ybIy+sCme0VO0RscndXvqWNBaRMUOc8vhi+1N2h/KDsKfNLsfEQph+XWecfKzJseUy1yE2rV1xei3BaNmaa6vg==}
+    engines: {node: '>=16'}
+    cpu: [x64]
+    os: [win32]
+    requiresBuild: true
+    dev: true
+    optional: true
+
   /@cloudflare/workerd-windows-64@1.20231016.0:
     resolution: {integrity: sha512-96ojBwIHyiUAbsWlzBqo9P/cvH8xUh8SuBboFXtwAeXcJ6/urwKN2AqPa/QzOGUTCdsurWYiieARHT5WWWPhKw==}
     engines: {node: '>=16'}
@@ -6035,6 +6104,12 @@ packages:
       '@types/node': 20.1.7
     dev: true
 
+  /@types/ws@8.5.7:
+    resolution: {integrity: sha512-6UrLjiDUvn40CMrAubXuIVtj2PEfKDffJS7ychvnPU44j+KVeXmdHHTgqcM/dxLUTHxlXHiFM8Skmb8ozGdTnQ==}
+    dependencies:
+      '@types/node': 20.1.7
+    dev: true
+
   /@types/yargs-parser@20.2.1:
     resolution: {integrity: sha512-7tFImggNeNBVMsn0vLrpn1H1uPrUBdnARPTpZoitY37ZrdJREzf7I16tMrlK3hen349gr1NYh8CmZQa7CTG6Aw==}
     dev: true
@@ -6901,14 +6976,6 @@ packages:
     dependencies:
       acorn: 8.10.0
 
-  /acorn-jsx@5.3.2(acorn@8.8.2):
-    resolution: {integrity: sha512-rq9s+JNhf0IChjtDXxllJ7g41oZk5SlXtp0LHwyA5cejwn7vKmKp4pPri6YEePv2PU65sAsegbXtIinmDFDXgQ==}
-    peerDependencies:
-      acorn: ^6.0.0 || ^7.0.0 || ^8.0.0
-    dependencies:
-      acorn: 8.8.2
-    dev: true
-
   /acorn-walk@8.2.0:
     resolution: {integrity: sha512-k+iyHEuPgSw6SbuDpGQM+06HQUa04DZ3o+F6CSzXMvvI5KMvnaEqXe+YVe555R9nn6GPt404fos4wcgpw12SDA==}
     engines: {node: '>=0.4.0'}
@@ -9647,8 +9714,8 @@ packages:
     resolution: {integrity: sha512-7OASN1Wma5fum5SrNhFMAMJxOUAbhyfQ8dQ//PJaJbNw0URTPWqIghHWt1MmAANKhHZIYOHruW4Kw4ruUWOdGw==}
     engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
     dependencies:
-      acorn: 8.8.2
-      acorn-jsx: 5.3.2(acorn@8.8.2)
+      acorn: 8.10.0
+      acorn-jsx: 5.3.2(acorn@8.10.0)
       eslint-visitor-keys: 3.4.1
     dev: true
 
@@ -10377,6 +10444,11 @@ packages:
     engines: {node: ^12.20.0 || ^14.13.1 || >=16.0.0}
     dev: true
 
+  /get-port@7.0.0:
+    resolution: {integrity: sha512-mDHFgApoQd+azgMdwylJrv2DX47ywGq1i5VFJE7fZ0dttNq3iQMfsU4IvEgBHojA3KqEudyu7Vq+oN8kNaNkWw==}
+    engines: {node: '>=16'}
+    dev: true
+
   /get-source@2.0.12:
     resolution: {integrity: sha512-X5+4+iD+HoSeEED+uwrQ07BOQr0kEDFMVqqpBuI+RaZBpBpHCuXxo70bjar6f0b0u/DQJsJ7ssurpP0V60Az+w==}
     dependencies:
@@ -13176,6 +13248,28 @@ packages:
     engines: {node: '>=4'}
     dev: false
 
+  /miniflare@3.20231002.1:
+    resolution: {integrity: sha512-4xJ8FezJkQqHzCm71lovb9L/wJ0VV/odMFf5CIxfLTunsx97kTIlZnhS6aHuvcbzdztbWp1RR71K/1qFUHdpdQ==}
+    engines: {node: '>=16.13'}
+    dependencies:
+      acorn: 8.10.0
+      acorn-walk: 8.2.0
+      capnp-ts: 0.7.0(supports-color@9.2.2)
+      exit-hook: 2.2.1
+      glob-to-regexp: 0.4.1
+      source-map-support: 0.5.21
+      stoppable: 1.1.0
+      undici: 5.23.0
+      workerd: 1.20231002.0
+      ws: 8.14.2
+      youch: 3.2.3
+      zod: 3.22.2
+    transitivePeerDependencies:
+      - bufferutil
+      - supports-color
+      - utf-8-validate
+    dev: true
+
   /miniflare@3.20231016.0(supports-color@9.2.2):
     resolution: {integrity: sha512-AmlqI89zsnBJfC+nKKZdCB/fuu0q/br24Kqt9NZwcT6yJEpO5NytNKfjl6nJROHROwuJSRQR1T3yopCtG1/0DA==}
     engines: {node: '>=16.13'}
@@ -13189,7 +13283,7 @@ packages:
       stoppable: 1.1.0
       undici: 5.23.0
       workerd: 1.20231016.0
-      ws: 8.13.0
+      ws: 8.14.2
       youch: 3.2.3
       zod: 3.22.2
     transitivePeerDependencies:
@@ -17537,6 +17631,19 @@ packages:
     resolution: {integrity: sha512-gvVzJFlPycKc5dZN4yPkP8w7Dc37BtP1yczEneOb4uq34pXZcvrtRTmWV8W+Ume+XCxKgbjM+nevkyFPMybd4Q==}
     dev: true
 
+  /workerd@1.20231002.0:
+    resolution: {integrity: sha512-NFuUQBj30ZguDoPZ6bL40hINiu8aP2Pvxr/3xAdhWOwVFLuObPOiSdQ8qm4JYZ7jovxWjWE4Z7VR2avjIzEksQ==}
+    engines: {node: '>=16'}
+    hasBin: true
+    requiresBuild: true
+    optionalDependencies:
+      '@cloudflare/workerd-darwin-64': 1.20231002.0
+      '@cloudflare/workerd-darwin-arm64': 1.20231002.0
+      '@cloudflare/workerd-linux-64': 1.20231002.0
+      '@cloudflare/workerd-linux-arm64': 1.20231002.0
+      '@cloudflare/workerd-windows-64': 1.20231002.0
+    dev: true
+
   /workerd@1.20231016.0:
     resolution: {integrity: sha512-v2GDb5XitSqgub/xm7EWHVAlAK4snxQu3itdMQxXstGtUG9hl79fQbXS/8fNFbmms2R2bAxUwSv47q8k5T5Erw==}
     engines: {node: '>=16'}
@@ -17619,8 +17726,8 @@ packages:
         optional: true
     dev: true
 
-  /ws@8.13.0:
-    resolution: {integrity: sha512-x9vcZYTrFPC7aSIbj7sRCYo7L/Xb8Iy+pW0ng0wt2vCJv7M9HOMy0UoN3rr+IFC7hb7vXoqS+P9ktyLLLhO+LA==}
+  /ws@8.14.2:
+    resolution: {integrity: sha512-wEBG1ftX4jcglPxgFCMJmZ2PLtSbJ2Peg6TmpJFTbe9GZYOQCDPdMYu/Tm0/bGZkw8paZnJY45J4K2PZrLYq8g==}
     engines: {node: '>=10.0.0'}
     peerDependencies:
       bufferutil: ^4.0.1