Front-end отладка

Сложный

Front-end отладка — отладка front-end части приложения Creatio, которая реализована в схемах конфигурационных элементов типа Клиентский модуль (Client module). Подробнее читайте в статье Клиентский модуль.

Интегрированные инструменты отладки

Front-end отладка выполняется непосредственно из браузера. Для этого используются интегрированные инструменты разработчика, которые предоставляют все браузеры, поддерживаемые Creatio. Все браузеры предоставляют одинаковый набор инструментов отладки. Подробнее читайте в официальной документации Chrome, официальной документации Firefox, официальной документации Internet Explorer.

Способы открытия инструментов отладки:

Нажмите F12 или Ctrl+Shift+I в браузере Chrome.
Нажмите F12 в браузере Firefox.
Нажмите F12 в браузере Internet Explorer.

Скрипты и точки останова

Инструменты разработки позволяют посмотреть полный список скриптов, которые подключены к странице и загружены на клиент. Вы можете установить точку останова (breakpoint) в любом месте, где необходимо остановить выполнение программного кода.

Чтобы установить точку останова:

Найдите необходимый файл скрипта (для поиска можно использовать комбинацию клавиш Ctrl+O или Ctrl+P) и откройте его.
Перейдите к строке кода для установки точки останова. Например, вы можете найти метод по его имени.
Установите точку останова.

Способы установки точки останова:
- Нажмите на номер строки.
- Нажмите F9.
- В контекстном меню нажмите Добавить точку останова.

Вы также можете установить условную точку останова (conditional breakpoint). Для такой точки задайте условие срабатывания точки останова.

Чтобы прервать выполнения скрипта непосредственно из кода, воспользуйтесь командой debugger.

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

function customFunc (args) {
    ...
    debugger; // <-- Отладчик остановится здесь.
    ...
}

После прерывания выполнения кода вы можете посмотреть текущие значения переменных, выполнить команды и т. д.

Управлять выполнением front-end отладки

После прерывания выполнения кода выполняется проверка значений переменных стека вызовов. Затем выполняется трассировка кода с целью поиска фрагментов, в которых фактическое поведение программы отличается от запланированного.

Команды отладчика браузера для пошаговой навигации по коду представлены в таблице ниже.

Команды отладчика браузера

Команда	Браузер
Команда	Chrome	Firefox	Internet Explorer
Приостановить/продолжить выполнение скрипта (1)	+	+	+
Выполнить шаг, не заходя в функцию (2)	+	+	+
Выполнить шаг, заходя в функцию (3)	+	+	+
Выполнять до выхода из текущей функции (4)	+	+	+
Отключить все точки останова (5)	+	—	—
Подключить/отключить автоматическую остановку при ошибке (6)	+	—	—

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

Действия консоли браузера

Действия, которые позволяет выполнять консоль браузера:

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

Для этого используйте объект console.

Вызвать команды JavaScript

Откройте консоль браузера. Для этого перейдите на вкладку Console. Чтобы открыть вкладку Console в дополнение к отладчику, нажмите Esc.
Введите JavaScript-команды в консоли.
Нажмите Enter для запуска команд на выполнение.

Отобразить отладочную информацию

Отладочная информация, которую позволяет отобразить консоль:

Информационные сообщения.
Предупреждения.
Сообщения об ошибках.

Чтобы отобразить отладочную информацию, используйте соответствующие методы объекта console, которые приведены в таблице ниже.

Методы объекта console

Метод	Описание	Браузер
Метод	Описание	Chrome	Firefox	Internet Explorer
console.log(object [, object, ...])	Отображает в консоли параметры, которые разделены запятыми. Используется для отображения различных сообщений общего назначения.	+	+	+
console.info(object [, object, ...])	Аналогичен методу log(), но отображает сообщения в другом формате. Это позволяет акцентировать внимание на их важности.	+	+	+
console.warn(object [, object, ...])	Отображает в консоли предупреждение.	+	+	+
console.error(object [, object, ...])	Отображает в консоли сообщение об ошибке.	+	+	+ (8+)

Для каждого типа сообщения в консоли применяется свой стиль.

Методы объекта console позволяют форматировать сообщения в консоли. То есть, можно использовать в тексте сообщений специальные управляющие последовательности (шаблоны), которые при отображении заменяются соответствующими значениями — параметрами, которые дополнительно передаются в функцию, в соответствии с очередностью.

Шаблоны форматирования методов объекта console приведены в таблице ниже.

Шаблоны форматирования методов объекта console

