feat: support UWP webview debugging (#1282)

connor4312 · web-flow · commit 80a21b20a17a · 2022-05-20T14:04:19.000-07:00
* feat: allow debugging hosted uwps

* debug

* fixup! final fixings
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -33,6 +33,7 @@ This changelog records changes to stable releases since 1.50.2. "TBA" changes he
 ### v1.66.1 - 2022-03-24
 
 - feat: adopt `CompletionItem.detail` ([vscode#145645](https://github.com/microsoft/vscode/issues/145645))
+- feat: support for debugging webviews in UWPs ([#1209](https://github.com/microsoft/vscode-js-debug/issues/1209))
 - fix: accessor properties not being writable ([vscode#146001](https://github.com/microsoft/vscode/issues/146001))
 - fix: completions sometimes throwing issue on accessor ([#1218](https://github.com/microsoft/vscode-js-debug/issues/1218))
 
diff --git a/OPTIONS.md b/OPTIONS.md
@@ -343,7 +343,7 @@
 <h5>Default value:</h4><pre><code>false</pre></code><h4>url</h4><p>Will search for a tab with this exact url and attach to it, if found</p>
 <h5>Default value:</h4><pre><code>null</pre></code><h4>urlFilter</h4><p>Will search for a page with this url and attach to it, if found. Can have * wildcards.</p>
 <h5>Default value:</h4><pre><code>"*"</pre></code><h4>userDataDir</h4><p>By default, the browser is launched with a separate user profile in a temp folder. Use this option to override it. Set to false to launch with your default user profile. A new browser can&#39;t be launched if an instance is already running from <code>userDataDir</code>.</p>
-<h5>Default value:</h4><pre><code>true</pre></code><h4>useWebView</h4><p>(Edge (Chromium) only) When &#39;true&#39;, the debugger will treat the runtime executable as a host application that contains a WebView allowing you to debug the WebView script content.</p>
+<h5>Default value:</h4><pre><code>true</pre></code><h4>useWebView</h4><p>When &#39;true&#39;, the debugger will treat the runtime executable as a host application that contains a WebView allowing you to debug the WebView script content.</p>
 <h5>Default value:</h4><pre><code>false</pre></code><h4>vueComponentPaths</h4><p>A list of file glob patterns to find <code>*.vue</code> components. By default, searches the entire workspace. This needs to be specified due to extra lookups that Vue&#39;s sourcemaps require in Vue CLI 4. You can disable this special handling by setting this to an empty array.</p>
 <h5>Default value:</h4><pre><code>[
   "${workspaceFolder}/**/*.vue",
@@ -390,7 +390,7 @@
 <h5>Default value:</h4><pre><code>{}</pre></code><h4>trace</h4><p>Configures what diagnostic output is produced.</p>
 <h5>Default value:</h4><pre><code>false</pre></code><h4>url</h4><p>Will search for a tab with this exact url and attach to it, if found</p>
 <h5>Default value:</h4><pre><code>null</pre></code><h4>urlFilter</h4><p>Will search for a page with this url and attach to it, if found. Can have * wildcards.</p>
-<h5>Default value:</h4><pre><code>""</pre></code><h4>useWebView</h4><p>(Edge (Chromium) only) When &#39;true&#39;, the debugger will treat the runtime executable as a host application that contains a WebView allowing you to debug the WebView script content.</p>
+<h5>Default value:</h4><pre><code>""</pre></code><h4>useWebView</h4><p>An object containing the <code>pipeName</code> of a debug pipe for a UWP hosted Webview2. This is the &quot;MyTestSharedMemory&quot; when creating the pipe &quot;\.\pipe\LOCAL\MyTestSharedMemory&quot;</p>
 <h5>Default value:</h4><pre><code>false</pre></code><h4>vueComponentPaths</h4><p>A list of file glob patterns to find <code>*.vue</code> components. By default, searches the entire workspace. This needs to be specified due to extra lookups that Vue&#39;s sourcemaps require in Vue CLI 4. You can disable this special handling by setting this to an empty array.</p>
 <h5>Default value:</h4><pre><code>[
   "${workspaceFolder}/**/*.vue",
diff --git a/gulpfile.js b/gulpfile.js
@@ -219,6 +219,10 @@ async function runWebpack({
               base: path.join(__dirname, 'out/src'),
             },
           },
+          {
+            test: '\\.node$', // will be regex'd in the webpackBuild script
+            loader: 'node-loader',
+          },
           {
             test: '\\.css$', // will be regex'd in the webpackBuild script
             use: ['style-loader', 'css-loader'],
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -50,6 +50,7 @@
   "dependencies": {
     "@c4312/chromehash": "^0.3.0",
     "@vscode/js-debug-browsers": "^1.0.6",
+    "@vscode/win32-app-container-tokens": "^0.1.0",
     "acorn": "^8.7.0",
     "acorn-loose": "^8.3.0",
     "astring": "^1.8.1",
@@ -149,6 +150,7 @@
     "mocha": "^9.2.2",
     "mocha-junit-reporter": "^2.0.2",
     "mocha-multi-reporters": "^1.5.1",
+    "node-loader": "^2.0.0",
     "npm-run-all": "^4.1.5",
     "nyc": "^15.1.0",
     "playwright": "^1.20.1",
diff --git a/src/build/generate-contributions.ts b/src/build/generate-contributions.ts
@@ -984,7 +984,7 @@ const edgeLaunchConfig: IDebugger<IEdgeLaunchConfiguration> = {
     },
     useWebView: {
       type: 'boolean',
-      description: refString('edge.useWebView.description'),
+      description: refString('edge.useWebView.launch.description'),
       default: false,
     },
     address: {
@@ -1022,9 +1022,10 @@ const edgeAttachConfig: IDebugger<IEdgeAttachConfiguration> = {
   configurationAttributes: {
     ...chromiumAttachConfigurationAttributes,
     useWebView: {
-      type: 'boolean',
-      description: refString('edge.useWebView.description'),
-      default: false,
+      type: 'object',
+      properties: { pipeName: { type: 'string' } },
+      description: refString('edge.useWebView.attach.description'),
+      default: { pipeName: 'MyPipeName' },
     },
   },
   defaults: edgeAttachConfigDefaults,
diff --git a/src/build/strings.ts b/src/build/strings.ts
@@ -38,8 +38,10 @@ const strings = {
   'extensionHost.snippet.launch.description': 'Launch a VS Code extension in debug mode',
   'extensionHost.snippet.launch.label': 'VS Code Extension Development',
 
-  'edge.useWebView.description':
-    "(Edge (Chromium) only) When 'true', the debugger will treat the runtime executable as a host application that contains a WebView allowing you to debug the WebView script content.",
+  'edge.useWebView.launch.description':
+    "When 'true', the debugger will treat the runtime executable as a host application that contains a WebView allowing you to debug the WebView script content.",
+  'edge.useWebView.attach.description':
+    'An object containing the `pipeName` of a debug pipe for a UWP hosted Webview2. This is the "MyTestSharedMemory" when creating the pipe "\\\\.\\pipe\\LOCAL\\MyTestSharedMemory"',
 
   'chrome.label': 'Web App (Chrome)',
   'edge.label': 'Web App (Edge)',
diff --git a/src/cdp/rawPipeTransport.ts b/src/cdp/rawPipeTransport.ts
@@ -2,13 +2,13 @@
  * Copyright (C) Microsoft Corporation. All rights reserved.
  *--------------------------------------------------------*/
 
-import { ITransport } from './transport';
-import { ILogger, LogTag } from '../common/logging';
-import { Duplex, Readable, Writable } from 'stream';
 import split from 'split2';
-import { once } from '../common/objUtils';
+import { Duplex, Readable, Writable } from 'stream';
 import { EventEmitter } from '../common/events';
 import { HrTime } from '../common/hrnow';
+import { ILogger, LogTag } from '../common/logging';
+import { once } from '../common/objUtils';
+import { ITransport } from './transport';
 
 export class RawPipeTransport implements ITransport {
   private readonly messageEmitter = new EventEmitter<[string, HrTime]>();
diff --git a/src/configuration.ts b/src/configuration.ts
@@ -724,7 +724,7 @@ export interface IEdgeLaunchConfiguration extends IChromiumLaunchConfiguration {
 export interface IEdgeAttachConfiguration extends IChromiumAttachConfiguration {
   type: DebugType.Edge;
   request: 'attach';
-  useWebView: boolean;
+  useWebView: boolean | { pipeName: string };
 }
 
 /**
diff --git a/src/dap/errors.ts b/src/dap/errors.ts
@@ -238,6 +238,19 @@ export const sourceMapParseFailed = (compiledUrl: string, message: string) =>
     localize('sourcemapParseError', 'Could not read source map for {0}: {1}', compiledUrl, message),
   );
 
+export const uwpPipeNotAvailable = () =>
+  createUserError(
+    localize('uwpPipeNotAvailable', 'UWP webview debugging is not available on your platform.'),
+  );
+
+export const noUwpPipeFound = () =>
+  createUserError(
+    localize(
+      'noUwpPipeFound',
+      'Could not connect to any UWP Webview pipe. Make sure your webview is hosted in debug mode, and that the `pipeName` in your `launch.json` is correct.',
+    ),
+  );
+
 /**
  * Returns if the value looks like a DAP error.
  */
diff --git a/src/ioc.ts b/src/ioc.ts
@@ -84,6 +84,7 @@ import { EdgeLauncher } from './targets/browser/edgeLauncher';
 import { RemoteBrowserAttacher } from './targets/browser/remoteBrowserAttacher';
 import { RemoteBrowserHelper } from './targets/browser/remoteBrowserHelper';
 import { RemoteBrowserLauncher } from './targets/browser/remoteBrowserLauncher';
+import { UWPWebviewBrowserAttacher } from './targets/browser/uwpWebviewBrowserAttacher';
 import { VSCodeRendererAttacher } from './targets/browser/vscodeRendererAttacher';
 import { DelegateLauncherFactory } from './targets/delegate/delegateLauncherFactory';
 import { ExtensionHostAttacher } from './targets/node/extensionHostAttacher';
@@ -266,6 +267,11 @@ export const createTopLevelSessionContainer = (parent: Container) => {
   container.bind(ILauncher).to(EdgeLauncher).inSingletonScope().onActivation(trackDispose);
   container.bind(ILauncher).to(RemoteBrowserLauncher).inSingletonScope().onActivation(trackDispose);
   container.bind(ILauncher).to(RemoteBrowserAttacher).inSingletonScope().onActivation(trackDispose);
+  container
+    .bind(ILauncher)
+    .to(UWPWebviewBrowserAttacher)
+    .inSingletonScope()
+    .onActivation(trackDispose);
 
   container.bind(ILauncher).to(BrowserAttacher).onActivation(trackDispose);
   container
diff --git a/src/targets/browser/browserAttacher.ts b/src/targets/browser/browserAttacher.ts
@@ -67,7 +67,8 @@ export class BrowserAttacher<
   protected resolveParams(params: AnyLaunchConfiguration): params is T {
     return (
       params.request === 'attach' &&
-      (params.type === DebugType.Chrome || params.type === DebugType.Edge) &&
+      (params.type === DebugType.Chrome ||
+        (params.type === DebugType.Edge && typeof params.useWebView !== 'object')) &&
       params.browserAttachLocation === 'workspace'
     );
   }
diff --git a/src/targets/browser/uwpWebviewBrowserAttacher.ts b/src/targets/browser/uwpWebviewBrowserAttacher.ts
diff --git a/src/test/infra/infra.ts b/src/test/infra/infra.ts

Original file line number	Diff line number	Diff line change
`@@ -724,7 +724,7 @@ export interface IEdgeLaunchConfiguration extends IChromiumLaunchConfiguration {`
`724`	`724`	`export interface IEdgeAttachConfiguration extends IChromiumAttachConfiguration {`
`725`	`725`	`type: DebugType.Edge;`
`726`	`726`	`request: 'attach';`
`727`		`- useWebView: boolean;`
	`727`	`+ useWebView: boolean \| { pipeName: string };`
`728`	`728`	`}`
`729`	`729`
`730`	`730`	`/**`