My dev setup is like this: I use Netbeans IDE on my Windows Workstation. I always push and test on a cloud server at Rackspace Cloud running Ubuntu, so that my clients can see and test whatever I’m doing for them. I use CodeIgniter and PHP. I usually use Chrome as my browser. In this case, we’re going to install and run XDebug.

Getting and Installing XDebug

Thankfully, Ubuntu has an amazing utility called ‘apt-get’, which lets you simply type in ‘apt-get install php5-xdebug’ to install the xdebug package. If you’re using a different OS, you’ll need to figure out how to install XDebug. On Mac OS X, you can just use MAMP and uncomment the XDebug line in the php.ini file, and follow the instructions below to add remote debugging.

Back to my Ubuntu setup. The Ubuntu “apt-get” installer will put the xdebug config file in: /etc/php5/apache2/conf.d/xdebug.ini

If you’re compiling xdebug or using some other way of installing it, you just need to find out where the install is calling the xdebug PHP extension. It’s usually in php.ini.

Open the config file and add the following after this line:

zend_extension=/usr/lib/php5/20090626/xdebug.so    //This should already be in...

/** Add these lines **/
xdebug.remote_enable=on
xdebug.remote_handler=dbgp
xdebug.remote_host= {YOUR HOSTNAME OR IP ADDRESS ** SEE NOTE BELOW}
xdebug.remote_port=9000

If you are running your test server on your local workstation using MAMP/XAMPP or whatever, just put in ‘localhost’ into the remote_host. If you’re like me and running it on the internet on network, you need to get the IP address of your computer.

Test that it’s working: restart apache, make a script called phpinfo.php and add in:

<?php
phpinfo();
?>

Run that in your browser. You should see a whole section on XDebug, with the settings you included above, that verifies that XDebug is working.

Tricky/optional bit for people wanting to run this remotely…

If you’re running on a network with a router and subnet, you’ll need to find your public internet address and be able to forward packets on port 9000 to your workstation.

What I did, was logged into my Netgear router to get my public internet address. Because my workstation is on a subnet, you need to do port forwarding of packets coming in on port 9000.There should be a “Port Forwarding” section where you can add port 9000 and have all communication forwarded to an IP address (the address of your workstation).

Because I’m running a debugging session remotely, there is a likelihood that my ISP will give me a different IP address later. That simply means that I have to change the xdebug.ini (or php.ini) setting again to point to my new IP address.

Netbeans

In your project properties (right click on the project -> properties), click on Run Configuration, look for the “Advanced…” button and set “Do Not Open Web Browser“. Click OK.

Chrome or Firefox

You need the “Xdebug helper” extension/add-on. Install that from within your browser.

If you’re using the Xdebug helper in Chrome, you may need to go into its options and add the domain that you want to debug, so that it will show you the debugger and profiler button. See this.

Debugging

In Netbeans, open a file like a Codeigniter controller or something. Add a breakpoint somewhere interesting. Press CTRL+F5 to start debugging. Switch to Chrome, go to the URL of the controller that you’re debugging. It should automatically switch back to Netbeans with index.php open and the program paused at the first line of code to say “I’m ready to debug!” Click on Continue (or press F5) and it should bring you to your breakpoint, where you can observe all your variables, call stack, etc.

And developing in CodeIgniter suddenly became even more awesome….

Notes and Erratta

Expression Engine and XDebug don’t like each other! Turns out that there is a piece of code in EE that causes a segmentation fault. Apparently newer builds of XDebug have resolved this bug but on my latest apt-get of XDebug, I’m still having issues.

Why would you want to do this?

The main reason for setting up a local web server is so that you can develop and test your website(s) very quickly, without having to constantly upload to another server. It’s a good way to “stage” your content in an environment which somewhat mimics what the live server environment would be. Whether you’re developing themes or plug-ins for wordpress, or creating a site from scratch using PHP/MySQL, this is a great way to develop and test stuff.

Explanation

This is basically a three step process (and it would be the same on a Mac, though I’m doing this on a PC):

1. Install XAMPP (or MAMPP)
2. Configure Apache virtual hosts file
3. Configure host file

Install XAMPP

Installing XAMPP is dead easy. Download it and install it.

