Support cordova electron debugging (#966)

* Electron debug support * Add electronPort property * Add experimental label * Label name correction and description * Update requestArgs.ts * Update Indentation * Update package.json --------- Co-authored-by: Rodolfo Liberado (BEYONDSOFT CONSULTING INC) <v-rliberado@microsoft.com>
2024-08-01 03:13:02 -03:00 · 2024-08-01 03:13:02 -03:00 · ec23a27156
--- a/package.json
+++ b/package.json
@ -332,6 +332,22 @@
 							"cwd": "^\"\\${workspaceFolder}\"",
 							"sourceMaps": true
 						}
+					},
+					{
+						"label": "Cordova: Debug on Electron - experimental",
+						"description": "%cordova.snippets.simulateElectron%",
+						"body": {
+							"name": "Debug on Electron - Experimental",
+							"type": "cordova",
+							"request": "launch",
+							"platform": "browser",
+							"target": "electron",
+							"simulatePort": 8000,
+							"electronPort": 9223,
+							"livereload": true,
+							"cwd": "^\"\\${workspaceFolder}\"",
+							"sourceMaps": true
+						}
 					}
 				],
 				"configurationAttributes": {
@ -509,10 +525,15 @@
 								"description": "%cordova.properties.launch.spaUrlRewrites%",
 								"default": false
 							},
-							"hostname":{
+							"hostname": {
 								"type": "string",
 								"description": "%cordova.properties.launch.hostname%",
 								"default": "localhost"
+							},
+							"electronPort": {
+								"type": "number",
+								"description": "%cordova.properties.launch.electronPort%",
+								"default": 9223
 							}
 						}
 					},
@ -603,7 +624,7 @@
 									"./*": "${cwd}/*"
 								}
 							},
