PCF Debugger: Add initial debugger code

[felixSchober]

Adds a debugger option for PCF controls.
This works by attaching the edge debugger to a puppeteer session which opens a model driven app, intercepts network requests to the bundle and responds with the local version of the bundle.

To use the debugger with any PCF control you need to perform the following steps:

1. Enable Feature: Make sure "Power Platform -> Experimental: Enable Pcf Debugging Features" is enabled. After enabling the feature, you need to restart vscode.

2. tsconfig sourcemaps: Open tsconfig.json and add "sourceMap": true under compilerOptions. Your file should look something like this:

{
    "extends": "./node_modules/pcf-scripts/tsconfig_base.json",
    "compilerOptions": {
        "sourceMap": true,
    }
}

3. Add custom webpack config: To enable the custom webpack config feature flag you need to create a file called featureconfig.json in your project root. Use the following contents:

{
    { "pcfAllowCustomWebpack": "on" }
}

4. Generate source maps: To generate source maps with webpack, create a new file called webpack.config.js in your project root. Use the following contents:

const customConfig = {
  // watch: true, // uncomment this line to enable webpack watch mode
  devtool: "inline-source-map"
}
module.exports = customConfig;

5. Add a launch config: Create a new launch.json file under .vscode. If the folder .vscode does not yet exist, you can create it.
   Click on "Add Configuration..." and select for "Debug PCF Control" from the dropdown. (If you can't find the entry the you might have to restart vscode.)

A configuration for the Sample: TableControl is listed below:

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "powerplatform-vscode.debug",
      "request": "launch",
      "name": "Launch Control",
      "url": "https://YOUR_ORG_URL.crm.dynamics.com/main.aspx",
      "webRoot": "${workspaceFolder}",
      "renderFullScreen": false,
      "controlName": "cc_SampleNamespace.TableControl",
      "file": "out/controls/TableControl/bundle.js",
      "tabName": "Sample Control Tab"
    }
  ]
}

6. Launch your control: Go to "Run and Debug" (Ctrl + Shift + D) and click on "Launch Control". This should now open a new browser instance which will navigate to the URL you provided in the launch configuration as url. This will likely trigger a login prompt. Provide your credentials to login. If the debugger has timed out waiting for the page to load you might have to restart the debugger. It should not prompt you to login again.
   
   Once the form page is loaded, the debugger will try to navigate to the tab the control is located on automatically.

[felixSchober]

Sample configuration: https://github.com/felixSchober/PowerApps-Samples/tree/master/component-framework/TableControl

[tehcrashxor]

Looks like the reference here to a private ADO feed @types/puppeteer-core is what's causing the PR Build break

[felixSchober]

wow... thanks for finding the cause of the issue.

[felixSchober]

waiting for #233 to go in first to fix build issue

[tehcrashxor]

Looks like we might issues running the Debugger tests headless, though we can confirm that with a merge of the latest changes and rerunning the PR builds to confirm.

Applied the tsconfig.json "DOM.Iterable" update to my local copies of the branch and tested across a few platforms.

My Windows and Mac machines both ran the tests successfully, but did encounter a few warnings during the compile stage:

[14:25:59] Starting 'compile'...
[SNIP]

WARNING in ./node_modules/ws/lib/buffer-util.js 103:21-42
Module not found: Error: Can't resolve 'bufferutil' in 'C:\src\powerplatform-vscode\node_modules\ws\lib'
 @ ./node_modules/ws/lib/websocket.js 31:21-45
 @ ./node_modules/ws/index.js 3:18-44
 @ ./node_modules/puppeteer-core/lib/cjs/puppeteer/node/NodeWebSocketTransport.js 34:29-42
 @ ./node_modules/puppeteer-core/lib/cjs/puppeteer/node/BrowserRunner.js 68:36-80
 @ ./node_modules/puppeteer-core/lib/cjs/puppeteer/node/Launcher.js 47:27-56
 @ ./node_modules/puppeteer-core/lib/cjs/puppeteer/node/Puppeteer.js 36:38-62
 @ ./node_modules/puppeteer-core/lib/cjs/puppeteer/initializePuppeteer.js 21:23-53
 @ ./node_modules/puppeteer-core/lib/cjs/puppeteer/puppeteer-core.js 19:33-68
 @ ./src/debugger/browser/BrowserManager.ts 20:41-66
 @ ./src/debugger/browser/index.ts 8:23-50
 @ ./src/debugger/debugAdaptor/DebugAdaptorFactory.ts 20:18-39
 @ ./src/debugger/debugAdaptor/index.ts 8:28-60
 @ ./src/debugger/extension.ts 33:23-48
 @ ./src/debugger/index.ts 8:18-40
 @ ./src/client/extension.ts 52:19-41

