Theodo apps

Configure php debugger with VSCode and Vagrant.

First thing I ask myself when I begin to work on a new technolgy is "How can I debug it?".

I am currently working on a PHP project, and wanted to be efficient by debugging my code, rather than using log functions like ++code>echo++/code>, ++code>print_r++/code> and ++code>var_dump++/code>. May people do so and usually waste time?

This tutorial was tested with a Symfony2 backend project hosted on a vagrant VM (php5).

Step 1 : Install and configure Xdebug on your Vagrant machine. (~10mins)

Xdebug is an extension for PHP. It helps you debug your php scripts and applications.

  1. Install Xdebug :

++pre>++code>sudo apt-get install php5-xdebug
++/code>++/pre>

  1. Configure it :

++pre>++code>sudo vim /etc/php5/mods-available/xdebug.ini
++/code>++/pre>

Change the file so it looks like :

++pre>++code>[XDebug]
zend_extension="/usr/lib/php5/20121212/xdebug.so"   # Path to your Xdebug extension
xdebug.remote_enable=true                           # Indicate that it will contact a client which is listening on a port
xdebug.remote_port=9000                             # Indicate that the client will listen on port 9000
xdebug.remote_connect_back=true                     # Xdebug will try to connect to the client that made the HTTP request
xdebug.remote_autostart = on                        # Xdebug will always attempt to start a remote debugging session
++/code>++/pre>

Find Xdebug path with :

++pre>++code> sudo find / -name "xdebug.so"
++/code>++/pre>

  1. If you use php5-fpm restart it :

++pre>++code>sudo service php5-fpm restart
++/code>++/pre>

  1. Verify you did it right :

++pre>++code>$ php -v
PHP 5.5.9-1ubuntu4.22 (cli) (built: Aug  4 2017 19:40:28)
Copyright (c) 1997-2014 The PHP Group
Zend Engine v2.5.0, Copyright (c) 1998-2014 Zend Technologies
   with Zend OPcache v7.0.3, Copyright (c) 1999-2014, by Zend Technologies
++/code>++/pre>

If you don't see ++code>Xdebug++/code>  like above, run as sudo :

++pre>++code>sudo ln -s /etc/php5/mods-available/xdebug.ini /etc/php5/fpm/conf.d/20-xdebug.ini
sudo ln -s /etc/php5/mods-available/xdebug.ini /etc/php5/cli/conf.d/20-xdebug.ini
++/code>++/pre>

Now you must see ++code>Xdebug :++/code>

++pre>++code>$ php -v
PHP 5.5.9-1ubuntu4.22 (cli) (built: Aug  4 2017 19:40:28)
Copyright (c) 1997-2014 The PHP Group
Zend Engine v2.5.0, Copyright (c) 1998-2014 Zend Technologies
   with Zend OPcache v7.0.3, Copyright (c) 1999-2014, by Zend Technologies
   with Xdebug v2.2.3, Copyright (c) 2002-2013, by Derick Rethans
++/code>++/pre>

 

Step 2 : Install and configure PHP Debug extension for VSCode by Felix Becker. (~5mins)

  1. Install PHP Debug extension from the marketplace.
marketplace_php_debug-1.png
  1. Add this configuration in your ++code>launch.json++/code> which you can find with Cmd + Shift + P :

++pre>++code class="language-json">{
   "name": "Listen for XDebug",
   "type": "php",
   "request": "launch",
   "pathMappings": {
       "<path_to_your_project_in_vagrant>": "${workspaceRoot}"
   },
   "port": 9000,
   "log": true
}++/code>++/pre>

Don't forget to replace ++code><path_to_your_project_in_vagrant>++/code> !

Step 3 : Enjoy debugging. (~2mins)

  1. Place a breakpoint in your controller and start your debugger :
start_debug.png
  1. Hit your url in your favorite browser. Start debugging !
enjoy_debug.png

Do you want to debug phpunit test ? (~2min)

  1. Use ++code>ifconfig++/code> and find the IP address of the interface which is used to enable communication between your vagrant VM and your local Machine :
ip_address.png
  1. Add ++code>xdebug.remote_host=<IP>++/code> to the xdebug.ini file. Don't forget to restart php5-fpm !
    You can also specify it directly when you launch phpunit in your VM :
    ++code>php -d xdebug.remote_host=<IP> ./bin/phpunit ...++/code>
  2. Place a breakpoint and launch your test. That's all.

 

Learn more about us !

Développeur mobile ?

Rejoins nos équipes