Fix attach request for different metro ports (#2007)

* Fix packager port issue

* Fix attach request for different metro ports

* Fix issues

* Update

* Update

Author: EzioLi01

.vscode/launch.json

@@ -18,8 +18,7 @@
             "runtimeExecutable": "${execPath}",
             "args": ["--extensionDevelopmentPath=${workspaceRoot}"],
             "sourceMaps": true,
-            "outFiles": ["${workspaceRoot}/src/**/*.js"],
-            "preLaunchTask": "gulp: quick-build"
+            "outFiles": ["${workspaceRoot}/src/**/*.js"]
         },
         {
             "name": "Launch Extension tests",

src/cdp-proxy/debuggerEndpointHelper.ts

@@ -36,10 +36,21 @@ export class DebuggerEndpointHelper {
         attemptNumber: number,
         cancellationToken: CancellationToken,
         isHermes: boolean = false,
+        settingsPort?: number,
     ): Promise<string> {
         while (true) {
             try {
-                return await this.getWSEndpoint(browserURL, isHermes);
+                let url = "";
+                if (settingsPort) {
+                    url = `http://localhost:${settingsPort}`;
+                    try {
+                        return await this.getWSEndpoint(browserURL, isHermes);
+                    } catch {
+                        return await this.getWSEndpoint(url, isHermes);
+                    }
+                } else {
+                    return await this.getWSEndpoint(browserURL, isHermes);
+                }
             } catch (err) {
                 if (attemptNumber < 1 || cancellationToken.isCancellationRequested) {
                     const internalError = ErrorHelper.getInternalError(
@@ -85,6 +96,15 @@ export class DebuggerEndpointHelper {
                 ? this.tryToGetHermesImprovedChromeReloadsWebSocketDebuggerUrl(jsonList)
                 : jsonList[0].webSocketDebuggerUrl;
         }
+        // Try to get websocket endpoint from default metro bundler
+        const defaultJsonList = await this.fetchJson<DebuggableEndpointData[]>(
+            "http://localhost:8081/json/list",
+        );
+        if (defaultJsonList.length) {
+            return isHermes
+                ? this.tryToGetHermesImprovedChromeReloadsWebSocketDebuggerUrl(defaultJsonList)
+                : defaultJsonList[0].webSocketDebuggerUrl;
+        }
 
         throw new Error("Could not find any debuggable target");
     }

src/common/packager.ts

@@ -100,6 +100,10 @@ export class Packager {
         return this.packagerPort || SettingsHelper.getPackagerPort(this.workspacePath);
     }
 
+    public resetToSettingsPort(): void {
+        this.packagerPort = SettingsHelper.getPackagerPort(this.workspacePath);
+    }
+
     public setRunOptions(runOptions: IRunOptions): void {
         this.runOptions = runOptions;
     }
@@ -111,6 +115,7 @@ export class Packager {
     public getStatusIndicator(): PackagerStatusIndicator {
         return this.packagerStatusIndicator;
     }
+
     public getHost(): string {
         return Packager.getHostForPort(this.getPort());
     }

src/debugger/debugSessionBase.ts

@@ -185,6 +185,10 @@ export abstract class DebugSessionBase extends LoggingDebugSession {
                     this.vsCodeDebugSession.workspaceFolder.uri.fsPath,
                 );
             }
+            const settingsPort = this.appLauncher.getPackagerPort(projectRootPath);
+            if (this.appLauncher.getPackager().getPort() != settingsPort) {
+                this.appLauncher.getPackager().resetToSettingsPort();
+            }
         }
     }
 

src/debugger/direct/directDebugSession.ts

@@ -24,6 +24,7 @@ import { BaseCDPMessageHandler } from "../../cdp-proxy/CDPMessageHandlers/baseCD
 import { TipNotificationService } from "../../extension/services/tipsNotificationsService/tipsNotificationService";
 import { RNSession } from "../debugSessionWrapper";
 import { IWDPHelper } from "./IWDPHelper";
+import { SettingsHelper } from "../../extension/settingsHelper";
 
 nls.config({
     messageFormat: nls.MessageFormat.bundle,
@@ -243,11 +244,13 @@ export class DirectDebugSession extends DebugSessionBase {
                         }
                     });
 
+                const settingsPorts = SettingsHelper.getPackagerPort(attachArgs.cwd);
                 const browserInspectUri = await this.debuggerEndpointHelper.retryGetWSEndpoint(
                     `http://localhost:${attachArgs.port}`,
                     90,
                     this.cancellationTokenSource.token,
                     attachArgs.useHermesEngine,
+                    settingsPorts,
                 );
                 this.appLauncher.getRnCdpProxy().setBrowserInspectUri(browserInspectUri);
                 await this.establishDebugSession(attachArgs);