下划线模板在调试器中不起作用

时间:2016-11-23 22:37:05

标签: javascript debugging underscore.js underscore.js-templating

// run with console open
//and paste following when you hit the debugger:

/*
_.templateSettings = {
  interpolate: /\{\{(.+?)\}\}/g
};

var template = _.template("Hello {{ name }}!");

console.log(template({name: "Mustache"}))
*/
debugger
//should return:
//underscore-min.js:5Uncaught TypeError: Cannot read property 'call' of undefined

//out of debugger though, it works:
_.templateSettings = {
  interpolate: /\{\{(.+?)\}\}/g
};
var template = _.template("Hello {{ name }}!");
console.log(template({name: "Mustache"}))
<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script>

我在调试器中无法运行underscore's sample template代码(我想在控制台中使用实际数据)。

  1. .js文件中的代码运行正常。 ✓
  2. 页面加载运行正常后,
  3. 粘贴在控制台中。 ✓
  4. 在调试器断点时粘贴 - 不起作用。 ✘

    _.templateSettings = {
        interpolate: /\{\{(.+?)\}\}/g
    }
    
    var template = _.template("Hello {{ name }}!");
    
    template({name: "Mustache"});
    

    错误:

    underscore.js:1461 Uncaught TypeError: Cannot read property 'call' of undefined
    
  5. 编辑:

    template({name: "Mustache"});

    上的错误 Underscore版本1.8.3的

    Line 1461

    var template = function(data) {
      return render.call(this, data, _);
    };
    

1 个答案:

答案 0 :(得分:2)

这是Function实例化的症状(下划线1454),可以使用以下语句重新创建:

new Function('return true;')

在浏览器中打开任何页面(即使是这个页面),将其复制到控制台并执行,它将打印以下内容:

function anonymous() {
    return true;
}

但是,如果页面当前在调试器中暂停,则语句将返回undefined。我尝试在Firefox中运行相同的功能,它也不起作用,甚至不返回。

我无法解释在调试器中暂停时对V8(Chrome)或SpiderMonkey(Firefox)Javascript引擎的影响。

如果你真的需要它,这是一个解决方法:https://jsfiddle.net/na4Lpt7L/

var source = "Hello {{ name }}!";
debugger;
var template = _.template(source);
debugger;

第一个断点点击时:

> source = "Goodbye {{ name }}!";
< "Goodbye {{ name }}!"

现在继续执行,并在第二个断点上:

> template({name: "Mustache"});
< "Goodbye Mustache!"

如果你想尝试一些选项,我会说把它贴在循环中(while (source.length) { ... }