Bits and Pieces of This and That

Debugging Tips for Beginners

John Pereira — Sat, 24 Dec 2011 16:39:17 +0000

A common type of question I find on Stack Overflow are beginners having trouble with figuring out why their AJAX application / functionality isn’t working. They usually go something like this…

I have two input boxes which accept the username and password and sends it to the PHP login page via AJAX. But when I type in my credentials, I don’t get logged in. Why isn’t it working?

When starting out to fix a problem, you need to first find out what the problem is. To do that you need to isolate where the problem lies, so break it down into its individual components. In no particular order, these would be

The Javascript and AJAX
The PHP and server side code
The DOM and HTML

Let’s look at each of them in a bit more detail

The Javascript

I do my development on Firefox because I’ve found it has the best addons for the job. If you haven’t already, install Firebug for Firefox. In the page that has the AJAX functionality, open the Firebug console by hitting F12. Make sure the console is enabled (a reload of the page may be required) and carry out the action that triggers the AJAX response. If your JS code works, you should see something like the following in the console.

Firebug console in action

If you see any error messages or ‘not founds’ for any of your requests, then you have a problem. Clicking on the request allows you to confirm that the correct request and response is happening in your application. If the requests and responses are correct, then your problem lies in either the HTML or your JS callback.

If you’re getting 404 messages for the request, that mean the PHP file you’re pointing to doesn’t exist. Update your code to fix the problem. Do the same if you’re seeing JS error messages. Make good use of the console (which can run live JS that affects your page) and the debugger (where you can walk through your JS files) .

If on the other hand, your request is sent properly but the response is incorrect then you need to look at your PHP page.

The PHP and Server Side Code

When you work with AJAX, it helps if you make sure that your application works without AJAX initially. This serves the double purpose of making sure your core functionality works and having a fallback when Javascript is disabled. Assuming you’re working with GET and not POST, either copy the request URL from Firebug or craft your own and access it in the browser. If you get an error then you’ve isolated (one of) your problem(s)! Find out what’s wrong and fix it and then see if the AJAX functionality works.

Using an IDE when coding gives you many benefits. Although you may think that notepad might be enough for your needs, something like Eclipse (which I use) or NetBeans (which I’ve used) can come in very handy to catch some problems as you code them.

And don’t forget to have a debugger setup. I mainly use Xdebug, but you can just as easily use ZendDebug.

Once you make sure you have the JS async call working properly with the serverside PHP script, you can look at the callback and the DOM.

The DOM and HTML

The most common reason for AJAX updates not working on the client side is usually because the element you are trying to update doesn’t exist. Confirm that the element exists first. I usually use the .length property or the toggle() method to make sure I have the correct reference.

And for any event issues, make sure that the DOM element exists before you bind any events to it. A related cause is when you bind an event with an element but then update the element in thee DOM so you lose the reference. An easy solution to avoid this problem is to use something like the .delegate() method if you’re using jQuery.

To sum it up, whenever you run into a problem carry out the following steps.

1. Isolate the problem

2. Focus on the problem area

3. Fix the bug (easy part!)

The Thing About Debugging

John Pereira — Sun, 27 Nov 2011 10:43:31 +0000

Debugging is twice as hard as writing the code in the first place. Therefore, if you write the code as cleverly as possible, you are, by definition, not smart enough to debug it.

- Brian Kernighan

A Blog is Born. Again.

John Pereira — Sun, 27 Nov 2011 09:43:39 +0000

I used to have a work / technical blog. But then I got bored of it and took it down after a while. It’s been a couple of years since that happened and now I find myself constantly wanting to write down the things that are going through my mind. Mostly for my own reference (what better way to learn than to teach something) but also to showcase the soft skills that are much needed in the field I work in. Let’s jump right in with an introduction.

I’m John Pereira and I’m a software developer. My chosen field is the Web and I mostly work with PHP, Javascript and NodeJS. I’m also familiar with Java to a certain degree. I’m in the process of deciding to learn a new language but it’s currently an even split between Python, Ruby and the Android SDK (Java). Hoping to add the final candidate into the 2012 new year resolutions.

I’ve been coding since I was in school, and I’ve been doing it professionally for about 4 years now. I started out with QBasic and then moved on to VB5 and then a bunch of different languages when I was studying for my bachelors. Most of my work has revolved around large business process oriented systems.

I code for fun and for profit but I haven’t yet contributed to an open source project. This is something I hope to rectify soon, suggestions are welcome. My current toolbox is made up of Zend Framework, CakePHP, WordPress, a bunch of NodeJS libs, MongoDB and jQuery so it would be nice to extend my knowledge in those areas. The only community I have any level of activity is on StackOverflow.

It’s not all fun and games though, as a dutiful gamer I put in whatever time I can grinding through levels (where applicable). I’ve already planned out my December – January playlist like so – Battlefield 3, Modern Warfare 3, Arkham City and Skyrim. I also read a lot of fantasy, sci fi and Terry Pratchett (Yes he rates his own mention because he’s just that good).

And in case I didn’t make this clear earlier, I really enjoy what I do.