Use default browser when opening devtools (#9975)

* Use default browser

* Create wise-pillows-brake.md

* fix lint

* Fix TypeScript errors in ProxyController for devtools proxy

Co-Authored-By: [email protected] <[email protected]>

---------

Co-authored-by: Devin AI <158243242+devin-ai-integration[bot]@users.noreply.github.com>

Author: penalosa

.changeset/wise-pillows-brake.md

@@ -0,0 +1,5 @@
+---
+"wrangler": minor
+---
+
+Use default browser when opening devtools using the `[d]` hotkey

packages/wrangler/src/api/startDevWorker/ProxyController.ts

@@ -3,6 +3,7 @@ import { randomUUID } from "node:crypto";
 import events from "node:events";
 import path from "node:path";
 import { LogLevel, Miniflare, Mutex, Response } from "miniflare";
+import dedent from "ts-dedent";
 import inspectorProxyWorkerPath from "worker:startDevWorker/InspectorProxyWorker";
 import proxyWorkerPath from "worker:startDevWorker/ProxyWorker";
 import WebSocket from "ws";
@@ -103,7 +104,7 @@ export class ProxyController extends Controller<ProxyControllerEventMap> {
 					// However, the proxy worker only makes outgoing requests to the user Worker Miniflare instance, which _should_ receive CF-Connecting-IP
 					stripCfConnectingIp: false,
 					serviceBindings: {
-						PROXY_CONTROLLER: async (req): Promise<Response> => {
+						PROXY_CONTROLLER: async (req: Request): Promise<Response> => {
 							const message =
 								(await req.json()) as ProxyWorkerOutgoingRequestBody;
 
@@ -142,43 +143,76 @@ export class ProxyController extends Controller<ProxyControllerEventMap> {
 		};
 
 		if (this.latestConfig.dev.inspector !== false && !inVscodeJsDebugTerminal) {
-			proxyWorkerOptions.workers.push({
-				name: "InspectorProxyWorker",
-				compatibilityDate: "2023-12-18",
-				compatibilityFlags: [
-					"nodejs_compat",
-					"increase_websocket_message_size",
-				],
-				modulesRoot: path.dirname(inspectorProxyWorkerPath),
-				modules: [{ type: "ESModule", path: inspectorProxyWorkerPath }],
-				durableObjects: {
-					DURABLE_OBJECT: {
-						className: "InspectorProxyWorker",
-						unsafePreventEviction: true,
+			proxyWorkerOptions.workers.push(
+				{
+					name: "InspectorProxyWorker",
+					compatibilityDate: "2023-12-18",
+					compatibilityFlags: [
+						"nodejs_compat",
+						"increase_websocket_message_size",
+					],
+					modulesRoot: path.dirname(inspectorProxyWorkerPath),
+					modules: [{ type: "ESModule", path: inspectorProxyWorkerPath }],
+					durableObjects: {
+						DURABLE_OBJECT: {
+							className: "InspectorProxyWorker",
+							unsafePreventEviction: true,
+						},
 					},
-				},
-				serviceBindings: {
-					PROXY_CONTROLLER: async (req): Promise<Response> => {
-						const body =
-							(await req.json()) as InspectorProxyWorkerOutgoingRequestBody;
+					serviceBindings: {
+						PROXY_CONTROLLER: async (req: Request): Promise<Response> => {
+							const body =
+								(await req.json()) as InspectorProxyWorkerOutgoingRequestBody;
 
-						return this.onInspectorProxyWorkerRequest(body);
+							return this.onInspectorProxyWorkerRequest(body);
+						},
 					},
+					bindings: {
+						PROXY_CONTROLLER_AUTH_SECRET: this.secret,
+					},
+
+					unsafeDirectSockets: [
+						{
+							host: this.latestConfig.dev?.inspector?.hostname,
+							port: this.latestConfig.dev?.inspector?.port ?? 0,
+						},
+					],
+					// no need to use file-system, so don't
+					cache: false,
+					unsafeEphemeralDurableObjects: true,
 				},
-				bindings: {
-					PROXY_CONTROLLER_AUTH_SECRET: this.secret,
-				},
+				{
+					name: "DevtoolsProxyWorker",
+					compatibilityDate: "2025-01-01",
+					modules: [
+						{
+							type: "ESModule",
+							contents: dedent/* javascript */ `
+								export default {
+									fetch(request) {
+										const url = new URL(request.url);
+										url.host = "devtools.devprod.cloudflare.dev"
+										url.protocol = "https"
+										url.port = 443
+										return fetch(url.toString(), request)
+									}
+								}
+							`,
+							path: "index.js",
+						},
+					],
+					unsafeDirectSockets: [
+						{
+							host: this.latestConfig.dev?.inspector?.hostname,
+							port: 0,
+						},
+					],
 
-				unsafeDirectSockets: [
-					{
-						host: this.latestConfig.dev?.inspector?.hostname,
-						port: this.latestConfig.dev?.inspector?.port ?? 0,
-					},
-				],
-				// no need to use file-system, so don't
-				cache: false,
-				unsafeEphemeralDurableObjects: true,
-			});
+					// no need to use file-system, so don't
+					cache: false,
+					unsafeEphemeralDurableObjects: true,
+				}
+			);
 		}
 
 		const proxyWorkerOptionsChanged = didMiniflareOptionsChange(
@@ -212,10 +246,13 @@ export class ProxyController extends Controller<ProxyControllerEventMap> {
 				this.latestConfig.dev.inspector === false || inVscodeJsDebugTerminal
 					? Promise.resolve(undefined)
 					: proxyWorker.unsafeGetDirectURL("InspectorProxyWorker"),
+				this.latestConfig.dev.inspector === false || inVscodeJsDebugTerminal
+					? Promise.resolve(undefined)
+					: proxyWorker.unsafeGetDirectURL("DevtoolsProxyWorker"),
 			])
-				.then(([url, inspectorUrl]) => {
+				.then(([url, inspectorUrl, devtoolsUrl]) => {
 					if (!inspectorUrl || inVscodeJsDebugTerminal) {
-						return [url, undefined];
+						return [url, undefined, undefined];
 					}
 					// Don't connect the inspector proxy worker until we have a valid ready Miniflare instance.
 					// Otherwise, tearing down the ProxyController immediately after setting it up
@@ -224,11 +261,12 @@ export class ProxyController extends Controller<ProxyControllerEventMap> {
 					return this.reconnectInspectorProxyWorker().then(() => [
 						url,
 						inspectorUrl,
+						devtoolsUrl,
 					]);
 				})
-				.then(([url, inspectorUrl]) => {
+				.then(([url, inspectorUrl, devtoolsUrl]) => {
 					assert(url);
-					this.emitReadyEvent(proxyWorker, url, inspectorUrl);
+					this.emitReadyEvent(proxyWorker, url, inspectorUrl, devtoolsUrl);
 				})
 				.catch((error) => {
 					if (this._torndown) {
@@ -575,13 +613,15 @@ export class ProxyController extends Controller<ProxyControllerEventMap> {
 	emitReadyEvent(
 		proxyWorker: Miniflare,
 		url: URL,
-		inspectorUrl: URL | undefined
+		inspectorUrl: URL | undefined,
+		devtoolsUrl: URL | undefined
 	) {
 		const data: ReadyEvent = {
 			type: "ready",
 			proxyWorker,
 			url,
 			inspectorUrl,
+			devtoolsUrl,
 		};
 
 		this.emit("ready", data);

packages/wrangler/src/api/startDevWorker/events.ts

@@ -87,6 +87,7 @@ export type ReadyEvent = {
 	type: "ready";
 	proxyWorker: Miniflare;
 	url: URL;
+	devtoolsUrl: URL | undefined;
 	inspectorUrl: URL | undefined;
 };
 

packages/wrangler/src/dev/hotkeys.ts

@@ -27,13 +27,15 @@ export default function registerDevHotKeys(
 			// Don't display this hotkey if we're in a VSCode debug session
 			disabled: !!process.env.VSCODE_INSPECTOR_OPTIONS,
 			handler: async () => {
-				const { inspectorUrl } = await primaryDevEnv.proxy.ready.promise;
+				const { inspectorUrl, devtoolsUrl } =
+					await primaryDevEnv.proxy.ready.promise;
 
-				if (!inspectorUrl) {
+				if (!inspectorUrl || !devtoolsUrl) {
 					logger.warn("DevTools is not available while in a debug terminal");
 				} else {
 					// TODO: refactor this function to accept a whole URL (not just .port and assuming .hostname)
 					await openInspector(
+						devtoolsUrl,
 						parseInt(inspectorUrl.port),
 						primaryDevEnv.config.latestConfig?.name
 					);

packages/wrangler/src/dev/inspect.ts

@@ -1,5 +1,4 @@
 import { readFileSync } from "fs";
-import os from "node:os";
 import { fileURLToPath, URL } from "node:url";
 import path from "path";
 import open from "open";
@@ -249,6 +248,7 @@ export function maybeHandleNetworkLoadResource(
  * Opens the chrome debugger
  */
 export const openInspector = async (
+	devtoolsUrl: URL,
 	inspectorPort: number,
 	worker: string | undefined
 ) => {
@@ -259,37 +259,10 @@ export const openInspector = async (
 		query.set("domain", worker);
 	}
 	query.set("debugger", "true");
-	const url = `https://devtools.devprod.cloudflare.dev/js_app?${query.toString()}`;
-	const errorMessage =
-		"Failed to open inspector.\nInspector depends on having a Chromium-based browser installed, maybe you need to install one?";
+	const url = new URL(`/js_app?${query.toString()}`, devtoolsUrl);
+	const errorMessage = "Failed to open inspector.";
 
-	// see: https://github.com/sindresorhus/open/issues/177#issue-610016699
-	let braveBrowser: string;
-	switch (os.platform()) {
-		case "darwin":
-		case "win32":
-			braveBrowser = "Brave";
-			break;
-		default:
-			braveBrowser = "brave";
-	}
-
-	const childProcess = await open(url, {
-		app: [
-			{
-				name: open.apps.chrome,
-			},
-			{
-				name: braveBrowser,
-			},
-			{
-				name: open.apps.edge,
-			},
-			{
-				name: open.apps.firefox,
-			},
-		],
-	});
+	const childProcess = await open(url.href);
 	childProcess.on("error", () => {
 		logger.warn(errorMessage);
 	});