The one thing that I would recommend to do before jumping into configuring virtual hosting is that you fire up XAMPP to make sure that the installation works. You can start XAMPP either by using the GUI which is conveniently installed to your Start Menu. Look for “XAMPP Control Panel”. Or you can start using the command line by clicking Start->Run and typing “cmd”. Type “cd c:\xampp”. Then “xampp_start”.

Make sure you have other network-listening apps such as Skype turned off as they may prevent Apache from starting.

You should now be able to fire up a web browser and visit http://localhost, which will load up the default XAMPP page.

Configuring Virtual Hosting

Virtual hosting is basically a way of hosting multiple websites through the same server. It’s as if it’s running several servers but it’s all running off one server and IP address. So…for example… if you have a server and it has the IP address of 127.0.0.1, you can run 10, 20, 100 different websites on that server. You’d also be able to call the individual websites by their name. For example in this case I have “upvector.local”.

Once you’ve validated that the installation of XAMPP works, you’ll need to set up the Apache virtual hosts file. This is typically in:

XAMPP installation directory\apache\conf\extra\httpd-vhosts.conf

Look for this line:

#NameVirtualHost *:80

Un-comment it so that it reads without the pound sign before it:

NameVirtualHost *:80

Each “virtual host” has its own set up. You’ll need one for the default “localhost” name, so that when you type “localhost”, you get all the XAMPP utilities.

<VirtualHost *:80>
    DocumentRoot "C:\xampp\htdocs"
    ServerName localhost
    <Directory "C:\xampp\htdocs">
        Options Indexes FollowSymLinks
        AllowOverride All
        Order allow,deny
        Allow from all
    </Directory>
</VirtualHost>

To create any arbitrary virtual host, you basically create a new definition using <VirtualHost *:80>. E.g. to create one for “upvector.local”, you’d use this code:

<VirtualHost *:80>
    DocumentRoot "C:\webprojects\upvector"
    ServerName upvector.local
    <Directory "C:\webprojects\upvector">
        Options Indexes FollowSymLinks
        AllowOverride All
        Order allow,deny
        Allow from all
    </Directory>
</VirtualHost>

Configuring the Hosts file

Once you’ve configured Apache, you’ll need to configure your operating system’s “hosts” file. This will let your OS know that when you call a particular network host name, it will route it back to your computer.

To find your hosts file, go to this page on Wikipedia where they have documented the hosts file on almost every operating system.

On Windows, it is typically here:

C:\Windows\system32\drivers\etc\hosts

I recommend that you use Notepad ++ to edit text files. Make sure that when you run Notepad++ (or whatever text editing app), that you RIGHT-CLICK and RUN AS ADMINISTRATOR. If you don’t run the program as an administrator, you’ll be unable to write to the hosts file.

For each of the virtual hosts that you want to run, add:

127.0.0.1        host_name

E.g.

127.0.0.1        upvector.local

Restart Apache. If you did everything correctly, it should start back up and you’ll be able to type the host name into your browser and it’ll serve the correct website.

We’ve already posted a few really good interviews on the site:

• Digital Domain on Transformers 2
• Interview with Darksiders artist Paul Richards
• Andy Park on God of War 3
• Interview with Terryl Whitlach
• 2012: Behind the Scenes with Digital Domain
• The Making of 2012: Interview with Volker Engel & Marc Weigert
• GI Joe: Rise of the Cobra

More to come…

CG Channel is an online destination for entertainment artists. Our mission is to inform, inspire and empower our viewers. For over a decade, CG Channel has served the entertainment production industry with news, features and community services.

What makes CG Channel different from other sites?

High quality video content – CG Channel features impactful interviews and insights from professional production artists.

Broadcasting worldwide from Hollywood – With access to hundreds of studios and artists, CG Channel has access to some of the best artists and studios for unique, insightful content.

Focus on education and training – CG Channel is part of the Gnomon group of companies, which is focused on inspiring and empowering entertainment production artists. The Gnomon group of companies includes:

• Gnomon School of Visual Effects – The premiere school for digital entertainment artists, based in Hollywood, CA.
• The Gnomon Workshop – Video training products for digital entertainment artists.

Competitions hosted by top-level professionals – CG Channel runs monthly digital art contests hosted by top-level industry professionals, giving an opportunity for developing artists to learn from the pros.

So check it out. Head on over to www.cgchannel.com.

Peoples Church of Montreal website