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

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.