Configure PHP Xdebug in VSCODE

My PHP and Xdebug Version

$ php -v
PHP 7.4.21 (cli) (built: Jul  1 2021 16:09:23) ( NTS )
Copyright (c) The PHP Group
Zend Engine v3.4.0, Copyright (c) Zend Technologies
    with Zend OPcache v7.4.21, Copyright (c), by Zend Technologies
    with Xdebug v3.0.4, Copyright (c) 2002-2021, by Derick Rethan

Install PHP Xdebug extension in VSCODE.

Xdebug configuration in /etc/php/7.4/mods-available/xdebug.ini

zend_extension=xdebug.so
xdebug.mode = debug
xdebug.start_with_request = yes
xdebug.client_host = magento.default.m242
xdebug.client_port = 9003
xdebug.discover_client_host = 1

Vscode launch.json

{
 // Use IntelliSense to learn about possible attributes.
 // Hover to view descriptions of existing attributes.
 // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
 "version": "0.2.0",
 "configurations": [
        {
 "name": "Listen for Xdebug",
 "type": "php",
 "request": "launch",
 "port": 9003,
 "hostname": "magento.default.m242"
        },
................................
................................
................................

Then we can set breakpoints and start debugging. To start debugging, click Run -> Start Debugging. Just load the URL in the browser(http://magento.default.m242/tinkertest.php) and it will stop it at the breakpoint we set.

I hope it helps.