如果没有行号，调试 underscore.js 模板会很困难

Question

我正在将一个相当大的 php 模板（其中包含基本逻辑的页面）转换为 underscore.js 模板。

问题是我一直在其中出现错误，并且它的缩小“编译”版本在引发错误时不会提供有用的信息或行号。

有没有办法在 underscore.js 中获得更好的模板调试（例如行号）？如果没有，有没有办法让模板在某个点终止（这样我可以缩小错误的范围）。

Answer 1

截至 2012 年 4 月的勘误表： Underscore 1.3.2（2012 年 4 月 9 日）引入了对 _.template() 的更改，请检查 changelog 和来源，因为此处描述的内容可能会出现复杂情况。

是和否 - 模板是首先翻译为一串（难以阅读）Javascript 代码，并作为一个代码块执行，因此，如果您正在查找语法错误，则必须从您尝试执行的模板中删除有问题的代码。

但如果是其他内容，请嵌入 <% return __p.join(''); %> 将中断执行并返回模板的结果（阅读源代码以了解原因，但本质上，模板块的结果被放入名为 __p 一个接一个）。

您还可以在模板评估时进行日志记录（即在模板中放入 <% console.log(<..>) %> 来查看诊断信息。要进行更高级的故障排除，您可以还可以在模板代码中放入 <% debugger; %> 放入您最喜欢的调试器中，尽管您将看到的代码阅读起来不友好，但您将可以访问评估模板范围。如果

我正在做大量的工作并且需要更广泛的调试工具，我可能会获取 underscore.js 脚本的副本并向 _.template() 添加一些诊断支持代码。 函数本身。

_.template = function(str, data) {
  var c  = _.templateSettings;
  var tmpl = 'var __p=[],print=function(){__p.push.apply(__p,arguments);};' +
    'with(obj||{}){__p.push(\'' +
    str.replace(/\\/g, '\\\\')
       .replace(/'/g, "\\'")
       .replace(c.interpolate, function(match, code) {
         return "'," + code.replace(/\\'/g, "'") + ",'";
       })
       .replace(c.evaluate || null, function(match, code) {
         return "');" + code.replace(/\\'/g, "'")
                            .replace(/[\r\n\t]/g, ' ') + "__p.push('";
       })
       .replace(/\r/g, '\\r')
       .replace(/\n/g, '\\n')
       .replace(/\t/g, '\\t')
       + "');}return __p.join('');";
  console.log(tmpl.replace(/;/g, '\n')); // <- dump compiled code to console before evaluating
  var func = new Function('obj', tmpl);
  return data ? func(data) : func;
};

Answer 2

在 Backbone Eye（Firebug 扩展）中，您可以调试下划线模板 - 就像它们是常规 JavaScript 文件一样。模板 ID（如果指定）出现在（Firefox 的）脚本窗口中，您可以选择它（就像常规脚本文件一样），放置断点并观察模板的增量构建。有关如何执行此操作的更多详细信息，请访问 http://dhruvaray.github.io/spa-eye /#views。这应该可以帮助您轻松缩小错误来源的范围。

[免责声明：我是Backbone Eye的作者]

Answer 3

如果长模板中存在 javascript 语法错误，有时很难找到，因为 linter 无法理解 <%%> 中的 javascript。

使用编辑器替换功能并替换：

查找：

%>[\s\S]*?<%[=-]?

替换：

\n//html\n

它将删除 javascript 之间的所有 HTML，然后您可以使用 linter 或 http://esprima.org/demo/validate.html 查找语法错误。

全部替换并美化后：

注意：此正则表达式将在文件的开头和结尾留下剩余的 HTML，因此只需手动删除它们即可。

Answer 4

只需使用 Internet Explorer 开发工具控制台 (F12)。它能够调试到您的下划线模板中。我使用了 chrome 和 firefox，最多得到的是 jquery.js 或 underscore.js 中发生错误的行。但 Internet Explorer 调试器直接转到下划线模板内的有问题的代码。这将使您能够找出错误。