javascript - 浏览器中的 RequireJS：如何在不先修改代码的情况下记录变量？

Question

我在浏览器中使用 RequireJS。我有一些由脚本标签加载的 JS，例如：

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

我想从 Chrome 开发工具中的 JS 控制台打印“foo”的当前值。我怎样才能做到这一点？

编辑2：这个问题最初措辞非常含糊 - 对此感到抱歉。澄清一下，我不想停止使用 RequireJS，污染全局，或者提前知道我要调试的是什么。

Answer 1

在 Chrome 或 Firebug 中设置断点以在关闭点中断。然后 Foo 将可用于控制台，直到您恢复脚本执行。

编辑：范围仍然很重要。如果变量在 shared 的成员中是私有的，则需要在 shared.js 中设置一个中断，例如，如果我们假设 shared.js 包含：

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

Answer 2

如果我理解了这个问题，那么使用 RequireJS 的全部意义就在于不使用全局变量！

因此我定义了一个console.js这样的模块：

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;
});

然后像这样使用它：

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

Answer 3

你可以这样做

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

同样的命令也适用于 Firefox。

Answer 4

JS 控制台已经有了你页面的上下文。只需打开控制台，输入“foo”，然后按 Enter。

Answer 5

将 var 定义移到闭包之外。

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

这样做的缺点是foo现在存在于全局window范围内（变量以 存在window.foo），应该避免使用全局变量。不过，它对调试很有帮助。或者，只需将其定义window为：

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

或者，如果您打算这样做并将变量保留在调试阶段之后，您应该考虑为“您的”变量创建自定义命名空间。

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

然后你就可以了window.console && console.log(myNamespace.foo)。