Отладка скриптов в экранной форме

Материал из Lexema.ru
Перейти к: навигация, поиск


Тестирование и отладка является обязательным этапом в процессе создания качественного ПО. Отладка сценариев на языке JavaScript имеет свою специфику.

Использование консоли браузера Google Chrome

Практически каждый современный браузер оснащён средствами, облегчающими разработку, тестирование и отладку веб-приложений, в частности, JS-сценариев. Для работы с Lexema.ru рекомендуется использовать веб-браузер Google Chrome последней версии.

Для открытия инструментария разработчика DevTools Google Chrome необходимо нажать клавишу F12 или комбинацию Ctrl+Shift+J. Окно DevTools содержит ряд вкладок:

  • Elements - динамическое отображение элементов разметки страницы и их стилей
  • Console - интерактивная консоль для ввода и выполнения команд на языке JavaScript
  • Sources - исходные коды JS-сценариев, подключенных к текущей веб-странице
  • Network - интерфейс для изучения последовательности загрузки компонентов веб страницы, отслеживания запросов (в т.ч. асинхронных AJAX) и просмотра заголовков HTTM-запросов и ответов сервера
  • Timeline
  • Profiles
  • Resources
  • Security
  • Audits

Вывод информации в консоль

Для вывода информации в консоль из сценариев на JavaScript необходимо использовать метод console.log(), который принимает один и более параметров и выводит их текущие значения на консоль, например: 

var sum = L8.Data.root.Sum();
console.log("Сумма: " + sum);
// также можно указывать параметры через запятую
console.log("Логин текущего пользователя: ", L8.Access.UserName, " его роли: ", L8.Access.userRoles);

Вывод ошибок и предупреждений

Кроме метода log объект console также имеет методы warn и error для вывода предупреждений и информации об ошибках соответственно. При этом текст предупреждений будет выводится жёлтым, а текст ошибок - красным цветом.

Группировка записей

Измерение времени выполнения скрипта

Доступ к данным документа и к свойствам элементов формы в консоли

В процессе отладки часто бывает необходимо вывести или изменить значения полей формы или данных модели.

Чтение и изменение значений полей модели документа

Каждая экранная форма на модели предоставляет доступ к значениям всех полей модели с помощью объекта L8.Data.root. Синтаксис работы с полями имеет вид: 

// считывание значения:
var ПЕРЕМЕННАЯ = L8.Data.root.ИМЯ_ПОЛЯ();

// установка значения:
L8.Data.root.ИМЯ_ПОЛЯ( НОВОЕ_ЗНАЧЕНИЕ );

Например: 

// считывание значения:
var cost = L8.Data.root.Cost();

// установка значения:
L8.Data.root.Cost( 123.5 );

Важно! Изменения производятся в объектах JavaScript на стороне клиента приложения (в браузере). Для сохранения изменений в БД необходимо сохранить документ, вызвав метод L8.System.SaveDocument(). В противном случае изменения будут потеряны после закрытия или перезагрузки страницы.

Чтение и изменение значений элементов управления экранной формы

Доступ к значениям всех элементов управления экранной формы может быть получен с помощью объекта L8.View. Синтаксис работы с полями имеет вид: 

// считывание значения:
var ПЕРЕМЕННАЯ = L8.View.ИМЯ_ЭЛЕМЕНТА.value;

// установка значения:
L8.View.ИМЯ_ЭЛЕМЕНТА.value = НОВОЕ_ЗНАЧЕНИЕ;

Например: 

// считывание значения:
var cost = L8.View.tbCost.value;

// установка значения:
L8.View.tbCost.value = 123.5;

Примечание: более предпочтительным способом изменения значений реквизитов документа является доступ через поля модели (L8.Data.root). Применять доступ к значениям элементов формы целесообразно для форм, основанных не на модели ( аналитическая формы на запросах и т.п.).

Доступ к полям модели и элементам управления из консоли