Шаблон	Тип данных	Пример использования
%s	Строка	console.log("%s is one of the basic Creatio products %s", "Creatio sales", "Creatio");
%d, %i	Число	console.log("%s app was issued for the first time ever in %d", "Creatio", 2011);
%f	Число с плавающей точкой	console.log("Pi character is equal to %f", Math.PI);
%o	DOM-элемент (не поддерживается в Internet Explorer)	console.log("DOM-View of item <body/>: %o", document.getElementsByTagName("body")[0]);
%O	Объект Java Script (не поддерживается в Internet Explorer, Firefox)	console.log("Object: %O", {a:1, b:2});
%c	CSS-стиль (не поддерживается в Internet Explorer)	console.log("%cGreen text, %cRed Text on a blue background, %cCapital letters, %cPlain text", "color:green;", "color:red; background:blue;", "font-size:20px;", "font:normal; color:normal; background:normal");

Отобразить трассировочную информацию

Методы консоли браузера, которые позволяют выполнить трассировку и проверку выражений, приведены в таблице ниже.

Методы консоли браузера для трассировки и проверки выражений

Метод	Описание	Браузер
Метод	Описание	Chrome	Firefox	Internet Explorer
console.trace()	Отображает стек вызовов из точки кода с вызовом метода. Стек вызовов включает в себя имена файлов, номера строк, а также счетчик вызовов метода trace() из одной и той же точки.	+	+	+ (11+)
console.assert(expression[, object, ...])	Проверяет выражение, которое передано в качестве параметра expression. Если выражение ошибочно, то отображает в консоли ошибку вместе со стеком вызовов (console.error()), в другом случае — ничего не отображает. Метод позволяет обеспечить соблюдение правил в коде и убедиться, что фактические результаты выполнения кода соответствуют ожиданиям. Метод позволяет выполнять тестирование кода (если результат выполнения неудовлетворительный, то отображается исключение).	+	+ (28+)	+

Пример использования метода console.assert() для тестирования результатов

var a = 1, b = "1";
console.assert(a === b, "A is not equal to B");

Выполнить замеры и профилирование кода

Методы консоли браузера, которые позволяют выполнять замеры времени выполнения кода, приведены в таблице ниже.

Методы консоли браузера для выполнения замеров времени выполнения кода

Метод	Описание	Браузер
Метод	Описание	Chrome	Firefox	Internet Explorer
console.time(label)	Включает счетчик миллисекунд с меткой label.	+	+	+ (11+)
console.timeEnd(label)	Останавливает счетчик миллисекунд с меткой label и публикует результат в консоли.	+	+	+ (11+)

Пример использования методов console.time() и console.timeEnd()

var myArray = new Array();
/* Включает счетчик с меткой Initialize myArray. */
console.time("Initialize myArray");
myArray[0] = myArray[1] = 1;
for (i = 2; i<10; i++)
{
    myArray[i] = myArray[i-1] + myArray[i-2];
}
/* Отключает счетчик с меткой Initialize myArray. */
console.timeEnd("Initialize myArray");

Методы консоли, которые позволяют выполнить профилирование кода и вывести стек профилирования, приведены в таблице ниже. Стек профилирования содержит подробную информацию о времени выполнения операции браузером.

Методы консоли браузера для профилирования кода

Метод	Описание	Браузер
Метод	Описание	Chrome	Firefox	Internet Explorer
console.profile(label)	Запускает профайлер Java Script, затем показывает результаты под меткой label.	+	+ (если открыта панель DevTools)	+ (10+)
console.profileEnd(label)	Останавливает профайлер Java Script.	+	+ (если открыта панель DevTools)	+ (10+)

Вкладки браузера, которые отображают результаты профилирования:

Profiles в браузере Chrome.
Perfomance в браузере Firefox.
Profiler в браузере Internet Explorer.

Режим front-end отладки isDebug

Режим front-end отладки isDebug позволяет получить подробную информацию об ошибках приложения Creatio и их отслеживании в коде.

В обычном режиме работы в браузере выполняется минификация кода. Это означает, что сборка клиентских скриптов осуществляется в файл all-combined.js. Файл собирается в момент создания сборки и содержит всю функциональность. Если включить режим isDebug, то сборка и минификация *.js-файлов отключится. Клиентские скрипты отображаются в виде отдельных файлов.

На заметку. Включение режима front-end отладки влияет на производительность приложения, например, увеличивается время открытия страниц.

Чтобы настроить режим front-end отладки:

Определите текущий статус режима front-end отладки. Для этого нажмите F12 или Ctrl+Shift+I в браузере Chrome.

Кроме статуса режима front-end отладки, в консоли отображается код для его активации или деактивации.
Включите режим front-end отладки.

Способы включения режима front-end отладки:
- Выполнить в консоли браузера код:
  Terrasoft.SysSettings.postPersonalSysSettingsValue("IsDebug", true)
- Изменить значение системной настройки Режим отладки (Debug mode, код isDebug).
Обновите страницу или нажмите F5 для применения изменений.