WARNING in ./node_modules/ws/lib/validation.js 109:22-47
Module not found: Error: Can't resolve 'utf-8-validate' in 'C:\src\powerplatform-vscode\node_modules\ws\lib'
 @ ./node_modules/ws/lib/receiver.js 13:43-66
 @ ./node_modules/ws/index.js 7:21-46
 @ ./node_modules/puppeteer-core/lib/cjs/puppeteer/node/NodeWebSocketTransport.js 34:29-42
 @ ./node_modules/puppeteer-core/lib/cjs/puppeteer/node/BrowserRunner.js 68:36-80
 @ ./node_modules/puppeteer-core/lib/cjs/puppeteer/node/Launcher.js 47:27-56
 @ ./node_modules/puppeteer-core/lib/cjs/puppeteer/node/Puppeteer.js 36:38-62
 @ ./node_modules/puppeteer-core/lib/cjs/puppeteer/initializePuppeteer.js 21:23-53
 @ ./node_modules/puppeteer-core/lib/cjs/puppeteer/puppeteer-core.js 19:33-68
 @ ./src/debugger/browser/BrowserManager.ts 20:41-66
 @ ./src/debugger/browser/index.ts 8:23-50
 @ ./src/debugger/debugAdaptor/DebugAdaptorFactory.ts 20:18-39
 @ ./src/debugger/debugAdaptor/index.ts 8:28-60
 @ ./src/debugger/extension.ts 33:23-48
 @ ./src/debugger/index.ts 8:18-40
 @ ./src/client/extension.ts 52:19-41

webpack 5.73.0 compiled with 2 warnings

