AngularJS Eclipse XDEBUG

I am using XAMPP Version 5.6.21 for Windows and Eclipse MARS for PHP Developers.

In order to enable the XDEBUG communication, I had to make the following changes to the php.ini file:

[xdebug]
zend_extension = "C:\xampp\php\ext\pgp_xdebug.dll"  
xdebug.remote_enable = 1  
xdebug.remote_handler = "dbgp"  
xdebug.remote_host = "127.0.0.1"  
xdebug.remote_port = 9000  

You can get to the php.ini file from the control panel by clicking the Config button for Apache, and then clicking PHP (php.ini) as shown here:
XAMPP

In order to debug a request to PHP using XDEBUG in Eclipse the query parameters of the request must have XDEBUG_SESSION_START set to ECLIPSE_DBGP.

To do this the AngularJS way, we need to create a module that will inject that query parameter in every $http request.

js/xdebug.js:

(function(){
    var xdebug = angular.module('xdebug', []);
    xdebug.factory('debugRequestor', function() {
        var debugRequestor = {
            request: function(config) {
                config.params = config.params || {};
                config.params.XDEBUG_SESSION_START = 'ECLIPSE_DBGP';
                return config;
            }   
        };
        return debugRequestor;
    });
    xdebug.config(['$httpProvider',
        function($httpProvider) {
            $httpProvider
                .interceptors
                .push('debugRequestor');    
        }
    ]); 
}());

Now simply import the module in your application.

js/app.js:

(function(){
    var app = angular.module('app', ['xdebug']);
}());

Don't forget to include the JavaScript files in your HTML file:

<!doctype html>  
<html lang="en" ng-app="app">  
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <meta charset="UTF-8">
        <title>AngularJS XDEBUG Eclipse Example</title>
        <script src="bower_components/angular/angular.js"></script>
        <script src="js/app.js"></script>
        <script src="js/xdebug.js"></script>
    </head>
    <body>
        <!-- Some AngularJS directives here --> 
    </body>
</html>  

Now each $http request you make will have the required query parameter injected.

All you have to do now to start debugging in Eclipse is to make the first request with the query parameter. Eclipse will pop up this dialog the first time:

Click on the "here" link.

Select "localhost" from the "Accept remote session(JIT):" combo box. Click the "OK" button.

Now the debugger stops at the first executible line in a PHP script:
Break point

If you find it annoying, as I did, you can turn that off so the execution only stops at your break points.

Open "Window"->"Preferences":
Window -> Preferences

Uncheck the "Break at First Line" checkbox. Click the "OK" button.

Don't forget to remove or comment out the xdebug module and the script element before putting your application into production.

Enjoy!