Attaching Xdebug with VSCode in Laravel and Vue.js Projects

Debugging is an essential part of development, and using Xdebug with VSCode provides a powerful debugging experience for both Laravel and Vue.js. This guide walks you through the setup of Xdebug in a Laravel project that includes a Vue.js frontend.

Prerequisites

• Laravel 10+ project

• Vue.js frontend setup

• VSCode installed

• PHP with Xdebug installed

• Node.js and npm installed

• Laravel Valet or any local server setup

Step 1: Install Xdebug

Ensure that Xdebug is installed by running:

php -v

If Xdebug is installed, you should see something like:

Xdebug v3.x.x

If not, install it using:

pecl install xdebug

After installation, add the following to your php.ini (or create a separate xdebug.ini in /etc/php.d/ or /usr/local/etc/php if using Laravel Valet):

zend_extension=xdebug
xdebug.mode=debug
xdebug.start_with_request=yes
xdebug.client_host=127.0.0.1
xdebug.client_port=9004

Restart the PHP service:

valet restart

If using another server:

sudo service php-fpm restart

Step 2: Configure VSCode for Xdebug

Create a .vscode/launch.json file in your Laravel project root with the following configuration:

{
    "version": "0.2.0",
    "configurations": [
        {
            "name": "Listen for Xdebug",
            "type": "php",
            "request": "launch",
            "port": 9004
        },
        {
            "name": "Launch currently open script",
            "type": "php",
            "request": "launch",
            "program": "${file}",
            "cwd": "${fileDirname}",
            "port": 0,
            "runtimeArgs": [
                "-dxdebug.start_with_request=yes"
            ],
            "env": {
                "XDEBUG_MODE": "debug,develop",
                "XDEBUG_CONFIG": "client_port=${port}"
            }
        },
        {
            "name": "Launch Built-in web server (HTTPS)",
            "type": "php",
            "request": "launch",
            "runtimeArgs": [
                "-dxdebug.mode=debug",
                "-dxdebug.start_with_request=yes",
                "-S",
                "https://domain.test",
                "-t",
                "public/",
                "-d",
                "variables_order=EGPCS"
            ],
            "program": "",
            "cwd": "${workspaceRoot}",
            "port": 9004,
            "serverReadyAction": {
                "pattern": "Development Server \\(https://domain.test\\) started",
                "uriFormat": "https://domain.test:%s",
                "action": "openExternally"
            }
        },
        {
            "name": "Debug Vue.js with npm run dev",
            "type": "node",
            "request": "launch",
            "runtimeExecutable": "npm",
            "runtimeArgs": [
                "run",
                "dev"
            ],
            "cwd": "${workspaceFolder}",
            "protocol": "inspector",
            "port": 9229,
            "env": {
                "NODE_ENV": "development",
                "VUE_APP_BASE_URL": "https://domain.test"
            },
            "sourceMaps": true,
            "console": "integratedTerminal",
            "internalConsoleOptions": "neverOpen",
            "outFiles": [
                "${workspaceFolder}/dist/**/*.js"
            ]
        }
    ]
}

Explanation of VSCode Configurations

• Listen for Xdebug: Waits for an incoming Xdebug connection (useful for debugging requests in Laravel routes or controllers).

• Launch Currently Open Script: Allows debugging of individual PHP files within VSCode.

• Launch Built-in Web Server: Starts a PHP built-in server with Xdebug enabled for the Laravel application.

• Debug Vue.js with npm run dev: Enables debugging of Vue.js frontend via npm run dev.

Step 3: Configure Laravel for Xdebug

In your Laravel .env file, add the following:

APP_ENV=local
APP_DEBUG=true
XDEBUG_MODE=debug
XDEBUG_CONFIG="client_host=127.0.0.1 client_port=9004"

Restart your Laravel application to apply the changes.

php artisan config:clear

Step 4: Debugging Laravel Code in VSCode

1. Open VSCode.

2. Go to the Run and Debug panel (Ctrl+Shift+D).

3. Select Listen for Xdebug and click Start Debugging.

4. Set breakpoints in Laravel controllers or services.

5. Make a request in the browser to trigger Xdebug.

Step 5: Debugging Vue.js in VSCode

1. Open VSCode.

2. Set breakpoints in Vue components (.vue files).

3. Start debugging with Debug Vue.js with npm run dev.

4. Open Chrome and go to chrome://inspect to attach the debugger.

Step 6: Testing Debugging

• Add a breakpoint in routes/web.php:

  Route::get('/test', function () {
      $test = 'Debugging Laravel';
      return response()->json(['message' => $test]);
  });

• Visit https://domain.test/test in the browser and check if the breakpoint hits.

• In Vue.js, add debugger; in a method and trigger it in the browser.

Conclusion

By following these steps, you can debug both your Laravel backend and Vue.js frontend efficiently using Xdebug and VSCode. This setup enables a seamless development workflow, improving code quality and debugging efficiency.