Support debugging integrated browser

package.json

@@ -155,7 +155,8 @@
   "enabledApiProposals": [
     "portsAttributes",
     "workspaceTrust",
-    "tunnels"
+    "tunnels",
+    "browser"
   ],
   "extensionKind": [
     "workspace"

package.nls.json

@@ -47,6 +47,11 @@
   "chrome.label": "Web App (Chrome)",
   "chrome.launch.description": "Launch Chrome to debug a URL",
   "chrome.launch.label": "Chrome: Launch",
+  "editorBrowser.attach.description": "Attach to an open VS Code integrated browser",
+  "editorBrowser.attach.label": "Integrated Browser: Attach",
+  "editorBrowser.label": "Web App (Integrated Browser)",
+  "editorBrowser.launch.description": "Launch a VS Code integrated browser to debug a URL",
+  "editorBrowser.launch.label": "Integrated Browser: Launch",
   "commands.callersAdd.label": "Exclude Caller",
   "commands.callersAdd.paletteLabel": "Exclude caller from pausing in the current location",
   "commands.callersGoToCaller.label": "Go to caller location",

src/build/generate-contributions.ts

@@ -27,13 +27,17 @@ import {
   chromeLaunchConfigDefaults,
   edgeAttachConfigDefaults,
   edgeLaunchConfigDefaults,
+  editorBrowserAttachConfigDefaults,
+  editorBrowserLaunchConfigDefaults,
   extensionHostConfigDefaults,
   IBaseConfiguration,
   IChromeAttachConfiguration,
   IChromeLaunchConfiguration,
   IChromiumBaseConfiguration,
   IEdgeAttachConfiguration,
   IEdgeLaunchConfiguration,
+  IEditorBrowserAttachConfiguration,
+  IEditorBrowserLaunchConfiguration,
   IExtensionHostLaunchConfiguration,
   IMandatedConfiguration,
   INodeAttachConfiguration,
@@ -103,7 +107,11 @@ const forAnyDebugType = (contextKey: string, andExpr?: string) =>
   forSomeContextKeys(allDebugTypes, contextKey, andExpr);
 
 const forBrowserDebugType = (contextKey: string, andExpr?: string) =>
-  forSomeContextKeys([DebugType.Chrome, DebugType.Edge], contextKey, andExpr);
+  forSomeContextKeys(
+    [DebugType.Chrome, DebugType.Edge, DebugType.EditorBrowser],
+    contextKey,
+    andExpr,
+  );
 
 const forNodeDebugType = (contextKey: string, andExpr?: string) =>
   forSomeContextKeys([DebugType.Node, DebugType.ExtensionHost, 'node'], contextKey, andExpr);
@@ -137,6 +145,7 @@ interface IDebugger<T extends AnyLaunchConfiguration> {
   configurationAttributes: ConfigurationAttributes<T>;
   defaults: T;
   strings?: { unverifiedBreakpoints?: string };
+  when?: string;
 }
 
 const commonLanguages = ['javascript', 'typescript', 'javascriptreact', 'typescriptreact'];
@@ -1095,6 +1104,62 @@ const edgeAttachConfig: IDebugger<IEdgeAttachConfiguration> = {
   defaults: edgeAttachConfigDefaults,
 };
 
+const editorBrowserLaunchConfig: IDebugger<IEditorBrowserLaunchConfiguration> = {
+  type: DebugType.EditorBrowser,
+  request: 'launch',
+  label: refString('editorBrowser.label'),
+  languages: browserLanguages,
+  when: '!isWeb',
+  configurationSnippets: [
+    {
+      label: refString('editorBrowser.launch.label'),
+      description: refString('editorBrowser.launch.description'),
+      body: {
+        type: DebugType.EditorBrowser,
+        request: 'launch',
+        name: 'Launch Integrated Browser',
+        url: 'http://localhost:8080',
+        webRoot: '^"${2:\\${workspaceFolder\\}}"',
+      },
+    },
+  ],
+  configurationAttributes: {
+    ...chromiumBaseConfigurationAttributes,
+    url: {
+      type: 'string',
+      description: refString('browser.url.description'),
+      default: 'http://localhost:8080',
+      tags: [Tag.Setup],
+    },
+  },
+  required: ['url'],
+  defaults: editorBrowserLaunchConfigDefaults,
+};
+
+const editorBrowserAttachConfig: IDebugger<IEditorBrowserAttachConfiguration> = {
+  type: DebugType.EditorBrowser,
+  request: 'attach',
+  label: refString('editorBrowser.label'),
+  languages: browserLanguages,
+  when: '!isWeb',
+  configurationSnippets: [
+    {
+      label: refString('editorBrowser.attach.label'),
+      description: refString('editorBrowser.attach.description'),
+      body: {
+        type: DebugType.EditorBrowser,
+        request: 'attach',
+        name: 'Attach to Integrated Browser',
+        webRoot: '^"${2:\\${workspaceFolder\\}}"',
+      },
+    },
+  ],
+  configurationAttributes: {
+    ...chromiumBaseConfigurationAttributes,
+  },
+  defaults: editorBrowserAttachConfigDefaults,
+};
+
 export const debuggers = [
   nodeAttachConfig,
   nodeLaunchConfig,
@@ -1104,6 +1169,8 @@ export const debuggers = [
   chromeAttachConfig,
   edgeLaunchConfig,
   edgeAttachConfig,
+  editorBrowserLaunchConfig,
+  editorBrowserAttachConfig,
 ];
 
 function buildDebuggers() {

src/common/contributionUtils.ts

@@ -82,13 +82,15 @@ export const enum DebugType {
   Node = 'pwa-node',
   Chrome = 'pwa-chrome',
   Edge = 'pwa-msedge',
+  EditorBrowser = 'pwa-editor-browser',
 }
 
 export const preferredDebugTypes: ReadonlyMap<DebugType, string> = new Map([
   [DebugType.Node, 'node'],
   [DebugType.Chrome, 'chrome'],
   [DebugType.ExtensionHost, 'extensionHost'],
   [DebugType.Edge, 'msedge'],
+  [DebugType.EditorBrowser, 'editor-browser'],
 ]);
 
 export const getPreferredOrDebugType = <T extends DebugType>(t: T) =>
@@ -101,6 +103,7 @@ const debugTypes: { [K in DebugType]: null } = {
   [DebugType.Node]: null,
   [DebugType.Chrome]: null,
   [DebugType.Edge]: null,
+  [DebugType.EditorBrowser]: null,
 };
 
 const commandsObj: { [K in Commands]: null } = {

src/configuration.ts

@@ -759,6 +759,23 @@ export interface IEdgeAttachConfiguration extends IChromiumAttachConfiguration {
   useWebView: boolean | { pipeName: string };
 }
 
+/**
+ * Configuration to launch a VS Code integrated browser.
+ */
+export interface IEditorBrowserLaunchConfiguration extends IChromiumBaseConfiguration {
+  type: DebugType.EditorBrowser;
+  request: 'launch';
+  url: string;
+}
+
+/**
+ * Configuration to attach to VS Code integrated browsers.
+ */
+export interface IEditorBrowserAttachConfiguration extends IChromiumBaseConfiguration {
+  type: DebugType.EditorBrowser;
+  request: 'attach';
+}
+
 /**
  * Attach request used internally to inject a pre-built target into the lifecycle.
  */
@@ -777,10 +794,16 @@ export type AnyNodeConfiguration =
   | ITerminalDelegateConfiguration;
 export type AnyChromeConfiguration = IChromeAttachConfiguration | IChromeLaunchConfiguration;
 export type AnyEdgeConfiguration = IEdgeAttachConfiguration | IEdgeLaunchConfiguration;
+export type AnyEditorBrowserConfiguration =
+  | IEditorBrowserAttachConfiguration
+  | IEditorBrowserLaunchConfiguration;
 export type AnyChromiumLaunchConfiguration = IEdgeLaunchConfiguration | IChromeLaunchConfiguration;
 export type AnyChromiumAttachConfiguration = IEdgeAttachConfiguration | IChromeAttachConfiguration;
 export type AnyChromiumConfiguration = AnyEdgeConfiguration | AnyChromeConfiguration;
-export type AnyLaunchConfiguration = AnyChromiumConfiguration | AnyNodeConfiguration;
+export type AnyLaunchConfiguration =
+  | AnyChromiumConfiguration
+  | AnyNodeConfiguration
+  | AnyEditorBrowserConfiguration;
 export type AnyTerminalConfiguration =
   | ITerminalDelegateConfiguration
   | ITerminalLaunchConfiguration;
@@ -809,13 +832,17 @@ export type ResolvingNodeConfiguration =
   | ResolvingNodeLaunchConfiguration;
 export type ResolvingChromeConfiguration = ResolvingConfiguration<AnyChromeConfiguration>;
 export type ResolvingEdgeConfiguration = ResolvingConfiguration<AnyEdgeConfiguration>;
+export type ResolvingEditorBrowserConfiguration = ResolvingConfiguration<
+  AnyEditorBrowserConfiguration
+>;
 export type AnyResolvingConfiguration =
   | ResolvingExtensionHostConfiguration
   | ResolvingChromeConfiguration
   | ResolvingNodeAttachConfiguration
   | ResolvingNodeLaunchConfiguration
   | ResolvingTerminalConfiguration
-  | ResolvingEdgeConfiguration;
+  | ResolvingEdgeConfiguration
+  | ResolvingEditorBrowserConfiguration;
 
 export const AnyLaunchConfiguration = Symbol('AnyLaunchConfiguration');
 
@@ -977,6 +1004,32 @@ export const edgeLaunchConfigDefaults: IEdgeLaunchConfiguration = {
   useWebView: false,
 };
 
+const editorBrowserBaseDefaults: IChromiumBaseConfiguration = {
+  ...baseDefaults,
+  disableNetworkCache: true,
+  pathMapping: {},
+  url: null,
+  urlFilter: '',
+  sourceMapPathOverrides: defaultSourceMapPathOverrides('${webRoot}'),
+  webRoot: '${workspaceFolder}',
+  server: null,
+  vueComponentPaths: ['${workspaceFolder}/**/*.vue', '!**/node_modules/**'],
+  perScriptSourcemaps: 'auto',
+};
+
+export const editorBrowserAttachConfigDefaults: IEditorBrowserAttachConfiguration = {
+  ...editorBrowserBaseDefaults,
+  type: DebugType.EditorBrowser,
+  request: 'attach',
+};
+
+export const editorBrowserLaunchConfigDefaults: IEditorBrowserLaunchConfiguration = {
+  ...editorBrowserBaseDefaults,
+  type: DebugType.EditorBrowser,
+  request: 'launch',
+  url: 'http://localhost:8080',
+};
+
 export const nodeAttachConfigDefaults: INodeAttachConfiguration = {
   ...nodeBaseDefaults,
   type: DebugType.Node,
@@ -1047,6 +1100,14 @@ export function applyEdgeDefaults(
     : { ...edgeLaunchConfigDefaults, browserLaunchLocation: browserLocation, ...config };
 }
 
+export function applyEditorBrowserDefaults(
+  config: ResolvingEditorBrowserConfiguration,
+): AnyEditorBrowserConfiguration {
+  return config.request === 'attach'
+    ? { ...editorBrowserAttachConfigDefaults, ...config }
+    : { ...editorBrowserLaunchConfigDefaults, ...config };
+}
+
 export function applyExtensionHostDefaults(
   config: ResolvingExtensionHostConfiguration,
 ): IExtensionHostLaunchConfiguration {
@@ -1089,6 +1150,9 @@ export function applyDefaults(
     case DebugType.Terminal:
       configWithDefaults = applyTerminalDefaults(config);
       break;
+    case DebugType.EditorBrowser:
+      configWithDefaults = applyEditorBrowserDefaults(config);
+      break;
     default:
       throw assertNever(config, 'Unknown config: {value}');
   }

src/targets/browser/browserLaunchParams.ts

@@ -4,9 +4,11 @@
 
 import { URL } from 'url';
 import { absolutePathToFileUrlWithDetection } from '../../common/urlUtils';
-import { AnyChromiumConfiguration } from '../../configuration';
+import { AnyChromiumConfiguration, AnyEditorBrowserConfiguration } from '../../configuration';
 
-export function baseURL(params: AnyChromiumConfiguration): string | undefined {
+export function baseURL(
+  params: AnyChromiumConfiguration | AnyEditorBrowserConfiguration,
+): string | undefined {
   if ('file' in params && params.file) {
     return absolutePathToFileUrlWithDetection(params.file);
   }