Отладка шаблонов underscore.js сложна без номеров строк

Я преобразовываю довольно большой шаблон php (страница с базовой логикой в ​​нем) в шаблон underscore.js.

Проблема заключается в том, что я продолжаю иметь в ней ошибки, и эта мини-компилированная версия не дает полезной информации или номеров строк при возникновении ошибки.

Есть ли способ улучшить отладку шаблонов в underscore.js(например, номера строк)? И если нет, есть ли способ заставить шаблон остановиться в точке (таким образом, я могу сузить место ошибки).

Ответы

Ответ 1

Исправление по состоянию на апрель 2012 года: Underscore 1.3.2 (9 апреля 2012 г.) внесли изменения в _.template(), проверьте changelog и источник, так как могут возникнуть осложнения, которые были описаны здесь.

Да и нет - шаблон сначала переводится в строку кода Javascript и выполняется как один блок кода, поэтому, если вы ищете синтаксическую ошибку, вы должны удалить код нарушения из шаблон, который вы пытаетесь выполнить.

Но если это что-то еще, вложение a <% return __p.join(''); %> нарушит выполнение и вернет результат шаблона до этой точки (прочитайте источник, чтобы узнать, почему, но по существу, результаты блоков шаблонов помещаются в массив с именем __p один за другим).

Вы также можете выполнять регистрацию во время оценки вашего шаблона (т.е. поместите <% console.log(<..>) %> в свой шаблон, чтобы увидеть диагностику. Для более сложного устранения неполадок вы также можете поместить <% debugger; %> в свой код шаблона в свой любимый отладчик. код, который вы увидите, будет недружелюбным для чтения, у вас будет доступ к области оценочных шаблонов.

Если бы я выполнял обширную работу и нуждался в более широких средствах отладки, я бы, вероятно, взял копию underscore.js script и добавил код диагностики для самой функции _.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;
};

Ответ 2

В Backbone Eye (расширение Firebug) вы можете отлаживать шаблоны подчеркивания - так же, как если бы они были обычными файлами JavaScript. Идентификатор шаблона (если указан) появляется в окне script (из Firefox), и вы можете выбрать его (как обычный файл script), поставить контрольные точки и посмотреть, как шаблон инкрементно строится. Более подробная информация о том, как это сделать, находится в http://dhruvaray.github.io/spa-eye/#views. Это должно помочь вам сузить источник ошибки.

[Отказ от ответственности: я являюсь автором Backbone Eye]

Ответ 3

Если у вас есть синтаксическая ошибка javascript внутри длинного шаблона, иногда ее трудно найти, поскольку linter не будет понимать javascript внутри < %% >

Используйте функцию замены редактора и замените:

Поиск:

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

Заменить:

\n//html\n

Он удалит любой HTML-код между вашим javascript, затем вы можете использовать linter или http://esprima.org/demo/validate.html для поиска синтаксических ошибок.

HTML-шаблон

После замены всех и украшенных: остающийся javascript

Примечание. Это регулярное выражение оставит HTML в начале и конце вашего файла, поэтому просто удалите их вручную.

Ответ 4

Просто используйте консоль инструментов разработки Internet Explorer (F12). Он может отладить ваш шаблон подчеркивания. Я использовал chrome и firefox, и больше всего я получил строку в jquery.js или underscore.js о том, что произошла ошибка. Но отладчик Internet Explorer обратился непосредственно к нарушающему коду внутри шаблона подчеркивания. Это позволит вам выяснить ошибку.