As a web developer the tools I use are important to my workflow. Choosing a set of tools that work well together is a given.

At the time of writing my IDE of choice is VS Code by Microsoft and local web server is Local (by Flywheel).

Now, Local is designed for WordPress developers, which I am, but I often develop web apps which do not require a WordPress installation. That’s fine. I simply spark up a new site in the Local dashboard then delete all the WordPress files and start over. Details of how I do that is covers in another blog.

A key part of development is debugging. VS Code supports connections to an Xdebug enabled server. Configuring the setup is a bit woolly and subject to trial and error. And everytime I setup a new site I have to revert to my documentation to see how I did it last time. Hence this blog.

In Local I choose the web server nginx but I find the Xdebug settings require tweaking for PHP debugging.

Open php.ini for your current version. This will be in a folder similar to:-

/Users/tony/Local Sites/cisched/conf/php/7.2.0

Then locate the Xdebug section. I find I need to add the configuration line:

xdebug.remote_autostart=1

The section should look like:-

[Xdebug]zend_extension = /opt/php/7.2.0/lib/php/extensions/no-debug-non-zts-20170718/xdebug.so
xdebug.remote_enable=1
xdebug.remote_connect_back=On
xdebug.remote_port="9000"
xdebug.profiler_enable=0
zend_extension = /opt/php/7.2.0/lib/php/extensions/no-debug-non-zts-20170718/xdebug.so

xdebug.remote_autostart=1

If your site is already running don’t forget to restart it.

In VS Code you’ll need to create a debug configuration for PHP.

Click on the Debug sidebar icon and in the configuration drop down choose Add Configuration…

Pick PHP

Edit the “Listen for XDebug” section to look like:

"configurations": [
{
   "name": "Listen for XDebug",
   "type": "php",
   "request": "launch",
   "port": 9000,
   "stopOnEntry": false,
   "pathMappings": {
       "/app/public": "${workspaceFolder}",
    },
    "log": true,
},
]

pathMappings will depend on your site structure, but if you follow my other blogs you will see how I get the system to work.

Once setup just select “Listen for XDebug” and happy debugging.