Отладка шаблона контрола

Функция debug()

С помощью функции отладки {{ debug() }} вы можете остановить выполнение исходного кода веб-страницы и получить/изменить данные, сформированные для построения шаблона.

Рассмотрим пример отладки при построении шаблона отображения ячейки списка:

  1. Шаблон описан
    <!-- customNameTemplate.wml -->
    <ws:partial template="Controls/grid:ColumnTemplate">
       <ws:contentTemplate>
          <div title="{{contentTemplate.itemData.item.name}}">
          {{ debug() }}
          {{contentTemplate.itemData.item.name}}
          </div>
       </ws:contentTemplate>
    </ws:partial>
    // JavaScript
    _columns: null,
    _beforeMount: function(options) {
       this._columns = [
          ...
          {
             displayProperty: 'name',
             width: '1fr',
             align: 'left',
             template: customNameTemplate
          },
       ];
    }
    <!-- WML -->
    <Controls.grid:View
        ...
        columns="{{_columns}}">
    </Controls.grid:View>
  2. При открытии веб-страницы, для отображения которой производится построение шаблона, выполнение исходного кода будет остановлено (Paused in debugger) в той точке, где вызывается функция отладки debug().
  3. Установите breakpoint в 18 строке и запустите выполнение JS-кода по кнопке "Resume script execute" (F8). Так встроенный в веб-браузер отладчик выполнит инструкции JS-кода до 18 строки, в которых производится объявление переменных, хранящих данные о создаваемом шаблоне.

  4. На вкладке "Console" Вы можете получить/изменить значения таких переменных. Например, для шаблона отображения ячейки списка в переменной data хранится экземпляр записи списка.

Search in anonymous and content scripts

Выполните настройку утилиты Chrome DevTools:

  1. Откройте утилиту Chrome DevTools — клавиша F12.
  2. Откройте настройки утилиты. Есть два способа:
    • Нажмите клавишу F1.
    • Перейдите на вкладку Source → нажмите на кнопку с иконкой "Троеточие" → пункт Settings.
  3. В окне Settings перейдите в пункт Preferences.
  4. Установите флаг "Search in anonymous and content scripts" в блоке "Sources".

Теперь на вкладке Sources используйте глобальный поиск, который можно открыть комбинацией клавиш CTRL + SHIFT + F. В поиске можно найти имена событий или имена шаблонов.