I'm using RequireJS in my browser. I have some JS loaded by a script tag, something like:

requirejs(["jquery", "shared", function($, shared) {
  var foo='bar';
}

I would like to print the current value of 'foo' from a JS console in the Chrome Dev Tools. How can I do this?

Edit 2: This question was originally very vaguely worded - sorry about that. To clarify, I do not wish to stop using RequireJS, pollute global, or know in advance what it is I want to debug.

I'm using RequireJS in my browser. I have some JS loaded by a script tag, something like:

requirejs(["jquery", "shared", function($, shared) {
  var foo='bar';
}

I would like to print the current value of 'foo' from a JS console in the Chrome Dev Tools. How can I do this?

Edit 2: This question was originally very vaguely worded - sorry about that. To clarify, I do not wish to stop using RequireJS, pollute global, or know in advance what it is I want to debug.

• javascript
• debugging
• console
• requirejs
• js-amd

5 Answers 5

Set a breakpoint in Chrome or Firebug to break at the point of your closure. Foo will then be available to the console until you resume script execution.

edit: Scope will still matter. If the variable is private within a member of shared, you'll need to set a break in shared.js instead, e.g. if we assume shared.js contains:

var shared = {
    myFunc: function() {
        var foo = 'bar';
        // break here
    }
}

If I understand the question, the whole point of using RequireJS is not to use global variables!

Therefore I define a console.js module like this:

define(function() {
  var nativeConsole = {};
  try {
    // for IE 8/9
    if (!window.console) {
      window.console = {
        log:   function() {},
        debug: function() {},
        info:  function() {},
        warn:  function() {},
        error: function() {}
      };
    }
    nativeConsole = console;
  // Firefox throws an exception if you access the console object and it doesn't exist. Wow!
  } catch (e) { }
  return nativeConsole;
});

Then use it like this:

requirejs(["jquery", "console", function($, console) {
  var foo='bar';
  console.warn("foo = " + foo);
}

you can do that with

`requirejs(["jquery", "shared", function($, shared) {   
  var foo=bar;
  console.debug(foo);
}`

The same mand works in Firefox too.

The JS Console already has the context of your page. Just open the console, type "foo", then press Enter.

Move the var definition outside of the closure.

var foo;
requirejs(["jquery", "shared", function($, shared) {
  foo='bar';
});

The downside to this is that foo now exists in the global window scope (the variable exists as window.foo), and global variables should be avoided. It can be helpful for debugging though. Alternatively, just define it to window as such:

requirejs(["jquery", "shared", function($, shared) {
  window.foo='bar';
});

Or, if you plan to do this and keep the variable around past the debugging stage, you should consider creating a custom namespace for "your" variables.

var myNamespace = {};
requirejs(["jquery", "shared", function($, shared) {
  myNamespace.foo='bar';
});

And then you can window.console && console.log(myNamespace.foo).