Interacting with require.js modules from the Firebug/Chrome console?

erikcw picture erikcw · Dec 10, 2011 · Viewed 15.5k times · Source

I'm just getting started with require.js. I have successfully wrapped jquery, some plugins, and a couple of my own modules. I'm trying to interact with my modules (or jquery) from Firebug (or Google Chrome's JS console), and I'm not having much luck.

What is the correct way to access these modules from the console?

Answer

benastan picture benastan · Dec 10, 2011

Say we have module /app/scripts/methodsModule.js that returns a few methods:

define({
    someMethod: function() {
        // do stuff
    },
    anotherMethod: function() {
        // do some more stuff
    }
});

In our data-main file /app/scripts/main.js we have:

require(['methodsModule'], function(methods) {
    methods.someMethod() // call someMethod
    methods.anotherMethod() // call anotherMethod
})

Once requireJS loads up our data-main, we can access any modules that have already been loaded by requireJS from the javascript console command line like so:

>> methods = require('methodsModule'); // requireJS has module methodsModule stored
>> methods.someMethod() // call someMethod
>> methods.anotherMethod() // call anotherMethod

If a module hasn't been loaded by a call to require() or define(), we have to pass our own callback for the require function to call after the module has been loaded:

>> myCB = function(methods) { methods.someMethod() }
>> require(['methodsModule'], myCB)

Otherwise, requireJS throws an error saying that the module has not yet been loaded..