Важно! Доступ к полям модели и элементам формы из консоли производится посредством специального объекта _lxDebug.currentState. Это обусловлено SPA-архитектурой приложения Lexema.ru. Посредством данного объекта изменения производятся на текущей открытой вкладке. Таким образом, для чтения и записи значений из консоли необходимо использовать конструкции следующего вида: 

var cost = _lxDebug.currentState.L8.Data.root.Cost();
_lxDebug.currentState.L8.Data.root.Cost( 123.5 );

var cost = _lxDebug.currentState.L8.View.tbCost.value;
_lxDebug.currentState.L8.View.tbCost.value = 123.5;

_lxDebug.currentState.L8.System.SaveDocument();

Просмотр значений переменных в консоли

Консоль браузера представляет собой мощный и удобный инструмент для просмотра значений переменных, в т.ч. объектов и массивов - она позволяет просматривать их структуру в виде дерева. Однако, большинство переменных, используемых в скриптах Lexema.ru, являются локальными и недоступны из консоли. Для использования возможностей отладки можно временно создать глобальную переменную и обратиться к ней из консоли: 

// создаём пространство имён для хранения отладочных данных
L8.Debug = {}; 
// сохраняем значение объекта в глобальной переменной
L8.Debug.someObjVar = someObjVar;

// в консоли обращаемся к созданной глобальной переменной
_lxDebug.currentState.L8.someObjVar

Например, таким образом можно исследовать структуру объекта-события, передаваемого в обработчик. Код в скрипте:

DebugHandlerParams.png

Обращение в консоли:

ViewVarInConsole.png

Также при обращении к свойствам объекта в консоли работает механизм автодополнения имён, что облегчает исследование сложных незнакомых объектов, документация по которым отсутствует.

Обновление страницы после изменения элементов бизнес-логики

Для повышения производительности работы системы многие её компоненты (JS-скрипты, CSS-стили и др.) кешируются. Это приводит к необходимости обновлять страницу с очисткой кеша при каждом изменении элементов бизнес-логики (моделей, экранных форм, скриптов и т.д.). Для этого в Google Chrome необходимо:

  1. нажать F12 или Ctrl+Shift+J для открытия консоли разработчика
  2. на панели инструментов нажать и длительно удерживать кнопку "Обновить" с круглой стрелкой
  3. в выпавшем меню выбрать пункт "Очистка кеша и аппаратная перезагрузка"

PageReloadWithCacheClean.png

При обновлении страницы обычным способом (F5 или Ctrl+F5) изменения, сделанные в экранной форме с помощью моделера приложения, не будут отображены.

Примечание: если изменились только данные, достаточно нажать кнопку "Обновить" на панели инструментов системы Lexema.ru (справа вверху).

Точки остановки JS-сценариев (breakpoints)

Инструментарий разработчика (Developer Tools), входящий в состав браузера Google Chrome, позволяет устанавливать в JavaScript-коде точки остановки. Это может быть сделано двумя способами:

  • помощь инструкции debugger в коде скрипта
  • с помощью инструментов вкладки Sources (исходники) консоли Chrome

Использование ключевого слова debugger

Ключевое слово debugger, написанное в JS-коде, срабатывает как точка остановки. Обязательным условием для этого является открытая консоль разработчика. В противном случае выполнение скриптов не прерывается.

Например, напишем debugger в обработчике нажатия на кнопку построения отчёта в форме TransactionReportForm: 

debugger;
var qs = new L8.Data.QuerySource('HomeBuh.TransactionReport'),
    TType = L8.View.Lookup1.value ? L8.View.Lookup1.value.VCode : null,
    Category = L8.View.lkpCategory.value ? L8.View.lkpCategory.value.VCode : null,
    Subcategory = L8.View.lkpSubcategory.value ? L8.View.lkpSubcategory.value.VCode : null,
    Contractor = L8.View.Lookup3.value ? L8.View.Lookup3.value.VCode : null,
    Account = L8.View.Lookup2.value ? L8.View.Lookup2.value.VCode : null,
    DateFrom = L8.View.dtiDateFrom.value,
    DateTo = L8.View.dtiDateTo.value,
    SumFrom = L8.View.NumberInput1.value,
    SumTo = L8.View.NumberInput2.value;    
    
