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.
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:
Finding debugging information in Chrome
Right-click on the web page and bring up the inspector:
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:
// this will cause bad things to happen xhr.open('GET', url, "not a valid string"); // will behave unexpectedly
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.