Premiers Pas avec Xdebug

Ce guide vous montre comment activer Xdebug dans WordPress Playground et commencer à déboguer votre code.

PHP WASM CLI vs Playground CLI

Tout d'abord, Xdebug est présent dans deux CLI différents :

• @php-wasm/cli : Exécutez des scripts PHP autonomes. Utilisez-le lorsque vous déboguez du code PHP sans avoir besoin d'un environnement WordPress.
• @wp-playground/cli : Exécutez une installation complète de WordPress. Utile pour déboguer des plugins WordPress, des thèmes ou des fonctionnalités du noyau.

Pour ce guide, nous utiliserons @wp-playground/cli. Si vous n'êtes pas familier avec l'outil, nous recommandons de lire le guide @wp-playground/cli, mais le même processus peut également être appliqué au débogage d'applications PHP avec @php-wasm/cli.

Démarrage rapide avec npx

Le moyen le plus rapide de commencer est d'utiliser npx, qui ne nécessite pas d'installation :

npx @wp-playground/cli@latest server --xdebug

Cela démarre WordPress sur http://127.0.0.1:9400 avec Xdebug activé. Maintenant, vous connectez un débogueur.

Démarrer avec DevTools

Pour déboguer avec Chrome DevTools, ajoutez le drapeau --experimental-devtools :

npx @wp-playground/cli@latest server --xdebug --experimental-devtools

Le terminal affichera une URL pour connecter Chrome DevTools :

Starting a PHP server...
Setting up WordPress latest
Resolved WordPress release URL: https://downloads.w.org/release/wordpress-6.8.3.zip
Fetching SQLite integration plugin...
Booting WordPress...
WordPress is running on http://127.0.0.1:9400 with 1 worker(s)
Starting XDebug Bridge...
Connect Chrome DevTools to CDP at:
devtools://devtools/bundled/inspector.html?ws=localhost:9229

Chrome connected! Initializing Xdebug receiver...
XDebug receiver running on port 9003
Running a PHP script with Xdebug enabled...

En cliquant sur l'URL fournie, par exemple, devtools://devtools/bundled/inspector.html?ws=localhost:9229, vous pouvez accéder à DevTools connecté à votre application, avec la possibilité d'inspecter tous les fichiers d'une instance WordPress.

Pour un exemple plus pratique, déboguons un plugin qui contient le code suivant :

<?php
/**
 * Plugin Name: Simple Admin Message
 * Description: Displays a simple message in the WordPress admin
 * Version: 1.0
 * Author: Playground Team
 */

// Prevent direct access
if (!defined('ABSPATH')) {
    exit;
}

// Display admin notice
function sam_display_admin_message() {
    $message = 'Hello! This is a simple admin message.';
    ?>
    <div class="notice notice-info is-dismissible">
        <p><?php _e($message, 'simple-admin-message'); ?></p>
    </div>
    <?php
}
add_action('admin_notices', 'sam_display_admin_message');

Dans le dossier où se trouve le plugin, exécutons la commande dans notre terminal :

npx @wp-playground/cli@latest server --xdebug --experimental-devtools --auto-mount

Le Playground CLI (@wp-playground/cli) détectera automatiquement le dossier du plugin et le montera. En ouvrant le projet dans votre navigateur et DevTools, vous pourrez ajouter des points d'arrêt dans le code de votre plugin et le tester ligne par ligne.

Démarrer avec l'intégration IDE

Similaire au processus avec DevTools, utilisons le même code de plugin qu'avant pour déboguer avec VSCode, ajoutez le drapeau --experimental-unsafe-ide-integration=vscode. Ce drapeau optimisera le processus de configuration pour VSCode. Si vous travaillez avec PhpStorm, ajoutez simplement le drapeau --experimental-unsafe-ide-integration=phpstorm.

Pour déboguer dans VSCode, vous aurez besoin des prérequis suivants :

1. Une extension pour ajouter le support du profilage PHP, par exemple, PHP Profiler
2. Un dossier .vscode/. Si le fichier launch.json n'existe pas, ne vous inquiétez pas, @wp-playground/cli le créera.
3. Activez les points d'arrêt (breakpoints) dans votre IDE. Certains IDE ont cette fonctionnalité désactivée par défaut, alors faites attention à ce détail.

Si tout est prêt, exécutez la commande :

npx @wp-playground/cli@latest server --xdebug --experimental-unsafe-ide-integration=vscode --auto-mount

Maintenant, allez dans votre code, ajoutez les points d'arrêt et bon débogage.

Cette fonctionnalité est en mode expérimental. Jusqu'à ce qu'elle soit terminée, nous aurons besoin de vos commentaires. Veuillez vous connecter avec nous dans le canal Slack #playground et partager vos réflexions.