9 – 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 ChromeFireFox 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

Xdebug needs additional configuration for Linux because of some Docker restrictions. Xdebug has to connect to the host machine from within Docker, which means it needs the host’s ip. For MacOS and Windows that is resolved using a special DNS name, but that doesn’t exist for Linux. You can read more here.

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.

Continue to:
10 – Changing PHP and Docker settings