[XDebug Bridge] Read files from VFS when a PHP instance is provided

[mho22]

Motivation for the change, related issues

Based on this comment in issue #2601

This enables the playground to open the bridge in the virtual filesystem /wordpress directory instead of the Node filesystem.

This pull request will allow step debugging with Xdebug and Chrome Devtools by using the following command :

node_modules/.bin/wp-playground-cli server --login --xdebug --experimental-devtools --mount=./plugin:/wordpress/wp-content/plugins/plugin

Before this pull request, we do not have access to the virtual filesystem.

Implementation details

If phpInstance is provided during startBridge, it will listFiles from the php instance instead of Node. Giving access to /wordpress directory.

Testing Instructions (or ideally a Blueprint)

Two new tests in CI

[adamziel]

It fails for me with this exception:

TypeError: Cannot read properties of undefined (reading 'slice')
    at <anonymous> (/Users/cloudnik/www/Automattic/core/plugins/wordpress-playground/packages/php-wasm/xdebug-bridge/src/lib/xdebug-cdp-bridge.ts:576:26)
    at Array.find (<anonymous>)
    at XdebugCDPBridge.uriFromCDPToBridge (/Users/cloudnik/www/Automattic/core/plugins/wordpress-playground/packages/php-wasm/xdebug-bridge/src/lib/xdebug-cdp-bridge.ts:575:38)
    at XdebugCDPBridge.handleCdpMessage (/Users/cloudnik/www/Automattic/core/plugins/wordpress-playground/packages/php-wasm/xdebug-bridge/src/lib/xdebug-cdp-bridge.ts:307:28)
    at CDPServer.<anonymous> (/Users/cloudnik/www/Automattic/core/plugins/wordpress-playground/packages/php-wasm/xdebug-bridge/src/lib/xdebug-cdp-bridge.ts:100:9)
    at CDPServer.emit (node:events:507:28)
    at <anonymous> (/Users/cloudnik/www/Automattic/core/plugins/wordpress-playground/packages/php-wasm/xdebug-bridge/src/lib/cdp-server.ts:59:12)
    at process.processTicksAndRejections (node:internal/process/task_queues:85:11)

It's probably related to a missing url in the message received by Chrome dev tools:

{
  message: {
    id: 73,
    method: 'Debugger.setBreakpointByUrl',
    params: {
      lineNumber: 3457,
      scriptHash: '',
      columnNumber: 0,
      condition: ''
    }
  }
}

I'm not sure why it's empty, I can't see any stale breakpoints in my devtools. That being said, it's an optional value so let's be prepared for undefined or an empty string – both in this case, and for every single optional field in every single message type. I'll go ahead and update this one and continue testing, and let's plan a PR to review all our data flows. Some adverse unit tests that send empty values on purpose will be really helpful.

[adamziel]

Also, let's have a general error handler for CDP messages. Just because our support for setting some breakpoints is lacking doesn't mean we need to crash the entire program. We can log it and keep going.

[adamziel]

With b3a2bc4 it works, thank you! It's good to see how this is shaping up ❤️ I was able to go step through the WordPress importer plugin and inspect some variables. Really cool!

I've also opened some more issues, it seems like we have a long way to go to make the devtools bridge reliable – let's merge this PR and pause the CDP stream of work and focus on shipping vanilla XDebug in a way that works with PHPStorm and VSCode.

[mho22]

@adamziel Thank you! I saw the 5 first issues of a probably long list of others but that's how we make a great tool!