Debugging Laravel application on VSCode

Question

Has anyone successfully configured VSCode to debug Laravel-based website? After having followed numerous articles and tutorials, I have made it to the point where I can ask VSCode to "Listen to XDEBUG", but I haven't been able to do normal VS-style debugging where I could just hit F5 to launch current the website in my favorite browser and it would break into VSCode when it hit a breakpoint, just like we do in full Visual Studio or Eclipse.

I have following things correctly setup on my machine:

• VSCode 1.25.1
• XAMPP 1.8
• XDEBUG (configured and working)
• PHP Debug extension for VSCode

I'm not sure what launch configuration do I need to use in my launch.json. The two configurations that come with PHP Debug extension look like this:

{
    "name": "Listen for XDebug",
    "type": "php",
    "request": "launch",
    "port": 9000
},
{
    "name": "Launch currently open script",
    "type": "php",
    "request": "launch",
    "program": "${file}",
    "cwd": "${fileDirname}",
    "port": 9000
}           

While the first configuration works correctly (I can start debugging in that mode in VSCode, then launch my website separately in the browser and it hits the breakpoints), the second configuration fails. It tells me that it cannot locate Controller class (which is a Laravel framework class). Qualifying class name with namespace doesn't do any good either.

My guess is that this has got something to with how the launch configuration is setup. It tries to launch the active script as an independent unit and thus fails to locate the definition of framework classes located in different files. We have to somehow provide launch the website as a single application.

Has anyone done that successfully and tell me what I'm missing here?

Solution

Finally got it working. Here are the things if anyone else needs it.

1. Make sure you have XDEBUG set up and running on your Apache server.

2. Install debugger extension for your favorite browser. Extensions are available for Chrome, Edge and FireFox (can be searched and installed from within VSCode).

3. Set up launch.json so that it launches two configs in parallel. This is done through so-called compound configurations. Here is mine that launches PHP + XDEBUG and EDGE browser:

    {
        "version": "0.2.0",
        "compounds": [
            {
                "name": "Launch & Debug",
                "configurations": [ "Launch Program", "Launch localhost" ]
            }
    ],
    "configurations": [
        {
            "type": "php",
            "request": "launch",
            "name": "Launch Program",
            "cwd": "${workspaceRoot}",
            "port": 9000
        },
        {
            "name": "Launch localhost",
                "type": "edge",
                "request": "launch",
                "url": "http://localhost/public",
                "webRoot": "${workspaceRoot}"
            }
        ]
    }
   

4. Update the above config according to your local settings such as site address, xdebug port etc.

5. Press F5 and your debugging session will start. Browser will launch automatically and you'll be able to hit your breakpoints.