Setup Netbeans & Xdebug for debugging CodeIgniter with Firefox [in under 15 minutes!] - Mac OSX

[eluser]stormbytes[/eluser]
Hello,

After trying forever to get Netbeans to play nicely with Xdebug & CodeIgniter, I finally got it to work. Boy was it worth it. Gone are the days of 'test_controller' filled with 'echo' & 'prin_r' statements, or the globals-guessing-games. Now I can see pretty much any value, break on specific lines, add watches, and lots more. Plenty of Netbeans & Xdebug goodness all under one roof (well.. browser).

So I decided to share my spoils on the CI forum, in case others might benefit from the knowledge. What follows is a basic tut on how to get Netbeans/FireFox/Xdebug & CodeIgniter all working nicely together, and in under 15 minutes. No brains required. Just follow the steps and presto! You'll be debugging in no time.

Caveat: I'm a Mac user. While I expect the process to be similar on Windows, I have absolutely no clue how to go about it. Sorry Windows users... Buy a Mac


Stuff You Need To Do::

1. Download/Install Xdebug Firefox Add-on

Start by downloading & installing the Xdebug add-on for FireFox, which at this writing stands at version 1.4.

- Go to FireFox->AddOns

- choose the 'Get Addons' tab and enter 'Xdebug' in the search field.

- Choose 'Add to Firefox' and you're good!

If you're too lazy to go through all that trouble, you can grab it directly from https://addons.mozilla.org/en-US/firefox/addon/58688/


2. Edit CI Config File

Next you'll need to make two small changes to your CodeIgniter config file (/application/config/config.php).

