Installing XDebug3 in VSCode – DEV Community

Debug the code relying on how the code is, it is typically torture, think about arriving in a brand new atmosphere with out figuring out something in regards to the venture and having to determine the place every endpoint passes to return the knowledge.

To assist on this course of we are able to use debug, for this submit I’ll present the best way to set up xdebug and use it along with vscode.

Putting in XDebug

The very first thing to do is set up xdebug
in the event you use linux simply use the command:

sudo apt-get set up php7.4-xdebug

💡Change php to the model you need

in the event you use a unique model of working system, go to the official web site for a greater set up

https://xdebug.org/docs/install

Activating xdebug

After XDebug is downloaded and put in, you will should register and allow the extension in your php.ini. For this, open the file and on the finish add the next strains:

[xdebug]
zend_extension=xdebug
xdebug.mode=debug

💡 Keep in mind to restart your internet server after making use of these adjustments.

VSCode

Now that every little thing is prepared, we simply want to point out vscode the best way to use xdebug, and for that we now have an extension prepared, simply set up it

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

VSCode config

After set up you’ll be able to click on on the sidebar on "Run and Debug" and while you press begin the configuration file can be created routinely in .vscode/launch.json

In the event you’re having bother, that is the file:

on this file we now have two settings one so that you can use when utilizing the browser and the second is to immediately execute a file (as if utilizing the command line)

Extras

Docker

To make use of in docker you should observe a number of extra factors you’ll observe the identical course of, however while you configure the file in php.ini, you should add two extra strains:

xdebug.start_with_request=sure
xdebug.client_host=host.docker.inside

For a extra full model observe a makefile:

and eventually modify your launch.json, simply add and alter pathmappings

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

Instance:

Thanks for studying!

When you’ve got any questions, complaints or ideas, you’ll be able to go away them right here within the feedback. I can be pleased to reply!

😊😊 See you! 😊😊

Assist Me

Youtube – WalterNascimentoBarroso
Github – WalterNascimentoBarroso
Codepen – WalterNascimentoBarroso