調試underscore.js模板很困難，沒有行號

Question

我正在將一個相當大的php模板（包含基本邏輯的頁面）轉換爲一個underscore.js模板。

問題是我一直存在錯誤，並且在拋出錯誤時縮小的「編譯」版本沒有提供有用的信息或行號。

有沒有辦法在underscore.js中獲得更好的模板調試（比如行號）？如果沒有，有沒有辦法讓模板終止在某一點（這樣我可以縮小錯誤的位置）。

Answer 1

勘誤截至2012年四月的：下劃線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文件一樣。模板標識（如果指定的話）出現在Firefox的腳本窗口中，您可以選擇它（就像常規腳本文件一樣），放置斷點並觀察模板的增量構建。有關如何執行此操作的更多詳細信息，請參閱http://dhruvaray.github.io/spa-eye/#views。這應該可以幫助您輕鬆縮小錯誤的來源。

[免責聲明：我是骨幹眼的作者]

Answer 3

如果你有很長的模板內的JavaScript語法錯誤有時也可以是很難找到，因爲棉短絨不會明白裏面<的JavaScript %%>

使用編輯器取代和替換功能：

查找：

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

替換：

\n//html\n 

它會刪除你的JavaScript之間的任何HTML，那麼你可以使用棉絨或http://esprima.org/demo/validate.html找到語法錯​​誤。

更換畢竟，美化：

注：這個正則表達式將留在開始和你的文件結尾剩餘HTML，因此只需手動刪除這些。