PCF Debugger: Add initial debugger code #231

felixSchober · 2022-07-07T13:46:15Z

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:

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

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,
    }
}

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" }
}

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;

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"
    }
  ]
}

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 · 2022-07-08T14:27:40Z

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

tehcrashxor · 2022-07-08T21:12:34Z

package-lock.json

+    },
+    "@types/puppeteer-core": {
+      "version": "5.4.0",
+      "resolved": "https://domoreexp.pkgs.visualstudio.com/_packaging/teams-verticals/npm/registry/@types/puppeteer-core/-/puppeteer-core-5.4.0.tgz",


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

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

felixSchober · 2022-07-11T10:43:17Z

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 · 2022-07-13T12:32:09Z

@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 · 2022-07-13T16:47:45Z

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

felixSchober force-pushed the users/feschobe/pcf-debugging branch 3 times, most recently from 64aa345 to f5ca1f7 Compare July 8, 2022 14:11

felixSchober marked this pull request as ready for review July 8, 2022 14:27

felixSchober requested review from davidjenni, tehcrashxor and ashishchoudhary001 and removed request for davidjenni July 8, 2022 14:27

tehcrashxor reviewed Jul 8, 2022

View reviewed changes

tehcrashxor reviewed Jul 12, 2022

View reviewed changes

Felix Schober and others added 17 commits July 13, 2022 10:01

add experimental pcf debugger feature flag

f7a286e

add debugger code

475807e

use regex for bundle matching

2be8be4

only show error if no retry left

8cd7c1d

use instance props to store manager instances

e62f948

add is disposed flag

81301ee

use sleep instead of setTimeout

97638fb

constants cleanup & general tidiness

1b07571

extract BundleLoader

15551cd

adding tests

ab90915

add test packages

883af0f

remove console

007980f

cleanup

3ef7710

adding tests

9488727

add more tests

3e72e42

use DI-like pattern for easier tests

bc78d03

add gulp tasks for testing the debugger

df3c593

Felix Schober added 12 commits July 13, 2022 10:01

separate unit and integration tests

974dea4

adding util tests

68e8bad

update headers

5375526

replace any

4482e4f

format package json

2e8e7c7

revert gulpfile to previous format

fc41433

add dom.iterable to support .entries

d3aaba1

format extension.ts

41557e6

add readme

bd20534

fix header

36f9a50

fix package lock registry resolution

067ec42

remove attachToExistingBrowser

c3860eb

felixSchober force-pushed the users/feschobe/pcf-debugging branch from 40901ce to c3860eb Compare July 13, 2022 09:02

use xvfb action to execute integration tests

5821e8c

felixSchober force-pushed the users/feschobe/pcf-debugging branch from 49d9f24 to 5821e8c Compare July 13, 2022 13:59

add optional dependencies

c08de49

tehcrashxor approved these changes Jul 15, 2022

View reviewed changes

felixSchober merged commit 6ce12e8 into main Jul 18, 2022

felixSchober deleted the users/feschobe/pcf-debugging branch July 18, 2022 09:24

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

PCF Debugger: Add initial debugger code #231

PCF Debugger: Add initial debugger code #231

felixSchober commented Jul 7, 2022 •

edited

Loading

felixSchober commented Jul 8, 2022

tehcrashxor Jul 8, 2022

felixSchober Jul 11, 2022

felixSchober commented Jul 11, 2022

tehcrashxor left a comment

felixSchober commented Jul 13, 2022 •

edited

Loading

felixSchober commented Jul 13, 2022 •

edited

Loading

PCF Debugger: Add initial debugger code #231

PCF Debugger: Add initial debugger code #231

Conversation

felixSchober commented Jul 7, 2022 • edited Loading

felixSchober commented Jul 8, 2022

tehcrashxor Jul 8, 2022

Choose a reason for hiding this comment

felixSchober Jul 11, 2022

Choose a reason for hiding this comment

felixSchober commented Jul 11, 2022

tehcrashxor left a comment

Choose a reason for hiding this comment

felixSchober commented Jul 13, 2022 • edited Loading

felixSchober commented Jul 13, 2022 • edited Loading

felixSchober commented Jul 7, 2022 •

edited

Loading

felixSchober commented Jul 13, 2022 •

edited

Loading

felixSchober commented Jul 13, 2022 •

edited

Loading