Why is Chrome Dev Tools inspector showing different values than in code?

Question

A picture is worth a thousand words. Maybe i'm tired I don't know, But this has me stuck for some reason and makes no sense what so ever. Can anyone point me in the right direction?

> Right click images and open in new tab

Stand Alone Code

/**
 * @file maestro.class.js
 *
 * @external $M         Main Maestro Object
 * @external $M.Core    Maestro Core Object
 */

/**
 * A modified version of class.js to cater to static inheritance and deep 
 * object cloning. Based almost completely on class.js (Javascript MVC -- 
 * Justin Meyer, Brian Moschel, Michael Mayer and others)
 * (http://javascriptmvc.com/contribute.html)
 *
 * - Some portions adapted from Prototype JavaScript framework, version 1.6.0.1 (c) 2005-2007 Sam Stephenson
 * - Some portions extracted from jQuery 1.7
 * - String utilities methods removed and added to String prototype. Documentation
 * added and making code Closure Compiler Advanced Safe by Andrew Donelson.
 *
 * Class system for javascript
 *
 * Setup method will be called prior to any init -- nice if you want to do things without needing the
 * users to call _super in the init, as well as for normalizing parameters.
 *
 * @class Class
 * @expose
 * @namespace Class
 * @memberof Core
 * Advanced Optimization Compliant
 */
(function (m$)
{
    var 
        /** 
         * I have dropped this code for production, But it's bothering as to why
         * this is happening and I would like to get it figured out.
         *
         * @property {Object} regs
         * @expose 
         */
        regs = {
            'undHash':/_|-/,
            'colons':/::/,
            'words':/([A-Z]+)([A-Z][a-z])/g,
            'lowUp':/([a-z\d])([A-Z])/g,
            'dash':/([a-z\d])([A-Z])/g,
            'replacer':/\{([^\}]+)\}/g,
            'dot':/\./
        },

        /**
         * @method getNext
         * @expose
         * @param {*} current
         * @param {string} nextPart
         * @param {boolean} add
         * @returns {*} 
         */
        getNext = function(current, nextPart, add)
        {
            return current[nextPart] || ( add && (current[nextPart] = {}) );
        },

        /**
         * Returns true if the given parameter is either a function or object
         *
         * @method isContainer
         * @expose
         * @param {*} current
         * @returns {*} 
         */
        isContainer=function (current)
        {
            var type = typeof current;
            return type && (  type == 'function' || type == 'object' );
        },

        /**
         * Gets an object from a string.
         *
         * @method getObject
         * @expose
         * @param {String} name the name of the object to look for
         * @param {Array} [roots] an array of root objects to look for the name
         * @param {Boolean} [add] true to add missing objects to
         *  the path. false to remove found properties. undefined to
         *  not modify the root object
         * @returns {String} 
         */
        getObject=function (objectName, roots, add)
        {
            //Production version:
            //var parts = objectName ? objectName.split(/\./) : [],

            var parts = objectName ? objectName.split(regs.dot) : [],
                length = parts.length,
                currents = m$.isArray(roots) ? roots : [roots || window],
                current,
                ret,
                i,
                c = 0,
                type;

            if (length == 0)
            {
                return currents[0];
            }
            while (current = currents[c++])
            {
                for (i = 0; i < length - 1 && m$.isContainer(current); i++)
                {
                    current = m$.getNext(current, parts[i], add);
                }
                if (m$.isContainer(current))
                {

                    ret = m$.getNext(current, parts[i], add);

                    if (ret !== undefined)
                    {

                        if (add === false)
                        {
                            delete current[parts[i]];
                        }
                        return ret;
                    }

                }
            }
        };

    //This is just trying to get it to save the names correctly. 
    //not really wanted. and not working anyway.
    m$.regs=regs;
    m$.getNext = getNext;
    m$.isContainer = isContainer;
    m$.getObject = getObject;   

})(M$['Core']);

And minimized with closure compiler, advanced optimizations:

//So why did everything get renamed? Noot only was expose used,
//but I manually accessed the objects methods and property.
(function(b){
var h={undHash:/_|-/,colons:/::/,words:/([A-Z]+)([A-Z][a-z])/g,lowUp:/([a-z\d])([A-Z])/g,dash:/([a-z\d])([A-Z])/g,replacer:/\{([^\}]+)\}/g,dot:/\./};
b.e=h;
b.a=function(a,b,f){return a[b]||f&&(a[b]={})};
b.b=function(a){return(a=typeof a)&&("function"==a||"object"==a)};
b.d=function(a,d,f){a=a?a.split(h.c):[];
var k=a.length;
d=b.isArray(d)?d:[d||window];
var c,g,e,l=0;if(0==k)return d[0];
for(;c=d[l++];){for(e=0;e<k-1&&b.b(c);e++)c=b.a(c,a[e],f);
if(b.b(c)&&(g=b.a(c,a[e],f),void 0!==g))return!1===f&&delete c[a[e]],g}}
})(M$.Core);

Answer 1

I really wish you'd just copy pasted the complete text somewhere (in pastebin or jsfiddle if not here) because it's much harder to answer if I keep having to click on the picture, remember what I saw, click on this window and start typing, click on the picture to remind myself, click on this window and continue typing... click on the picture to be sure etc..

Anyway, the mysterious bit is not that f changes to J or h changes to J but that G changes to J and regs changes to J.

If you look at the line below, the variables f and h are simply assigned:

a.G = f;

And from that point on f is no longer used. Now, considering this, I'm going to assume that at some point a.G or a.regs will be assigned to Core.J. I'm further going to assume that the non closure compiled code is actually assigning a.regs to Core.regs but the closure compiler compiles Core.regs into Core.J and a.regs into a.G.

Search in the remainder of the code for how the values contained in a gets assigned to Core and you'll have your answer.

---

Additional Answer:

If you want to force closure to export something you need to make it impossible to replace the names safely. Global variables cannot be replaced safely because they may be used by another js file included in the page. As such, if you want the regs to be preserved then make it a global by removing the var.

Or, make it clear that a is global or Core or M$ is global depending on your needs.

Answer 2

Clear your cache or hit ctrl+F5 to reload the page.