Skip to content

Instantly share code, notes, and snippets.

@jamesstout

jamesstout/vagrant-vscode-php-xdebug-instructions.md

Forked from sveggiani/instructions.md
Last active August 5, 2021 19:29
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save jamesstout/fd6eae2b2ba34e7f32ff3e1a179d55fe to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save jamesstout/fd6eae2b2ba34e7f32ff3e1a179d55fe to your computer and use it in GitHub Desktop.
Download ZIP
Configure Xdebug, Visual Studio Code for a Vagrant VM
Raw
instructions.md

Configure XDebug for Visual Studio Code on a Vagrant VM

1. Assumptions

  • Project (Drupal) is served on /var/www/html in the Vagrant box
  • Local project files location: c:\Users\username\Work\projects\my-project\repo\html
  • Guest machine IP is 10.0.2.2 (if this doesn't work, run route -nee in the VM and look for the gateway address)

2. Configuration

2.1. Install XDebug

  • If the extension is not currently installed (run php -i | grep xdebug in the VM and check the output), follow instructions in https://xdebug.org/docs/install

2.2. Configure XDebug

Check the location of your php.ini (in this case located at /etc/php/7.0/apache2/php.ini) file and add/change the following configuration:

xdebug.remote_enable = true
xdebug.remote_autostart = true
xdebug.remote_host = 10.0.2.2
xdebug.remote_port = 9000
xdebug.remote_log = /var/log/xdebug.log
xdebug.max_nesting_level = 1000

After setting this, remember to restart the webserver: sudo service apache2 restart.

2.3. Install XDebug extension for VSCode

Install PHP Debug extension and reload/restart VSCode.

2.4. Configure Debugger in VSCode

  1. Switch to the debugger panel
  2. Click the gear icon at the top and add a PHP configuration.
  3. This will open ./vscode/launch.json file in the editor. Add an entry with the following settings:
{
  "type": "php",
  "request": "launch",
  "name": "Listen for XDebug",
  "pathMappings": {
    "/var/www/html": "${workspaceRoot}\\html",
  },
  "port": 9000,
  "log": true,
},

Be careful setting the path mappings or the debugger will not work.

  1. sudo apt-get install php-xdebug
  2. Configure XDebug: http://purencool.com/installing-xdebug-on-ubuntu
@flameoftheforest
Copy link

flameoftheforest commented Oct 29, 2018 •
edited
Loading

Awesome post, James!
Thank you very much!

@jsanchezL
Copy link

jsanchezL commented Jan 7, 2019

Hi guys i need yours help.
I have a VM runs over archlinux and the port 9000 is open in my FireWall, visual studio code + PHP Debug and Xdebug helper on chrome.
I was follow the steps, but i have error this the log xdebug

Log opened at 2019-01-07 03:16:11
I: Checking remote connect back address.
I: Checking header 'HTTP_X_FORWARDED_FOR'.
I: Remote address found, connecting to 127.0.0.1:9000.
W: Creating socket for '127.0.0.1:9000', poll success, but error: Operation now in progress (29).
E: Could not connect to client. :-(
Log closed at 2019-01-07 03:16:11

Thanks for your replies

@jsanchezL
Copy link

jsanchezL commented Jan 8, 2019

I have solution a my issue, this configuration works in my archlinux + Vagrant + Visual Studio Code + Chrome + xdebug helper
I was reading the documentation of the others IDE's and insert into the file xdebug.ini the follow lines

xdebug.idekey = "debugit"
xdebug.remote_handler = "dbgp"
xdebug.remote_enable = 1
xdebug.remote_connect_back = 0
xdebug.remote_port = 10000
xdebug.max_nesting_level = 512
xdebug.remote_autostart = true
xdebug.remote_host = 10.0.2.2
xdebug.remote_log = /vagrant/log/xdebug.log

Now the debuggin works, thanks any way

@PeteDevoy
Copy link

PeteDevoy commented May 25, 2019 •
edited
Loading

Gotchas for me:

  • .vscode/launch.json is in the project directory not your user $HOME/.vscode/launch.json
  • if you've somehow installed multiple versions of PHP to check xdebug is enabled, use phpinfo() or make sure make sure the version is specified, e.g. php7.1 -m | grep -i xdebug

Also, I was able to get by with a less detailed configuation and no browser extension:

[IN GUEST/VM] /etc/php/7.1/mods-available/xdebug.ini:

zend_extension=xdebug.so
xdebug.remote_enable=1
xdebug.remote_autostart=1
xdebug.remote_host=10.0.2.2
xdebug.remote_port=9000

$projectDir/.vscode/launch.json:

{   
    "version": "0.2.0",
    "configurations": [
        {
            "name": "Listen for XDebug",
            "type": "php",
            "request": "launch",
            "pathMappings": {
                "/vagrant/public_html": "${workspaceFolder}/public_html",
                "/vagrant/app": "${workspaceFolder}/app"
            },
            "port": 9000,
            "log": false
        },
        {
            "name": "Launch currently open script",
            "type": "php",
            "request": "launch",
            "program": "${file}",
            "cwd": "${fileDirname}",
            "port": 9000
        }
    ]   
}

@skorasaurus
Copy link

skorasaurus commented Jul 17, 2020 •
edited
Loading

Thank you so much for putting this together, this got me 90% of the way there for a ubuntu 18.04 user who uses VVV (varying vagrant vagrants) to manage my VM, firefox, and VS Code.

A couple other tips for users who are struggling to get it set up, this is what worked for me, given my above setup, some may be specific to VVV.

  • try setting xdebug.remote_host= "vvv.test" (for VVV users, set this in vvv/config/php-config/xdebug.ini )

  • I put the absolute paths for the path mappings in launch.json
    e.g.

      	"pathMappings": {
          "/srv/www/plain/public_html": "/path/to/my/vvv/www/plain/public_html"
        },

The disadvantage of this is that if you work with multiple websites, you'll have to change this for each one.

And most importantly, ensure that your IDE KEY is set properly.
The IDE KEY doesn't need to be configured within VS Code (unlike phpstorm). In my case, the IDE KEY is configured in the preferences in your browser's add-on that you're using.
Using VVV (varying vagrant vagrants), the IDE KEY is already preset to "VVVDEBUG" with (you can confirm this by placing phpinfo(); in a php file of the site you're developing); it should return the IDE Key used by xdebug. when you visit it in your browser. If you're not using VVV, you could you use this way to find out if the IDE KEY is already set to another value and you may need to manually set the IDEKEY in your xdebug.ini to something else as @jsanchezL did

You need to then go into your add-on's preferences and here, you set the IDE key to VVVDEBUG. If you're aren't using vvv, you may need to change this to something else.

UPDATE March 2021: xdebug3 is now out (https://xdebug.org/docs/upgrade_guide) and has some changes from v2; most notably the default port number has changed.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment