Debugging Google+ client-side Web Apps

You’re a developer. As you know,  you don’t get everything right the first try.  Sometimes, it takes hours of frustration figuring out what is going wrong in your program.  This post is a collection of resolutions that I have found out while making the same mistakes a couple times.

I also have a couple tips for debugging with Google Chrome. For example, the following screenshot shows interactive debugging from the dev console, which is an essential tool when you’re looking at JavaScript.

 

In this example, I have used interactive debugging to dump an object to the console and look at all the members. You can log items to the console with the following code:

console.log(someObject);

 

Finding debugging information in Chrome

Right-click on the web page and bring up the inspector:

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

Within this tool are two important tabs: the script tab and the JavaScript console.  The console, pictured above, lets you see error codes from JavaScript and for me is usually the first step in figuring out what’s going on.

Troubleshooting

Problem: Sign-in button doesn’t appear

Solution: Make sure you’re including the right js files (http://apis.google.com/js/plusone.js)

 

Problem: Authorization errors from the OAUTH dialog

Solution: A common error that can occur is that the authorizing site is missing. For example, if you’re doing the client-side flow, it’s really easy to forget to add https://plusone.google.com in the Google API console.

 

Problem: Strange behavior, content not changing

Solution: Not uploading changes, server-side caching, and other randomness. This happens to me more than it should for me, or at least it sometimes seems like it does.  A simple view source check sometimes is a great way to get that facepalm reaction when things are not working. You can disable caching in Google Chrome by opening the developer tools (ctrl+shift+i) and then clicking the gear icon as seen in the following image:

 

Problem: Callback function isn’t getting called

Solution: These functions are case sensitive, make sure that you have the right casing.  In the case of XHR, onreadystatechange is all lowercase but xhr.readyState is camelCased.  If you are used to camel-casing, stay alert for this kind of issue.

 

Problem: INVALID_STATE_ERROR: DOM Exception 11

Solution: This probably means that you are using an asynchronous call when you should either be doing a sync call or implementing onreadystatechange.  This could also mean you’re passing an invalid parameter to the “async” member for  your XHR. For example:

xhr.open('GET', url, true); // asynchronous, requires onreadystatechange handler
xhr.open('GET', url, false); // synchronous, will block JavaScript until the request completes
// this will cause bad things to happen
xhr.open('GET', url, "not a valid string");  // will behave unexpectedly

Closing thoughts

That should be enough to get you started. Everybody has their own approach to debugging so experiment while you’re learning and take the time to learn the nuances of your tools. The upfront effort pays for itself because having strong debugging skills will save you heaps of time in the long run.