Отладка визуальных элементов Power BI

В этой статье описываются некоторые основные процедуры отладки, которые можно использовать при разработке визуального элемента. После ознакомления с этой статьей для отладки визуального элемента вы сможете использовать следующие методы:

Использование точек останова

Весь JavaScript визуального элемента перезагружается при каждом обновлении визуального элемента. Поэтому при обновлении визуального элемента отладки будут потеряны все добавленные точки останова. В качестве обходного решения используйте инструкции debugger в коде. Рекомендуется отключить автоматическую перезагрузку при использовании debugger в коде. Ниже приведен пример использования инструкции debugger в методе обновления.

public update(options: VisualUpdateOptions) {
    console.log('Visual update', options);
    debugger;
    this.target.innerHTML = `<p>Update count: <em>${(this.updateCount</em></p>`;
}

Перехват исключений

При работе с визуальными элементами вы заметите, что все ошибки "поглощаются" службой Power BI. Это специальная функция Power BI. Это позволяет предотвращать некорректное поведение визуальных элементов, вследствие чего приложения могут работать нестабильно.

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

Запись исключений в журнал с декоратором

Чтобы вести журнал исключений в визуальном элементе Power BI, необходимо определить декоратор для ведения журнала исключений. Для этого добавьте следующий код в визуальный элемент.

export function logExceptions(): MethodDecorator {
    return function (target: Object, propertyKey: string, descriptor: TypedPropertyDescriptor<any>): TypedPropertyDescriptor<any> {
        return {
            value: function () {
                try {
                    return descriptor.value.apply(this, arguments);
                } catch (e) {
                    console.error(e);
                    throw e;
                }
            }
        }
    }
}

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

@logExceptions()
public update(options: VisualUpdateOptions) {

Остановка на исключениях

Браузер можно также настроить на остановку на перехваченных исключениях. Это останавливает выполнение кода везде, где происходит ошибка, и позволяет выполнять отладку отсюда.

  1. Откройте средства разработчика (F12).

  2. Перейдите на вкладку Источники.

  3. Щелкните значок Остановка на исключениях (значок останова с символом паузы).

  4. Установите флажок Приостановить при перехваченных исключениях.

    Screenshot shows the Debugger tab with Break on all exceptions selected.

Дальнейшие действия