Installing XDebug3 in VSCode

Debug the code depending on how the code is, it's often torture, imagine arriving in a new environment without knowing anything about the project and having to identify where each endpoint passes to return the information.

To help in this process we can use debug, for this post I will show how to install xdebug and use it together with vscode.

Installing XDebug

The first thing to do is install xdebug
if you use linux just use the command:

sudo apt-get install php7.4-xdebug

💡Change php to the version you want

if you use a different version of operating system, visit the official website for a better installation

https://xdebug.org/docs/install

Activating xdebug

After XDebug is downloaded and installed, you'll have to register and enable the extension in your php.ini. For this, open the file and at the end add the following lines:

[xdebug]
zend_extension=xdebug
xdebug.mode=debug

💡 Remember to restart your web server after applying these changes.

VSCode

Now that everything is ready, we just need to show vscode how to use xdebug, and for that we have an extension ready, just install it

https://marketplace.visualstudio.com/items?itemName=xdebug.php-debug

VSCode config

After installation you can click on the sidebar on "Run and Debug" and when you press start the configuration file will be created automatically in .vscode/launch.json

If you're having trouble, this is the file:

	{
	"version": "0.2.0",
	"configurations": [
	{
	"name": "Listen for Xdebug",
	"type": "php",
	"request": "launch",
	"port": 9003
	},
	{
	"name": "Launch currently open script",
	"type": "php",
	"request": "launch",
	"program": "${file}",
	"cwd": "${fileDirname}",
	"port": 9003
	}
	]
	}

view raw launch.json hosted with ❤ by GitHub

in this file we have two settings one for you to use when using the browser and the second one is to directly execute a file (as if using the command line)

Extras

Docker

To use in docker you need to follow a few more points you will follow the same process, but when you configure the file in php.ini, you need to add two more lines:

xdebug.start_with_request=yes
xdebug.client_host=host.docker.internal

💡 NOTE: For see all files for php use php --ini .

For a more complete version follow a makefile:

	##########-Instructions-#############################
	# make up
	# make xdebug-install
	##########-End-Instructions-#########################
	xdebug-install:
	docker-compose exec php-fpm pecl install xdebug
	##########-Instructions-##############################
	# make up
	# make xdebug-enable
	# When finished, run the following commands:
	# make stop
	# make up
	# because these commands will restart the containers.
	##########-End-Instructions-##########################
	xdebug-enable:
	docker-compose exec php-fpm docker-php-ext-enable xdebug
	docker-compose exec php-fpm bash -c 'echo "xdebug.mode=debug" | tee -a /usr/local/etc/php/conf.d/docker-php-ext-xdebug.ini > /dev/null'
	docker-compose exec php-fpm bash -c 'echo "xdebug.start_with_request=yes" | tee -a /usr/local/etc/php/conf.d/docker-php-ext-xdebug.ini > /dev/null'
	docker-compose exec php-fpm bash -c 'echo "xdebug.client_host=host.docker.internal" | tee -a /usr/local/etc/php/conf.d/docker-php-ext-xdebug.ini > /dev/null'
	##########-Instructions-##############################
	# make up
	# xdebug-disable
	# When finished, run the following commands:
	# make stop
	# make up
	# because these commands will restart the containers.
	##########-End-Instructions-###########################
	xdebug-disable:
	docker-compose exec php-fpm rm -f /usr/local/etc/php/conf.d/docker-php-ext-xdebug.ini

view raw Makefile hosted with ❤ by GitHub

and finally modify your launch.json, just add and change pathmappings

"configurations": [{
    ...,
    "pathMappings": {
        "remote/path/to/webroot/": "${workspaceFolder}",
    }
}]

Example:

	{
	"version": "0.2.0",
	"configurations": [
	{
	"name": "Listen for XDebug",
	"type": "php",
	"request": "launch",
	"port": 9003,
	"pathMappings": {
	"/var/www/": "${workspaceFolder}/backend"
	}
	}
	]
	}

view raw launch.json hosted with ❤ by GitHub

---

Thanks for reading!

If you have any questions, complaints or tips, you can leave them here in the comments. I will be happy to answer!

😊😊 See you! 😊😊

---

Support Me

Youtube - WalterNascimentoBarroso
Github - WalterNascimentoBarroso
Codepen - WalterNascimentoBarroso