Use PHP.wasm with Xdebug in Google Chrome Devtools with the Xdebug Bridge
Warning
Debugging with Google Chrome DevTools is still experimental
Important
Chrome Devtools retains breakpoints. To reset the Devtools, go to Settings > Preferences > Restore defaults and reload
There are multiple ways to run the Google Chrome Devtools :
1. Directly from the WordPress Playground repository
cd wordpress-playground
// PHP.wasm CLI
node \
--no-warnings=ExperimentalWarning \
--experimental-strip-types \
--experimental-transform-types \
--import ./packages/meta/src/node-es-module-loader/register.mts \
./packages/php-wasm/xdebug-bridge/src/cli.ts2. Running the local-package-repository script in the WordPress Playground repository
cd wordpress-playground
npm run local-package-repository
...
http://127.0.0.1:9724/7840495c41d5c5ae535da114/v3.0.12/@php-wasm-xdebug-bridge-3.0.12.tar.gz
...The requested lines must be added in your separate project's package.json file :
{
"type": "module",
"dependencies": {
"@php-wasm/xdebug-bridge": "http://127.0.0.1:9724/7840495c41d5c5ae535da114/v3.0.12/@php-wasm-xdebug-bridge-3.0.12.tar.gz"
}
}npm installnpm install @php-wasm/xdebug-bridgenpx @php-wasm/xdebug-bridge- php-wasm-node
- php-wasm-cli
- wp-playground-cli