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

發生例外狀況時中斷

您也可以將瀏覽器設定為在攔截到例外狀況時中斷。 在發生錯誤時中斷停止程式碼執行，並可讓您從該處進行偵錯。

Microsoft Edge

1. 開啟開發人員工具 (F12)。

2. 移至 [來源] 索引標籤。

3. 選取 [發生例外狀況時暫停] 圖示 (具有暫停符號的停止符號)。

4. 選取 [攔截到例外狀況時暫停]。

   

Chrome

1. 開啟開發人員工具 (F12)。

2. 移至 [來源] 索引標籤。

3. 選取 [發生例外狀況時暫停] 圖示 (具有暫停符號的停止符號)。

4. 選取 [Pause On Caught Exceptions] \(攔截到例外狀況時暫停\) 核取方塊。

   

相關內容

• Power BI 視覺效果疑難排解
• Power BI 視覺效果常見問題集

更多問題嗎？ 試試 Power BI 社群