However, ran into other issues on Linux.
On GH CodeSpaces (default Ubuntu 20.04.4 LTS image, via CodeSpaces's Web UI):
Compile had same warnings as Windows & Mac, all tests prior to the Debugger tests ran successfully, but then the Debugger tests failed due to not having an X Server for handling the UI of the puppeteered VS Code:

[21:38:26] Starting 'compileDebuggerTests'...
[21:38:33] Finished 'compileDebuggerTests' after 7.16 s
[21:38:33] Starting '<anonymous>'...
Downloading VS Code 1.69.1 from https://update.code.visualstudio.com/1.69.1/linux-x64/stable
Downloading VS Code [==============================] 100%
Downloaded VS Code into /workspaces/powerplatform-vscode/.vscode-test/vscode-linux-x64-1.69.1

Downloaded VS Code into /workspaces/powerplatform-vscode/.vscode-test/vscode-linux-x64-1.69.1
[17766:0712/213840.089382:ERROR:ozone_platform_x11.cc(248)] Missing X server or $DISPLAY
[17766:0712/213840.089445:ERROR:env.cc(225)] The platform failed to initialize.  Exiting.
The futex facility returned an unexpected error code.
Exit code:   SIGABRT
Failed to run tests
[21:38:40] The following tasks did not complete: ci, <series>, <series>, <anonymous>
[21:38:40] Did you forget to signal async completion?

I suspect this will be true of the GH Build Agents as well.

Running on WSL (default Ubuntu 20.04.4 LTS image, via VS Code Remoting from the Windows host):
Same warnings, compile and other tests succeeded, but the Debugger tests ran into a missing dependency:

[13:44:14] Starting 'compileDebuggerTests'...
[13:44:16] Finished 'compileDebuggerTests' after 2.23 s
[13:44:16] Starting '<anonymous>'...
Found existing install in /home/tehcrash/src/powerplatform-vscode/.vscode-test/vscode-linux-x64-1.69.1. Skipping download
/home/tehcrash/src/powerplatform-vscode/.vscode-test/vscode-linux-x64-1.69.1/code: error while loading shared libraries: libatk-1.0.so.0: cannot open shared object file: No such file or directory
Exit code:   127
Failed to run tests
[13:44:16] The following tasks did not complete: ci, <series>, <series>, <anonymous>
[13:44:16] Did you forget to signal async completion?

We may need to set these tests to run only when the machine has UI bits installed (ie, not in the GH Build agents)?

[felixSchober]

@tehcrashxor thanks for doing this investigation. I've only tested on osx and Windows so of course it was the one OS I didn't test on 😄

vscode-test solves this by running a bash script to configure xserver prior to test execution. I'll try and see if something along those lines works for GH agents as well.

- bash: |
    /usr/bin/Xvfb :99 -screen 0 1024x768x24 > /dev/null 2>&1 &
    echo ">>> Started xvfb"
  displayName: Start xvfb
  condition: and(succeeded(), eq(variables['Agent.OS'], 'Linux'))

edit: I've basically copied the github actions of the @vscode/test-electron package CI pipeline which uses an action to execute the piece of code that relies on xvfb. Looks like the tests no run on all platforms.

[felixSchober]

WARNING in ./node_modules/ws/lib/buffer-util.js 103:21-42
Module not found: Error: Can't resolve 'bufferutil' in 'C:\src\powerplatform-vscode\node_modules\ws\lib'
@ ./node_modules/ws/lib/websocket.js 31:21-45
@ ./node_modules/ws/index.js 3:18-44
@ ./node_modules/puppeteer-core/lib/cjs/puppeteer/node/NodeWebSocketTransport.js 34:29-42
@ ./node_modules/puppeteer-core/lib/cjs/puppeteer/node/BrowserRunner.js 68:36-80
@ ./node_modules/puppeteer-core/lib/cjs/puppeteer/node/Launcher.js 47:27-56
@ ./node_modules/puppeteer-core/lib/cjs/puppeteer/node/Puppeteer.js 36:38-62
@ ./node_modules/puppeteer-core/lib/cjs/puppeteer/initializePuppeteer.js 21:23-53
@ ./node_modules/puppeteer-core/lib/cjs/puppeteer/puppeteer-core.js 19:33-68
@ ./src/debugger/browser/BrowserManager.ts 20:41-66
@ ./src/debugger/browser/index.ts 8:23-50
@ ./src/debugger/debugAdaptor/DebugAdaptorFactory.ts 20:18-39
@ ./src/debugger/debugAdaptor/index.ts 8:28-60
@ ./src/debugger/extension.ts 33:23-48
@ ./src/debugger/index.ts 8:18-40
@ ./src/client/extension.ts 52:19-41

WARNING in ./node_modules/ws/lib/validation.js 109:22-47
Module not found: Error: Can't resolve 'utf-8-validate' in 'C:\src\powerplatform-vscode\node_modules\ws\lib'
@ ./node_modules/ws/lib/receiver.js 13:43-66
@ ./node_modules/ws/index.js 7:21-46
@ ./node_modules/puppeteer-core/lib/cjs/puppeteer/node/NodeWebSocketTransport.js 34:29-42
@ ./node_modules/puppeteer-core/lib/cjs/puppeteer/node/BrowserRunner.js 68:36-80
@ ./node_modules/puppeteer-core/lib/cjs/puppeteer/node/Launcher.js 47:27-56
@ ./node_modules/puppeteer-core/lib/cjs/puppeteer/node/Puppeteer.js 36:38-62
@ ./node_modules/puppeteer-core/lib/cjs/puppeteer/initializePuppeteer.js 21:23-53
@ ./node_modules/puppeteer-core/lib/cjs/puppeteer/puppeteer-core.js 19:33-68
@ ./src/debugger/browser/BrowserManager.ts 20:41-66
@ ./src/debugger/browser/index.ts 8:23-50
@ ./src/debugger/debugAdaptor/DebugAdaptorFactory.ts 20:18-39
@ ./src/debugger/debugAdaptor/index.ts 8:28-60
@ ./src/debugger/extension.ts 33:23-48
@ ./src/debugger/index.ts 8:18-40
@ ./src/client/extension.ts 52:19-41

I've included both dependencies as optional. They're optional ws dependencies which is why they aren't marked as required dependencies.
puppeteer/puppeteer#8121