DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

Cover image for Installing XDebug3 in VSCode
Walter Nascimento
Walter Nascimento

Posted on

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
Enter fullscreen mode Exit fullscreen mode

πŸ’‘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
Enter fullscreen mode Exit fullscreen mode

πŸ’‘ 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:

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
Enter fullscreen mode Exit fullscreen mode

For a more complete version follow a makefile:

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

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

Example:


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

Top comments (0)

πŸ—£ Want to join the conversation?

Β 
It's easy! Become a DEV member to follow this post, comment, and more.