다음을 통해 공유

Power BI 사용자 지정 시각적 개체 디버그

  • 아티클

이 문서에서는 시각적 개체를 개발할 때 사용할 수 있는 몇 가지 기본 디버깅 절차를 설명합니다. 이 문서를 읽은 후에는 다음 방법을 사용하여 시각적 개체를 디버그할 수 있습니다.

중단점 삽입

시각적 개체의 전체 JavaScript는 시각적 개체를 업데이트할 때마다 완전히 다시 로드되므로 디버그 시각적 개체를 새로 고치면 추가된 중단점이 손실됩니다. 이 문제를 해결하려면 코드에서 debugger 문을 사용하세요. 코드에서 debugger를 사용하는 동안 자동 다시 로드를 해제하는 것이 좋습니다. 다음은 update 메서드에서 debugger 문을 사용하는 방법을 보여 주는 예입니다.

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

예외 catch

시각적 개체에서 작업하는 경우 모든 오류가 Power BI 서비스에 의해 ‘소비됨’으로 표시됩니다. 이는 Power BI에서 의도한 기능입니다. 이로 인해 시각적 개체가 오동작하여 전체 앱이 불안정해질 수 있습니다.

이 문제를 해결하려면 예외를 catch하고 기록하는 코드를 추가하거나 catch된 예외에서 중단하도록 디버거를 설정합니다.

데코레이터를 사용하여 예외 기록

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) {

예외에서 중단

Catch된 예외에서 중단하도록 브라우저를 설정할 수도 있습니다. 중단은 오류가 발생하는 모든 위치에서 코드 실행을 중지시켜 해당 위치에서 디버그할 수 있게 해줍니다.

  1. 개발자 도구(F12)를 엽니다.

  2. 원본 탭으로 이동합니다.

  3. 예외에서 중단 아이콘(일시 중지 기호가 있는 정지 신호)을 선택합니다.

  4. Catch된 예외에서 일시 중지를 선택합니다.

    스크린샷은 모든 예외에서 중단이 선택된 디버거 탭을 보여줍니다.

관련 콘텐츠

추가 질문이 있으신가요? Power BI 커뮤니티를 이용하세요.