From 1bd5d6de8de63e5551e81180381d658a586ba60b Mon Sep 17 00:00:00 2001
From: Alex Hunt <huntie@meta.com>
Date: Wed, 23 Aug 2023 04:16:51 -0700
Subject: [PATCH] Update devtoolsFrontendUrl value in target list (#39122)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Summary:
Pull Request resolved: https://github.com/facebook/react-native/pull/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: 7916c7d24917dd5bb5abde5668c922a015f1f631
---
 .../src/inspector-proxy/InspectorProxy.js         |  9 ++++-----
 .../src/middleware/openDebuggerMiddleware.js      |  7 +++++--
 ...hromeDevTools.js => getDevToolsFrontendUrl.js} | 15 ++++-----------
 3 files changed, 13 insertions(+), 18 deletions(-)
 rename packages/dev-middleware/src/utils/{launchChromeDevTools.js => getDevToolsFrontendUrl.js} (66%)

diff --git a/packages/dev-middleware/src/inspector-proxy/InspectorProxy.js b/packages/dev-middleware/src/inspector-proxy/InspectorProxy.js
index 29e29abc4f2c38..35ac3f29cada66 100644
--- a/packages/dev-middleware/src/inspector-proxy/InspectorProxy.js
+++ b/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,
diff --git a/packages/dev-middleware/src/middleware/openDebuggerMiddleware.js b/packages/dev-middleware/src/middleware/openDebuggerMiddleware.js
index b8020806b1aa38..e761a21af6b7f7 100644
--- a/packages/dev-middleware/src/middleware/openDebuggerMiddleware.js
+++ b/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({
diff --git a/packages/dev-middleware/src/utils/launchChromeDevTools.js b/packages/dev-middleware/src/utils/getDevToolsFrontendUrl.js
similarity index 66%
rename from packages/dev-middleware/src/utils/launchChromeDevTools.js
rename to packages/dev-middleware/src/utils/getDevToolsFrontendUrl.js
index 9da4844a40405e..d39d835965e845 100644
--- a/packages/dev-middleware/src/utils/launchChromeDevTools.js
+++ b/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)}`;
 }