feat: automatically forward ports in remote debugging

Fixes #373

Author: connor4312

src/build/generate-contributions.ts

@@ -846,6 +846,11 @@ const configurationSchema: ConfigurationAttributes<IConfigurationTypes> = {
     description: refString('configuration.suggestPrettyPrinting'),
     default: true,
   },
+  [Configuration.AutoServerTunnelOpen]: {
+    type: 'boolean',
+    description: refString('configuration.automaticallyTunnelRemoteServer'),
+    default: true,
+  },
 };
 
 process.stdout.write(

src/build/strings.ts

@@ -198,6 +198,8 @@ const strings = {
   'configuration.usePreview': 'Use the new in-preview JavaScript debugger for Node.js and Chrome.',
   'configuration.suggestPrettyPrinting':
     'Whether to suggest pretty printing JavaScript code that looks minified when you step into it.',
+  'configuration.automaticallyTunnelRemoteServer':
+    'When debugging a remote web app, configures whether to automatically tunnel the remote server to your local machine.',
 };
 
 export default strings;

src/common/contributionUtils.ts

@@ -55,6 +55,7 @@ export const enum Configuration {
   WarnOnLongPrediction = 'debug.javascript.warnOnLongPrediction',
   TerminalDebugConfig = 'debug.javascript.terminalOptions',
   SuggestPrettyPrinting = 'debug.javascript.suggestPrettyPrinting',
+  AutoServerTunnelOpen = 'debug.javascript.automaticallyTunnelRemoteServer',
 }
 
 /**
@@ -66,6 +67,7 @@ export interface IConfigurationTypes {
   [Configuration.WarnOnLongPrediction]: boolean;
   [Configuration.TerminalDebugConfig]: Partial<ITerminalLaunchConfiguration>;
   [Configuration.SuggestPrettyPrinting]: boolean;
+  [Configuration.AutoServerTunnelOpen]: boolean;
 }
 
 export interface ICommandTypes {

src/ui/companionBrowserLaunch.ts

@@ -4,26 +4,63 @@
 
 import * as vscode from 'vscode';
 import Dap from '../dap/api';
+import { readConfig, Configuration } from '../common/contributionUtils';
+import { URL } from 'url';
 
 const sessionTunnels = new Map<string, vscode.Tunnel>();
 
+const tunnelRemoteServerIfNecessary = async (args: Dap.LaunchBrowserInCompanionEventParams) => {
+  const urlStr = (args.params as { url?: string }).url;
+  if (!urlStr) {
+    return;
+  }
+
+  let url: URL;
+  try {
+    url = new URL(urlStr);
+  } catch (e) {
+    return;
+  }
+
+  if (!readConfig(vscode.workspace.getConfiguration(), Configuration.AutoServerTunnelOpen)) {
+    return;
+  }
+
+  const port = Number(url.port) || 80;
+  if ((await vscode.workspace.tunnels).some(t => t.localAddress.endsWith(`:${port}`))) {
+    return;
+  }
+
+  try {
+    await vscode.workspace.openTunnel({
+      remoteAddress: { port, host: 'localhost' },
+      localAddressPort: port,
+    });
+  } catch {
+    // throws if already forwarded by user or by us previously
+  }
+};
+
 const launchCompanionBrowser = async (
   session: vscode.DebugSession,
   args: Dap.LaunchBrowserInCompanionEventParams,
 ) => {
   try {
-    const tunnel = await vscode.workspace.openTunnel({
-      remoteAddress: { port: args.serverPort, host: 'localhost' },
-      localAddressPort: args.serverPort,
-      label: 'Browser Debug Tunnel',
-    });
+    const [, tunnel] = await Promise.all([
+      tunnelRemoteServerIfNecessary(args),
+      vscode.workspace.openTunnel({
+        remoteAddress: { port: args.serverPort, host: 'localhost' },
+        localAddressPort: args.serverPort,
+        label: 'Browser Debug Tunnel',
+      }),
+    ]);
 
     sessionTunnels.set(session.id, tunnel);
 
     await vscode.commands.executeCommand('js-debug-companion.launchAndAttach', {
       proxyUri: tunnel
         ? `${tunnel.remoteAddress.host}:${tunnel.remoteAddress.port}`
-        : `127.0.01:${args.serverPort}`,
+        : `127.0.0.1:${args.serverPort}`,
       ...args,
     });
   } catch (e) {