Update devtoolsFrontendUrl value in target list (#39122)

Summary:
Pull Request resolved: #39122

Updates the `devtoolsFrontendUrl` value returned in the `/json/list` endpoint, to match the fixed DevTools frontend revision we set for `/open-debugger` — which now uses this as the source of truth.

Changelog: [Internal]

Reviewed By: motiz88

Differential Revision: D48561005

fbshipit-source-id: 19409d013366f82782a071a0ec01d1ce8fab8c38

Author: huntie

packages/dev-middleware/src/inspector-proxy/InspectorProxy.js

@@ -18,9 +18,10 @@ import type {
 import type {EventReporter} from '../types/EventReporter';
 import type {IncomingMessage, ServerResponse} from 'http';
 
-import Device from './Device';
 import url from 'url';
 import WS from 'ws';
+import getDevToolsFrontendUrl from '../utils/getDevToolsFrontendUrl';
+import Device from './Device';
 
 const debug = require('debug')('Metro:InspectorProxy');
 
@@ -114,15 +115,13 @@ export default class InspectorProxy {
   ): PageDescription {
     const debuggerUrl = `${this._serverBaseUrl}${WS_DEBUGGER_URL}?device=${deviceId}&page=${page.id}`;
     const webSocketDebuggerUrl = 'ws://' + debuggerUrl;
-    const devtoolsFrontendUrl =
-      'devtools://devtools/bundled/js_app.html?experiments=true&v8only=true&ws=' +
-      encodeURIComponent(debuggerUrl);
+
     return {
       id: `${deviceId}-${page.id}`,
       description: page.app,
       title: page.title,
       faviconUrl: 'https://reactjs.org/favicon.ico',
-      devtoolsFrontendUrl,
+      devtoolsFrontendUrl: getDevToolsFrontendUrl(webSocketDebuggerUrl),
       type: 'node',
       webSocketDebuggerUrl,
       vm: page.vm,

packages/dev-middleware/src/middleware/openDebuggerMiddleware.js

@@ -17,7 +17,7 @@ import type {Logger} from '../types/Logger';
 
 import url from 'url';
 import getDevServerUrl from '../utils/getDevServerUrl';
-import launchChromeDevTools from '../utils/launchChromeDevTools';
+import launchDebuggerAppWindow from '../utils/launchDebuggerAppWindow';
 import queryInspectorTargets from '../utils/queryInspectorTargets';
 
 const debuggerInstances = new Map<string, LaunchedChrome>();
@@ -81,7 +81,10 @@ export default function openDebuggerMiddleware({
         debuggerInstances.get(appId)?.kill();
         debuggerInstances.set(
           appId,
-          await launchChromeDevTools(target.webSocketDebuggerUrl),
+          await launchDebuggerAppWindow(
+            target.devtoolsFrontendUrl,
+            'open-debugger',
+          ),
         );
         res.end();
         eventReporter?.logEvent({

packages/dev-middleware/src/utils/launchChromeDevTools.js renamed to packages/dev-middleware/src/utils/getDevToolsFrontendUrl.js

@@ -9,10 +9,6 @@
  * @oncall react_native
  */
 
-import type {LaunchedChrome} from 'chrome-launcher';
-
-import launchDebuggerAppWindow from './launchDebuggerAppWindow';
-
 /**
  * The Chrome DevTools frontend revision to use. This should be set to the
  * latest version known to be compatible with Hermes.
@@ -23,16 +19,13 @@ import launchDebuggerAppWindow from './launchDebuggerAppWindow';
 const DEVTOOLS_FRONTEND_REV = 'd9568d04d7dd79269c5a655d7ada69650c5a8336'; // Chrome 100.0.4896.75
 
 /**
- * Attempt to launch Chrome DevTools on the host machine for a given CDP target.
+ * Construct the URL to Chrome DevTools connected to a given debugger target.
  */
-export default async function launchChromeDevTools(
+export default function getDevToolsFrontendUrl(
   webSocketDebuggerUrl: string,
-): Promise<LaunchedChrome> {
+): string {
   const urlBase = `https://chrome-devtools-frontend.appspot.com/serve_rev/@${DEVTOOLS_FRONTEND_REV}/devtools_app.html`;
   const ws = webSocketDebuggerUrl.replace(/^ws:\/\//, '');
 
-  return launchDebuggerAppWindow(
-    `${urlBase}?panel=console&ws=${encodeURIComponent(ws)}`,
-    'open-debugger',
-  );
+  return `${urlBase}?panel=console&ws=${encodeURIComponent(ws)}`;
 }