debug-requirejs-loading.js

README.md

Simply include debug-requirejs-loading.js script before starting your requirejs dependencies :

<script src="scripts/require.js"></script>
<script src="path/to/debug-requirejs-loading.js"></script>
<script type="text/javascript">
require(['data/main'], function(){ console.log("requirejs started !"); });
</script>

It will show :

• define() definition calls ordering (you can browse/search it through window.__requirejsDebug.defined array at any moment)
• define() ready function calls ordering (which will depend on your require() calls). You can browse/search throught window.__requirejsDebug.ready array at any moment.

debug-requirejs-loading.js

window.__requirejsDebug = {
    defined: [],
    ready: []
};

var __oldDefine = define;
define = function(moduleName, deps, ready) {
    console.log("Calling define() with arguments : ", arguments);
    window.__requirejsDebug.defined.push(arguments);

    if(!_.isFunction(ready)) {
        ready = deps;
        deps = null;
    }

    return __oldDefine(moduleName, deps, function() {
        console.log(moduleName+" is READY !");
        window.__requirejsDebug.ready.push(arguments);

        return ready.apply(this, arguments);
    });
};

// Copying properties otherwise we will loose stuff like define.amd property (which may be used in
// js scripts like ua-parser-js)
for(var definePropName in __oldDefine) {
    define[definePropName] = __oldDefine[definePropName];
}

Thanks a lot for that script