Wednesday, April 13, 2016

Debugging Minified Code

In this blog post, I'm going to step through a task that I'm currently focusing on at work. Sadly, it involves stepping through heavily minified code (with no code-maps), so it's going to be a bit of a doozy.

My employer doesn't open-source its code, but it's all js served to a client browser anyway, so basically public.

The Background: Part of our code injects a js package into a webpage which fires off tracking beacons to an external server at certain intervals. For example, if we inject an advertisement, it will fire a beacon when the ad is loaded (AD_LOADED), when the ad starts playing (AD_STARTED), when the ad has played 25%, 50%, etc.

The Bug: For some weird reason, in our minified code the AD_START beacon is firing twice, when it should fire only once. This isn't occurring in unminified code, so it sounds like a minification issue.

The Build: As part of our build process, we use the Google Closure Library's most optimized minification option (ADVANCED_OPTIONS). Some background on the compiler can be found on Google's site: https://developers.google.com/closure/compiler/docs/api-tutorial3#better

The Process: I've started by opening up my non-minified code in IntelliJ, and stepping though it to get a feel for how/when we are firing beacons. Once I am able to understand this in the non-minified code, I can start mapping it over to the minified code, and begin debugging there.

I'm using Chrome Dev tools to step through the code, and the Charles web proxy to monitor when beacons are firing.

This process goes on for several hours until I eventually discover the error. Closure is renaming the following property:
delete oSWFAdParameters.media.tracking
to
delete a.media.zk

and in this case, 'zk' is undefined, meaning that the tracking data is not being deleted, and is still being passed through to the AS3.

No comments:

Post a Comment