Using Xdebug

WordPressify comes with Xdebug preconfigured so that you can easily debug, profile, and trace your application. The following is a description of how to setup Xdebug with WordPressify. If you’re on Linux, be sure to check the Xdebug on the Linux section below.

Install the xdebug extension

Install the Xdebug extension for Chrome, FireFox or Safari.

Profiling and tracing

After installing the extension and running WordPressify, you can start profiling and tracing WordPress by simply selecting the proper option in the extension. Profiling information can be displayed using one of the cachegrind tools as described in Xdebug documentation. The profile and trace data will be logged in the xdebug folder.

Step debugging

If you want to do step debugging, you need to setup your IDE accordingly. Make sure to setup your IDE to listen on port 9003 for Xdebug connections. There are plugins for VS Code, PHPStorm, and other IDEs listed here.

After setting up your IDE, select Debug in the Xdebug extension and reload the page.

Xdebug on Linux

After setting up your IDE, select Debug in the Xdebug extension and reload the page.

Make sure that the containers are running:

npm run env:start

Find the host ip that docker sees by connecting to the WordPressify website from your web browser, and then inspecting nginx logs:

docker-compose logs server

The first field will be your host IP address. Copy that host address and paste it inside config/php.ini as the value for xdebug.remote_host.

Restart PHP

npm run env:restart	

Xdebug should be working now.