CODEWITHSUNDEEP
underscore.js
RobKohr
RobKohr

Reputation: 6953

debugging underscore.js templates is difficult without line numbers

I am converting a rather large php template (page with basic logic in it) into an underscore.js template.

The problem is that I keep having errors in it, and it's minified "compiled" version doesn't give useful information or line numbers when an error is thrown.

Is there a way to get better template debugging in underscore.js (such as line numbers)? And if not, is there a way to get the template to terminate at a point (this way I can narrow down where the error is).

Upvotes: 15

Views: 11399

Answers (4)

sserieux
sserieux

Reputation: 1

Simply use the Internet Explorer Development tools console(F12). It is able to debug into your underscore template. I used chrome and firefox and the most I got was the line in jquery.js or underscore.js that the error occured. But the Internet explorer debugger went directly to the offending code inside the underscore template. This will enable you to figure out the error.

Upvotes: 0

Victor
Victor

Reputation: 22198

If you have a javascript syntax error inside a long template sometimes it can be hard to find, since the linter will not understand javascript inside <%%>

Use your editor replace function and replace:

Find:

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

Replace:

\n//html\n

It will remove any HTML between your javascript then you can use a linter or http://esprima.org/demo/validate.html to find for syntax errors.

HTML template

After replace all and beautified: remaining javascript

Note: This regular expression will leave remaining HTML on the start and end of your file, so just remove those manually.

Upvotes: 0

Jacob Oscarson
Jacob Oscarson

Reputation: 6403

Errata as of Apr 2012: Underscore 1.3.2 (April 9, 2012) have introduced changes to _.template(), check the changelog and the source since complications to what have been described here might have shown up.

Yes and no - the template is first translated to a string of (hard to read) Javascript code and the executed as one block of code, so if you're looking for a syntax error you must remove the offending code from the template you're trying to execute.

But if it's something else, embedding a <% return __p.join(''); %> will break execution and return the result of the template up to that point (read the source to see why, but essentially, the results of template blocks are put into an array named __p one after another).

You can also do logging while your template evaluates (i.e. put <% console.log(<..>) %> in your template to see diagnostics. For more advanced troubleshooting, you could also put a <% debugger; %> in your template code to drop into your favourite debugger. Although the code you'll see will be unfriendly to read you will have access to the evaluating templates scope.

If I were doing extensive work and needed more extensive debugging facilities, I'd probably take a copy of the underscore.js script and add some diagnostic support code to the _.template() function itself. For example:

_.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;
};

Upvotes: 20

Dhruva Ray
Dhruva Ray

Reputation: 51

In Backbone Eye (Firebug extension), you can debug underscore templates - just as if they were regular JavaScript files. The template id (if specified) comes up in the script window (of Firefox) and you can select it (just like a regular script file), put breakpoints and watch the template being incrementally built. More details on how to do this is at http://dhruvaray.github.io/spa-eye/#views. This should help you narrow down the source of your error easily.

[Disclaimer : I am the author of Backbone Eye]

Upvotes: 3

Related Questions