Debugging Drupal in VS Code

I use docker4drupal, the Drupal Composer template, and VS Code for my local Drupal development. Below is a description of how to configure VS Code’s debugging tools to work with this setup.

PHP

1. Install the PHP Debug extension
2. In the debugging panel add configuration for PHP.
3. Edit the “Listen for XDebug” configuration by adding "pathMappings": { "/var/www/html": "${workspaceRoot}" }.
4. In docker-compose.yml file uncomment PHP_XDEBUG, PHP_XDEBUG_DEFAULT_ENABLE, PHP_XDEBUG_REMOTE_CONNECT_BACK, and PHP_XDEBUG_REMOTE_HOST (whichever line applies to your environment).
5. Install Xdebug helper for Firefox and/or XDebug helper for Chrome.

JavaScript

1. Install the Debugger for Firefox and/or Debugger for Chrome
2. In the debugging panel add “launch” configuration for Firefox and/or Chrome debuggers.
3. Edit the configuration by adding "webRoot": "\${workspaceFolder}/web".

I created a gist to display the complete configuration file: