Power BI 시각적 개체를 디버그하는 방법How to debug Power BI visuals

이 페이지에는 시각적 개체를 빌드하는 동안 디버깅을 위한 몇 가지 팁이 나와 있습니다.This page shows some tips for debugging while building your visual. 기본 단계를 포함하며 표준 프런트 엔드 애플리케이션과 Power BI 시각적 개체 디버깅의 차이점을 보여 줍니다.It includes basic steps and shows differences between standard frontend applications and Power BI visual's debugging. 이 문서를 읽은 후 중단점을 사용하여 Power BI 시각적 개체를 디버그하고, 예외를 기록하고, Chrome 및 Edge에서 예외를 catch할 수 있습니다.After reading the article you will be able to debug Power BI visuals using breakpoints, log exceptions, and catch exceptions in Chrome and Edge.

중단점 사용Using breakpoints

시각적 개체의 JavaScript는 시각적 개체를 업데이트할 때마다 완전히 다시 로드되므로 디버그 시각적 개체를 새로 고치면 추가된 중단점이 손실됩니다.As the visual's JavaScript is entirely reloaded every time the visual is updated, any breakpoints you add will be lost when the debug visual is refreshed. 이 문제를 해결하려면 코드에서 debugger 문을 사용하세요.As a workaround, use debugger statements in your code. 코드에서 debugger를 사용하는 동안 자동 다시 로드를 해제하는 것이 좋습니다.It's recommended to turn off auto reload while using debugger in your code.

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

예외 표시Showing exceptions

시각적 개체에서 작업하는 경우 모든 오류가 Power BI 서비스에 의해 ‘소비됨’으로 표시됩니다.When working on your visual, you'll notice that all errors are 'consumed' by the Power BI service. 이는 오동작 시각적 개체 때문에 전체 앱이 불안정해지지 않게 하기 위한 Power BI의 의도적인 기능입니다.This is an intentional feature of Power BI to prevent misbehaving visuals from causing the entire app to become unstable.

이 문제를 해결하려면 예외를 catch하고 기록하는 코드를 추가하거나 catch된 예외에서 중단하도록 디버거를 설정합니다.As a workaround, add code to catch and log your exceptions, or set your debugger to break on caught exceptions.

예외 기록Log exceptions

Power BI 시각적 개체에서 예외를 기록하려면 다음 코드를 시각적 개체에 추가하여 예외 로깅 데코레이터를 정의합니다.To log exceptions in your Power BI visual, add the following code to your visual, to define an exception logging decorator.

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;
                }
            }
        }
    }
}

그런 다음 모든 함수에서 이 데코레이터를 사용하여 오류 로깅을 볼 수 있습니다.Then, you can use this decorator on any function to see error logging.

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

예외에서 중단Break on exceptions

Catch된 예외에서 중단하도록 브라우저를 설정할 수도 있습니다.You can also set the browser to break on caught exceptions. 그러면 오류가 발생하는 모든 위치에서 코드 실행이 중지되며 해당 위치에서 디버그할 수 있습니다.This'll stop code execution wherever an error happens, and allow you to debug from there.

EdgeEdge

  1. 개발자 도구(F12)를 엽니다.Open developer tools (F12).
  2. 디버거 탭으로 이동합니다.Go to the Debugger tab.
  3. 예외에서 중단 아이콘(일시 중지 기호가 있는 육각형)을 클릭합니다.Click the break on exceptions icon (hexagon with a pause symbol).
  4. 모든 예외에서 중단 을 선택합니다.Select Break on all exceptions .

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

ChromeChrome

  1. 개발자 도구(F12)를 엽니다.Open developer tools (F12).
  2. 원본 탭으로 이동합니다.Go to the Sources tab.
  3. 예외에서 중단 아이콘을 클릭합니다(일시 중지 기호가 있는 일단 정지 표지).Click the break on exceptions icon (stop sign with a pause symbol).
  4. Catch된 예외에서 일시 중지 확인란을 선택합니다.Select the Pause On Caught Exceptions check box.

스크린샷은 Catch된 예외에 대해 일시 중지가 선택된 원본 탭을 보여줍니다.

다음 단계Next steps