(taken from Phil Sturgeon's post on StackOverflow)

Open config.php, and find the line that says:

Code:

$config['enable_query_strings'] = FALSE;

and change it from "FALSE" to "TRUE".

Then find the line that says:

Code:

$config['uri_protocol'] = "AUTO";

Change it so that it reads:

Code:

$config['uri_protocol'] = "PATH_INFO";

Just in case I do something wrong, I opt to comment out the original lines & append the new ones directly bellow, like so:

Code:

// Original: $config['uri_protocol'] = "AUTO";
$config['uri_protocol'] = "PATH_INFO";

// Original: $config['enable_query_strings'] = FALSE;
$config['enable_query_strings'] = TRUE;

Okay, almost there!


3. Enable Xdebug in Mamp Pro's Php.ini files:

As I mentioned, I'm a mac user, and yes - I'm better then you for it! (Okay just kidding!).

- Lauch Mamp Pro (You can download a 14-day free trial from http://www.mamp.info/en/downloads/index.html)

- Choose File->Edit Template-> Choose the Php.ini file for whatever PHP version you're running.

- Scroll to the bottom of the file (or nearly the bottom?) and remove the semicolon ; from the beginning of this line:

Code:

[xdebug]
;zend_extension="/Applications/MAMP/bin/php5.2/lib/php/extensions/no-debug-non-zts-20060613/xdebug.so"

- Then, add the following 4 lines below it, so that the block looks like this:

Code:

[xdebug]
zend_extension="/Applications/MAMP/bin/php5.2/lib/php/extensions/no-debug-non-zts-20060613/xdebug.so"
xdebug.remote_enable=on
xdebug.remote_handler=dbgp
xdebug.remotehost=localhost
xdebug.remote_port=9000

NOTE: The PATH above (/Applications/Mamp/bin/etc...) is my own Mamp/App path and yours may vary. That's perfectly fine.

4. Finally, with FireFox open, launch Netbeans & go to Preferences, and the PHP tab. Make sure that 'Debugger Port' is 9000, and 'Session ID' is netbeans-xdebug.


5. **OPTIONAL/SEE-FOR-YOURSELF**

I don't know if this step is critical, but I thought I'd include the text of my .htaccess file (it's a plain text file, named .htaccess that sits in your application root folder and contains config-info that Apache works with. Mine (code pasted below) simply eliminates the index.php part of the URL by redirecting all http-requests to index.php - don't know much beyond that sorry!)

Code:

RewriteEngine on

RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule ^(.*)$ index.php/$1

That's it! You made it.

Now setup (or open) your NB CI project of choice, and hit command+F5 or 'debug project [name]' from the debug-menu. A new Firefox window (or tab) will launch with your project/site/app in it, and Netbeans will say 'netbeans-xdebug + running' in the bottom/right corner of the window.


*** It will seem like the site/web-page is 'hanging' but in fact it's waiting for YOU to proceed, controlling every step of the process through the debug toolbar (or keyboard shortcuts). Go back to Netbeans and hit F7 to step through the process or F5 to run uninterrupted.

Hope this helps!

If there are errors in this post or if I've left anything out, please feel free to comment below so others might benefit. Personally, I don't know much about this beyond what's in this post, but if you post questions and I can help you I'll give it a shot!


----------------------
Edit -

PLUG: This post was inspired by "Brett" (aka: 'Bretticus') who created a fantastic introduction screencast (series) to debugging with Nebtbeans & Xdebug. If you'd like to see this in action and learn more about what you can do with debugging, check out the tuts on his site:

http://brettic.us/2009/11/07/developing-...-netbeans/

[eluser]bretticus[/eluser]

Code:

RewriteEngine on

RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule ^(.*)$ index.php/$1

index.php slash $1 is probably necessary because you changed:

Code:

// Original: $config['uri_protocol'] = "AUTO";
$config['uri_protocol'] = "PATH_INFO";

// Original: $config['enable_query_strings'] = FALSE;
$config['enable_query_strings'] = TRUE;

Typically, you'd have:

Code:

RewriteEngine on
//...
RewriteRule ^(.*)$ index.php/?$1

and Apache picks up the routing via querystring. Sans question mark and now you have to grab the URI with PATH_INFO. Hope that makes sense (and I hope I'm right!)

Also, this should work fine in Windows too (using WAMP Server, etc.) The only real difference is that the php.ini configuration might be slightly different with a different path. Windows users just need to make sure that xdebug is loaded. The last time I checked, Wamp Server made it REALLY easy to enable/disable PHP extensions.

[eluser]stormbytes[/eluser]
Brett!

Thanks for dropping by! Actually I almost forgot your plug at the end of my post (now-edited). Thanks for the terrific tuts!

Now if only there was a way to get Netbeans to talk to MySQL/Mamp so that I could use their neat little "Services" panel to access the tables, life would be grand! It's not taking 'localhost' and there doesn't seem to be a field for 'socket' connections...

Cheers

[eluser]bretticus[/eluser]
[quote author="stormbytes" date="1288341553"]Brett!

Thanks for dropping by! Actually I almost forgot your plug at the end of my post (now-edited). Thanks for the terrific tuts!

Now if only there was a way to get Netbeans to talk to MySQL/Mamp so that I could use their neat little "Services" panel to access the tables, life would be grand!

Cheers[/quote]

I promise I didn't post to get a plug but thanks! :-) (actually the videos are a little embarrassing.)

Let's not forget Leonard Teo's contributions either. He shows how not to automatically open the browser when clicking debug. Yet another way to get over that querystring 404 hurdle!

As for the services panel, that's possible too.

For me, I changed my MAMP setting to use the default port for MySQL: 3306. Thus, I just went to the Services Window: Database > Drivers. Next, right-click on MySQL (Connector/j Driver) and choose "Connect Using... Next type the following:

Host: localhost
Port: 3306 (or whatever port MAMP is currently configured for MySQL to run at.)
Database: Leave it blank unless you really do want access to just one database. Otherwise, you'll be able to see them all.
Username: root
Password: root
Display Name: Give a description name like "LOCAL" or whatever you want.

[eluser]stormbytes[/eluser]
It's well deserved, Brett. Honestly though I posted the plug because I truly believe others would stand to benefit from you tutorial series. You really make it simple, explaining an otherwise abstract concept in a way anone (yes, even me!) can wrap their head around.

Oh, I actually did manage to get Mamp/NB talking.. Must be a mood thing!

Never quite got the point of out-of-browser debugging... How's that allow you to interact with the web app?

[eluser]bretticus[/eluser]
[quote author="stormbytes" date="1288342003"]
Never quite got the point of out-of-browser debugging... How's that allow you to interact with the web app?[/quote]

Sorry, it's not actually out-of-browser. The only difference is that the automatic opening of the browser window to index.php?yadda=yadda does not occur. After navigating in the browser (and toggling the xdebug addon) to the URL where you need to debug, netbeans will automatically pick up at that point just like in the default scenario.

[eluser]Paul Hernández[/eluser]
Hi guys, thanks for this incredible post

I just have one doubt regarding the .htaccess file

I created this file with the following content:

Code:

<IfModule mod_rewrite.c>
    RewriteEngine on
    RewriteCond %{REQUEST_FILENAME} !-f
    RewriteCond %{REQUEST_FILENAME} !-d
    RewriteRule ^(.*)$ index.php/$1  
</IfModule>

The problem is the Urls don't work because when I use the form_open method it prints form_action = "mysite.com/index.php?controller_name/controller_method" and the "?" should be a "/"

Any comment will be appreciated

Regards

[Edit]
Ok, the form helper function "form_open" generate a form action URL with "?" when the uri protocol is PATH_AUTO. When I'm debugging I have to generate the forms with html code instead of the form_open function, in this way I can set the form_action url that I want. It does not related with the .htaccess file.

[eluser]Hasn[/eluser]
Hi guys,

Thanks a lot of the hard work, I really appreciate it..
I got Netbeans to show me the debug toolbar and the addon on mozila seems to be working fine,

The only issue I am having is that netbeans never comes to the break-point, I can see some values changing in the variables window (when I debug), which means ( i assume) the xdebug is working fine, but how can I get it to move to the break-point where I want it

I have followed all the steps suggested here, except the .htaccess file, as I did not know what to do with that or where to put it,

Any help would be highly appreciated, and thanks again..

Cheers
Hasn

[eluser]Paul Hernández[/eluser]
Hi Hasn:

the .htaccess fiel is a file to configure a particular directory in your apache server. It's very useful in a production server when you don't have access to the apache main configuration file. Yoy can read more information about this in the apache documentation: http://httpd.apache.org/docs/1.3/howto/htaccess.html

For debugging, I think you can use it or not, because I have two projects, one with the .htaccess file (placed in the root folder of the web site), and other project without it. I can debug both using Net-Beans.

The code that I'm using is the following

<

Code:

IfModule mod_rewrite.c>
    RewriteEngine on
    RewriteCond %{REQUEST_FILENAME} !-f
    RewriteCond %{REQUEST_FILENAME} !-d
    RewriteRule ^(.*)$ index.php/$1  
</IfModule>

Just one advice, test the debug with a simple project, and test the breakpoints in the default controller first. I tried to debug the first time with a complex real project, and I setted the break points in other controller (not the default one), so I started debbugging and the NetBeans always shows "Waiting for connection", then I thought that there was something wrong and spent a lot of hours trying to figure out what was happening, the problem was that I have to call the controller with the break points to start debugging.

Hope this help you

[eluser]Hasn[/eluser]
Thanks Paul,

I appreciate your quick response,
Actually, I am trying to debug on a very simple application (only the basic CI installation with one added controller), and I am trying to debug the main controller,

when I click on debug and put some breaking points in the controller, it activates the debug toolbar and it the xdebug status in the bottom right corner said running, and when I click on step forward I can see in the variables windows some values changing, which I assume it is moving the control flow somewhere, but I can't make it go to the breaking point where I need it

Any thought would be greatly appreciated

Cheers
Hasn