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

例外をキャッチする

ビジュアルの作業を行っていると、すべてのエラーが 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. [Pause on caught exceptions](キャッチされた例外で一時停止) を選択します。

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

関連するコンテンツ

その他の質問 Power BI コミュニティを利用してください。