Setting Up Xdebug with MAMP Pro and VS Code

For this video we are going to learn how to set up Xde­bug with Php­Storm run­ning a local serv­er on MAMP Pro. Xde­bug runs via MAMP Pro, as a PHP exten­sion, so the first we need to do is enable Xde­bug in our MAMP Pro configuration. 

To enable Xde­bug in MAMP Pro, we need to access the PHP set­tings via the MAMP Pro app. 

• First, we have to switch to Expert View to reveal some addi­tion­al settings. 
• Next, choose PHP under Lan­guages in the sidebar. 
• In the ​“Exten­sions” sec­tion, we will check ​“Xde­bug (Debug­ger)” to enable Xdebug. 
• Click Save and then choose ​“Yes” to have the servers restart­ed to the change is applied.

This enables Xde­bug so it is run­ning as a PHP exten­sion. Now it will be avail­able to call back to our IDE on port 9000 when it receives a HTTP request.

Php­Storm has a zero-con­fig­u­ra­tion fea­ture for Xde­bug and with MAMP Pro it seems to work nice­ly out-of-the-box, so you should be able to accept its set­tings and then con­tin­ue on with your setup.

Installing the VS Code php-debug Extension

The first step we need to take is to get VSCode set­up to han­dle Xde­bug debug­ging ses­sions. Let’s install the exten­sion called php-debug, which gives us the inter­face for set­ting up and man­ag­ing Xde­bug con­nec­tions from our DDEV server.

In VSCode, go to Exten­sions (shift-com­mand‑x on the Mac). Search for php-debug and choose the one by Felix Beck­er. It should have mil­lions of downloads. 

Go to the Run and Debug sec­tion of Code. And we want to cre­ate a launch.json file. In VS Code, a launch.json file tells VS Code debug­ger which debug­ging con­fig­u­ra­tions it should pro­vide in the debug­ger. We want to cre­ate a debug­ging con­fig­u­ra­tion just for Xde­bug and our serv­er run­ning on MAMP Pro.

Once we click ​“cre­ate a launch.json file”, then we’ll get the code edi­tor with that file open. If, for some rea­son, it doesn’t open, then you can access it inside your project files. 

No we want to add a new con­fig­u­ra­tion to the file. We can do this via the ​“Add Con­fig­u­ra­tion…” file at the bot­tom of the screen or just paste in the code below:

{
    "version": "0.2.0",
    "configurations": [
        {
            "name": "Listen for XDebug",
            "type": "php",
            "request": "launch",
            "hostname": "yourhostname",
            "port": 9000,
        }
    ]
}

Replace the yourhostname in the host­name set­ting for the host­name of the MAMP Pro project you’re run­ning. For me, that would be xdebug-mamp. If you don’t know, you can look at the Hosts sec­tion of MAMP Pro to get the list of hostnames.

And then save the file. You should see the Run and Debug pane change and now rec­og­nize the new con­fig­u­ra­tion for lis­ten­ing for Xde­bug connections.

VS Code is now con­fig­ured to lis­ten on port 9000 for Xde­bug connection.