對 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. 選取 [ 暫停攔截例外狀況 ] 核取方塊。

   

相關內容

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

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