In earlier posts, I’ve talked a bit about Visual Studio Code the least of which not being the importance of debugging your code with Xdebug.

One of the questions I’ve received (and seen elsewhere around the web) is how to actually setup Visual Studio Code debug configuration. That is, you have Xdebug installed, you have the module specific in your PHP configuration file, but there’s no way to actually activate the debugger within the IDE.

Instead, you see something like this:

Visual Studio Code Debug Configuration

This is an easy fix.

Visual Studio Code Debug Configuration

As always, it’s important to understand the problem first, right? The IDE needs a configuration file (in this case, a JSON file) to provide it the necessary instructions for the IDE on what to do whenever the ‘Debug’ button is clicked.

Remember: Visual Studio Code is not meant just for PHP or any other language for that matter, so the proper configuration file must be created.

There are two ways to do this. You can either use the configuration file in the gist later in this post or can follow the steps outlined here.

  1. Click on the ‘gear’ icon next to the No Configuration label in the IDE.
  2. Select PHP

Assuming you have everything else setup correctly, it will generate exactly what you need (which is what you see in the following gist):

From here, you have everything you need to resume debugging. But remember, this does assume you have Xdebug installed and enabled within your configuration files.

And for those who are curious, this will create a launch.json file within the .vscode directory of your project. If you ever want to add, change, or simply remove the configuration, you can find it in that directory.

Note that on some operating systems or based on some operating system configurations, this directory may be hidden so you’ll need to access it via Terminal or turning on hidden files and folders.