Category Archives: Visual Studio Code

Debug PHP and Javascript into Visual Studio Code

Creating a task for launching the PHP server.

To create a task, see https://code.visualstudio.com/docs/editor/tasks.

tasks.json content file:

{
    "version": "0.1.0",
    "tasks": [{
        "taskName": "Php",
        "command": "/usr/bin/php",
        "args": [
            "-S", "127.0.0.1:8080",
            "-t", "${workspaceRoot}"
        ]
    }]
}

The command path depends of the OS. On Windows, it would be: “C:\Program Files\PHP\php.exe”.

The port number (8080), on which the server is listening, can be any port number you want. The port must not be used by another application.

The tasks.json file is located into the “.vscode” of the root folder of your project.

Enable XDebug for PHP

See:

After following the procedure described in the Visual Studio Code documentation, a launch.json has been generated.

launch.json content file:

{
    "version": "0.2.0",
    "configurations": [

        {
            "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
        }
    ]
}

The launch.json file is located into the “.vscode” of the root folder of your project.

Settings for Running in Chrome

Google Chrome has to be installed on the computer.

You can debug your client side code using a browser debugger such as Debugger for Chrome.

Add those fieds into the launch.json file.

{
            "name": "Launch Frontend",
            "type": "chrome",
            "request": "launch",
            "url": "http://localhost:8080/index.php",
            "webRoot": "${workspaceRoot}",
            "preLaunchTask": "Php"
        }

The port number in the URL depends on the one defined previously in the Php task.
The “preLaunchTask” will run the PHP server before launching the “index.php” page in the Chrome web browser.

Final launch.json file:

{
    "version": "0.2.0",
    "configurations": [

        {
            "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
        },
        {
            "name": "Launch Frontend",
            "type": "chrome",
            "request": "launch",
            "url": "http://localhost:8080/index.php",
            "webRoot": "${workspaceRoot}",
            "preLaunchTask": "Php"
        }
    ]
}

In Windows, you can also debug your client side by using a Debugger for Edge.

Debug on Client and Server Side

Set breakpoints into your PHP code and Javascript code.

In the left bar, click on the Debug icon.

In the drop down list, select “Listen for XDebug” and click on the green arrow button.

In the same drop down list, select “Launch Frontend”.

Click on the green arrow button to start the PHP server.

Click a second time on the same button to launch your “index.php” page into Google Chrome.

Your debug session has been started and your process should stop on any breakpoints, PHP and Javascript, you set up in your code.