While working on our Hangouts app, we noticed that some debugging techniques had to be refined. We'd like to share what we learned.

Some of us are used to writing code and running through it and debugging with breakpoints. This proved difficult since the ‘Reload App’ reloads our app in a new iframe so `__gadget_0( ifr )` gets replaced by `__gagdet_1( ifr )`, effectively losing the reference to the original script we placed our breakpoint in, meaning we couldn’t debug our initialization code this way.

Instead, to figure out how state changes inside our app, we fell back to just doing logging. We wrapped most of the initialization code in a `try-catch` block and intercepted the exceptions with our own debug logger. We then added a simple condition for the logger to do `console.trace` if the object is of an `Error` type. This wasn’t the most robust (cross-browser) code, but it did the job for us.

The other thing that catching our exceptions ourselves did was help clarify the exception itself. Hangout automatically catches the exception, but for example, for the code `_this_var_was_not_defined.nonexistent_property`, provides something like:

Whereas the original message would have been: `[DEBUG] An error occurred on init, see console. ReferenceError: _this_var_was_not_defined is not defined`

Finally, ‘Reload App’ doesn’t refresh the console, which was something we wanted (to fully feel like you’re refreshing the page), so we added calls to `console.group` (with timestamp) and `console.groupEnd` in our initialization.

Hopefully all these tips were helpful in debugging your Google+ Hangouts Apps! Leave any of your tips or questions in the comments below. (thanks to Peng for the write up!)


Levi Brooks is the CEO/Co-founder of Use All Five.
Follow Levi on Twitter

Get new perspectives and the latest information delivered to your inbox: