Use host-relative WebSocket URLs when launching new debugger

Summary:
Changelog: [Internal]

Uses the capability introduced in https://github.com/facebookexperimental/rn-chrome-devtools-frontend/pull/4 to avoid repeating the dev server's host:port in the `ws` / `wss` parameter we pass to the Chrome DevTools frontend. This gives us more flexibility to handle port forwarding and redirects outside of `dev-middleware`. This is mostly useful in Meta's internal VS Code remoting setup, but this particular change should work equally well in open source.

Reviewed By: huntie

Differential Revision: D54107316

fbshipit-source-id: 68d4dbf4849ca431274bfb0dc8a4e05981bdd5b5

packages/dev-middleware/src/utils/getDevToolsFrontendUrl.js

@@ -18,16 +18,21 @@ export default function getDevToolsFrontendUrl(
   experiments: Experiments,
   webSocketDebuggerUrl: string,
   devServerUrl: string,
+  options?: $ReadOnly<{
+    relative?: boolean,
+  }>,
 ): string {
-  const scheme = new URL(webSocketDebuggerUrl).protocol.slice(0, -1);
-  const webSocketUrlWithoutProtocol = webSocketDebuggerUrl.replace(
-    /^wss?:\/\//,
-    '',
-  );
-  const appUrl = `${devServerUrl}/debugger-frontend/rn_inspector.html`;
+  const wsParam = getWsParam({
+    webSocketDebuggerUrl,
+    devServerUrl,
+  });
+
+  const appUrl =
+    (options?.relative === true ? '' : devServerUrl) +
+    '/debugger-frontend/rn_inspector.html';
 
   const searchParams = new URLSearchParams([
-    [scheme, webSocketUrlWithoutProtocol],
+    [wsParam.key, wsParam.value],
     ['sources.hide_add_folder', 'true'],
   ]);
   if (experiments.enableNetworkInspector) {
@@ -36,3 +41,28 @@ export default function getDevToolsFrontendUrl(
 
   return appUrl + '?' + searchParams.toString();
 }
+
+function getWsParam({
+  webSocketDebuggerUrl,
+  devServerUrl,
+}: $ReadOnly<{
+  webSocketDebuggerUrl: string,
+  devServerUrl: string,
+}>): {
+  key: string,
+  value: string,
+} {
+  const wsUrl = new URL(webSocketDebuggerUrl);
+  const serverHost = new URL(devServerUrl).host;
+  let value;
+  if (wsUrl.host === serverHost) {
+    // Use a path-absolute (host-relative) URL
+    // Depends on https://github.com/facebookexperimental/rn-chrome-devtools-frontend/pull/4
+    value = wsUrl.pathname + wsUrl.search + wsUrl.hash;
+  } else {
+    // Standard URL format accepted by the DevTools frontend
+    value = wsUrl.host + wsUrl.pathname + wsUrl.search + wsUrl.hash;
+  }
+  const key = wsUrl.protocol.slice(0, -1);
+  return {key, value};
+}