qs.load({TType: TType, Category: Category, Subcategory: Subcategory, Contractor: Contractor,
        Account: Account, DateFrom: DateFrom, DateTo: DateTo, SumFrom: SumFrom, SumTo: SumTo
        }).done(function (data) { 
    L8.View.Grid1.dataSource = data;
});

Примечание: после модификации кода скриптов необходима перезагрузка страницы с очисткой кеша.

Нажатие на кнопку в форме при открытой консоли вызовет остановку выполнения скрипта, а в открытой вкладке Sources будет показана строка с ключевым словом debugger:

DebuggerOperator.png

Процесс пошагового выполнения скрипта и просмотра переменных подробно описан в следующем разделе.

Использование панели Sources

Установка breakpoint'ов может быть выполнена в интерактивном режиме с помощью интерфейса вкладки sources консоли разработчика. С одной стороны, это избавляет от модификации исходного кода, а с другой - требует нахождения нужной строки скрипта в консоли.

Загрузите экранную форму, откройте консоль разработчика (F12), перейдите на вкладку Sources, в дереве скриптов в папке Handlers выберите файл, содержащий код сценариев данной экранной формы. Он имеет следующее название: 

Module.ashx?type=viewmodel&name=ИМЯ_ЭКРАННОЙ_ФОРМЫ&r=55499111&v=5&orgid=1
// конкретные значения параметров будут отличаться

Также для поиска требуемого скрипта удобно воспользоваться поиском. На вкладке Sources нажмите правой кнопкой мыши на узле top:

SearchInSourcesMenu.png

В поле введите название скрипта-обработчика, либо какой-то специфический фрагмент программного кода:

SearchResultsInSources.png

Нажмите левой кнопкой мыши на одну из найденных строк. В результате в редакторе нужный файл будет позиционирован на искомую строку.

В окне редактора найдите строку, на которой необходимо сделать остановку выполнения, нажмите левой кнопкой мыши на номере строки в исходном коде. В результате будет создан breakpoint:

SetBreakpoint.png

После этого инициируйте событие, вызывающее код, в котором была установлен breakpoint - произойдёт остановка выполнения скрипта и появится возможность пошагового выполнения кода и просмотра значений переменных. На рисунке показаны некоторые элементы управления процессом отладки:

SourcesDebugButtons.png

  1. Resume script execution (F8) - продолжение выполнения скрипта до следующей точки остановки
  2. Step over next function call (F10) - перейти к следующему оператору, не входя внутрь функций
  3. Step into next function call (F11) - перейти к следующему оператору, с вхождением внутрь функций
  4. Step out of current function (Shift+F11) - выйти из текущей функции и перейти

При закрытии консоли выполнение скриптов продолжается без учёта точек остановки.

Также окно отладчика содержит ряд областей:

  • Watch - область наблюдаемых значений, добавленных пользователем
  • Call stack - стек вызовов. Показывает последовательность вызовов функций до текущей строки
  • Scope - значения переменных, существующих в текущем контексте
  • Breakpoints - список установленных точек остановки

Для просмотра текущего значения переменной наведите на неё указатель мыши:

ViewVarValueInDebugger.png

Также можно просмотреть значение выделенного выражения:

ViewVarValueInDebugger3.png

Справа от выполненной строки отладчик автоматически показывает значение переменной или выражения в данной строке.

Если переменная является объектом, то во всплывающем окне можно просмотреть его структуру и значения отдельных свойств:

ViewVarValueInDebugger2.png

Значения переменных также можно просмотреть в области Scope, либо добавить в список наблюдений Watch:

DebuggerWatchAndScope.png

Дополнительные ссылки

Источник — «http://wikie.lexema.ru/index.php?title=Отладка_скриптов_в_экранной_форме&oldid=300»