Debugging Closure-compiler Compiled Javascript

Question

I have a complex dojo app that works correctly uncompiled, but after compiling with Google's Closure Compiler , I get subtle differences in some behaviours.

As it is, it's exceedingly difficult to debug, and I've been unable to find any information about possible functional differences between compiled and uncompiled Javascript with Google Closure.

Can anyone point me in the direction of known differences, or share any similar experiences and some ideas of where to start looking?

Answer 1

General Closure Compiler Debugging Tips

• Use the VERBOSE warning level. This turns on all of the checks.
• Use the debug flag. It makes renamed symbols ridiculously long, but they are named in such a way you can find the original. If code works with the debug flag but not without it, it is almost certainly a renaming issue.
• Definitely use formatting=PRETTY_PRINT . Debugging compacted code is painful without it.
• Use source maps
• Disable the type based optimizations with --use_types_for_optimization false . Incorrect type annotations can cause the compiler to make invalid assumptions.

UPDATE: As of the 20150315 compiler release, the type based optimizations are enabled by default.

Answer 2

With the help of Chad's answer, I found a bug where my working code like so:

a = [b, b = a][0]; // swap variable values

Was compiled to:

a = b;

It might be fixed in later versions, because tests with the online Closure compiler app don't demonstrate the same bug. Fixed it by not trying to be clever, and using a 3rd variable to hold the old value while swapping values.

Answer 3

A couple problems that I've seen with dojo 1.3 (pre-closure):

• If you have a class property named class it needs to be quoted. So {class: "css"} needs to be written as {"class": "css"} this includes any widget fields.
• Make sure you remove any debugger statements.