-							"hostname":{
+							"hostname": {
 								"type": "string",
 								"description": "%cordova.properties.launch.hostname%",
 								"default": "localhost"
--- a/package.nls.json
+++ b/package.nls.json
@ -23,6 +23,7 @@
  "cordova.snippets.simulateAndroid": "Simulate Cordova Android application in browser",
  "cordova.snippets.simulateiOS": "Simulate Cordova iOS application in browser",
  "cordova.snippets.simulateBrowser": "Run and debug Cordova application in browser",
+  "cordova.snippets.simulateElectron": "Run and debug Electron application",
  "cordova.properties.launch.platform": "The target platform to run for (either 'ios' or 'android'; other platforms are not currently supported)",
  "cordova.properties.launch.cwd": "The root of the project",
  "cordova.properties.launch.target": "Either 'device', 'emulator', or identifier for a specific device / emulator. For simulation in the browser, you can use 'chrome' or 'chromium'",
--- a/src/debugger/cordovaDebugSession.ts
+++ b/src/debugger/cordovaDebugSession.ts
@ -64,6 +64,7 @@ export enum TargetType {
    Device = "device",
    Chrome = "chrome",
    Edge = "edge",
+    Electron = "electron",
 }

 export enum PwaDebugType {
@ -477,33 +478,63 @@ export default class CordovaDebugSession extends LoggingDebugSession {

    private async establishDebugSession(attachArgs: ICordovaAttachRequestArgs): Promise<void> {
        if (this.cordovaCdpProxy) {
-            const attachArguments =
-                this.pwaSessionName === PwaDebugType.Chrome
-                    ? this.jsDebugConfigAdapter.createChromeDebuggingConfig(
-                          attachArgs,
-                          CordovaDebugSession.CDP_PROXY_PORT,
-                          this.pwaSessionName,
-                          this.cordovaSession.getSessionId(),
-                      )
-                    : this.jsDebugConfigAdapter.createSafariDebuggingConfig(
-                          attachArgs,
-                          CordovaDebugSession.CDP_PROXY_PORT,
-                          this.pwaSessionName,
-                          this.cordovaSession.getSessionId(),
-                      );
-
-            const childDebugSessionStarted = await vscode.debug.startDebugging(
-                this.workspaceManager.workspaceRoot,
-                attachArguments,
-                {
-                    parentSession: this.vsCodeDebugSession,
-                    consoleMode: vscode.DebugConsoleMode.MergeWithParent,
-                },
-            );
-            if (!childDebugSessionStarted) {
-                throw ErrorHelper.getInternalError(
-                    InternalErrorCode.CouldNotStartChildDebugSession,
+            if (attachArgs.target == TargetType.Electron) {
+                const attachArguments = this.jsDebugConfigAdapter.createElectronDebuggingConfig(
+                    attachArgs,
+                    CordovaDebugSession.CDP_PROXY_PORT,
+                    this.pwaSessionName,
+                    this.cordovaSession.getSessionId(),
                );
+                const childDebugSessionStarted =
+                    (await vscode.debug.startDebugging(
+                        this.workspaceManager.workspaceRoot,
+                        attachArguments[0],
+                        {
+                            parentSession: this.vsCodeDebugSession,
+                            consoleMode: vscode.DebugConsoleMode.MergeWithParent,
+                        },
+                    )) &&
+                    (await vscode.debug.startDebugging(
+                        this.workspaceManager.workspaceRoot,
+                        attachArguments[1],
+                        {
+                            parentSession: this.vsCodeDebugSession,
+                            consoleMode: vscode.DebugConsoleMode.MergeWithParent,
+                        },
+                    ));
+                if (!childDebugSessionStarted) {
+                    throw ErrorHelper.getInternalError(
+                        InternalErrorCode.CouldNotStartChildDebugSession,
+                    );
+                }
+            } else {
+                const attachArguments =
+                    this.pwaSessionName === PwaDebugType.Chrome
+                        ? this.jsDebugConfigAdapter.createChromeDebuggingConfig(
+                              attachArgs,
+                              CordovaDebugSession.CDP_PROXY_PORT,
+                              this.pwaSessionName,
+                              this.cordovaSession.getSessionId(),
+                          )
+                        : this.jsDebugConfigAdapter.createSafariDebuggingConfig(
+                              attachArgs,
+                              CordovaDebugSession.CDP_PROXY_PORT,
+                              this.pwaSessionName,
+                              this.cordovaSession.getSessionId(),
+                          );
+                const childDebugSessionStarted = await vscode.debug.startDebugging(
+                    this.workspaceManager.workspaceRoot,
+                    attachArguments,
+                    {
+                        parentSession: this.vsCodeDebugSession,
+                        consoleMode: vscode.DebugConsoleMode.MergeWithParent,
+                    },
+                );
+                if (!childDebugSessionStarted) {
+                    throw ErrorHelper.getInternalError(
+                        InternalErrorCode.CouldNotStartChildDebugSession,
+                    );
+                }
            }
        } else {
            throw ErrorHelper.getInternalError(
--- a/src/debugger/jsDebugConfigAdapter.ts
+++ b/src/debugger/jsDebugConfigAdapter.ts
@ -133,6 +133,55 @@ export class JsDebugConfigAdapter {
        });
    }

+    public createElectronDebuggingConfig(
+        attachArgs: ICordovaAttachRequestArgs,
+        cdpProxyPort: number,
+        pwaSessionName: string,
+        sessionId: string,
+    ): any {
+        return [
+            {
+                name: "Electron Main Process",
+                type: "node",
+                request: "launch",
+                runtimeExecutable: `${attachArgs.cwd}/node_modules/.bin/electron`,
+                runtimeArgs: [
+                    `--remote-debugging-port=${attachArgs.electronPort}`,
+                    `${attachArgs.cwd}/platforms/electron/www/cdv-electron-main.js`,
+                ],
+                sourceMaps: true,
+                outFiles: [`${attachArgs.cwd}/platforms/electron/www/**/*.js`],
+                sourceMapPathOverrides: {
+                    "/www/**": `${attachArgs.cwd}/platforms/electron/www/*`,
+                },
+            },
+            {
+                name: pwaSessionName,
+                type: "chrome",
+                request: "attach",
+                port: attachArgs.electronPort,
+                sourceMaps: true,
+                webRoot: `${attachArgs.cwd}/platforms/electron/www/`,
+                // In a remote workspace the parameter specifies js-debug to attach to the CDP proxy on the
+                // remote machine side rather than locally
+                browserAttachLocation: "workspace",
+                // The unique identifier of the debug session. It is used to distinguish Cordova extension's
+                // debug sessions from other ones. So we can save and process only the extension's debug sessions
+                // in vscode.debug API methods "onDidStartDebugSession" and "onDidTerminateDebugSession".
+                cordovaDebugSessionId: sessionId,
+                outFiles: [
+                    `${attachArgs.cwd}/platforms/electron/www/**`,
+                    // Each Cordova platform contains a copy of the js code located in the "www" folder in the project root.
+                    // JS content in platforms may differ from the actual code in the "www" folder which could cause incorrect
+                    // source mapping. So we should exclude the "platforms" folder from relevant output files.
+                    // There is the issue in VS Code https://github.com/microsoft/vscode/issues/104889 relatad to incorrect
+                    // processing of two and more including and excluding glob expressions, so we have to use the braced section.
+                    "!{**/node_modules/**,platforms/**}",
+                ],
+            },
+        ];
+    }
+
    private getExistingExtraArgs(attachArgs: ICordovaAttachRequestArgs): any {
        const existingExtraArgs: any = {};
        if (attachArgs.env) {
--- a/src/debugger/requestArgs.ts
+++ b/src/debugger/requestArgs.ts
@ -31,6 +31,9 @@ export interface ICordovaAttachRequestArgs extends DebugProtocol.AttachRequestAr
    runtimeVersion?: string;
    hostname?: string;

+    // Electron debug properties
+    electronPort?: number;
+
    // iOS debug properties
    iOSVersion?: string;
    iOSAppPackagePath?: string;
--- a/src/extension/browser/browserPlatform.ts
+++ b/src/extension/browser/browserPlatform.ts
@ -81,7 +81,11 @@ export default class BrowserPlatform extends AbstractPlatform {
                this.platformOpts.projectType,
            );
            await this.connectSimulateDebugHost(simulateInfo);
-            await this.platformOpts.pluginSimulator.launchSimHost(this.platformOpts.target);
+            await this.platformOpts.pluginSimulator.launchSimHost(
+                this.platformOpts.target == TargetType.Electron
+                    ? TargetType.Chrome
+                    : this.platformOpts.target,
+            );
            this.platformOpts.simulatePort = CordovaProjectHelper.getPortFromURL(
                simulateInfo.appHostUrl,
            );
@ -101,6 +105,8 @@ export default class BrowserPlatform extends AbstractPlatform {
                    execa,
                );
                break;
+            case TargetType.Electron:
+                return { devServerPort };
            case TargetType.Chrome:
            default:
                browserFinder = new browserHelper.ChromeBrowserFinder(