fix: force-open a chromium-based browser for devtools (#599)

We rely on Chromium-based devtools for debugging workers, so when opening up the devtools URL,
we should force a chromium-based browser to launch. For now, this means checking (in order)
for Chrome and Edge, and then failing if neither of those are available.

Closes #389

.changeset/clean-swans-attend.md

@@ -0,0 +1,9 @@
+---
+"wrangler": patch
+---
+
+Force-open a chromium-based browser for devtools
+
+We rely on Chromium-based devtools for debugging workers, so when opening up the devtools URL,
+we should force a chromium-based browser to launch. For now, this means checking (in order)
+for Chrome and Edge, and then failing if neither of those are available.

packages/wrangler/src/dev.tsx

@@ -845,7 +845,8 @@ function useHotkeys(
         // toggle inspector
         case "d": {
           await openInBrowser(
-            `https://built-devtools.pages.dev/js_app?experiments=true&v8only=true&ws=localhost:${inspectorPort}/ws`
+            `https://built-devtools.pages.dev/js_app?experiments=true&v8only=true&ws=localhost:${inspectorPort}/ws`,
+            { forceChromium: true }
           );
           break;
         }

packages/wrangler/src/open-in-browser.ts

@@ -1,12 +1,24 @@
 import open from "open";
+
 /**
  * An extremely simple wrapper around the open command.
  * Specifically, it adds an 'error' event handler so that when this function
  * is called in environments where we can't open the browser (e.g. github codespaces,
  * stackblitz, remote servers), it doesn't just crash the process.
+ *
+ * @param url the URL to point the browser at
+ * @param options open a chromium-based browser instead of the default
  */
-export default async function openInBrowser(url: string): Promise<void> {
-  const childProcess = await open(url);
+export default async function openInBrowser(
+  url: string,
+  { forceChromium }: { forceChromium: boolean } = { forceChromium: false }
+): Promise<void> {
+  const options: open.Options | undefined = forceChromium
+    ? {
+        app: [{ name: open.apps.chrome }, { name: open.apps.edge }],
+      }
+    : undefined;
+  const childProcess = await open(url, options);
   childProcess.on("error", () => {
     console.warn(`Failed to open ${url} in a browser`);
   });