วิธีการแก้ไขจุดบกพร่องของการแสดงผลด้วยภาพของ Power BIHow to debug Power BI visuals

หน้านี้แสดงเคล็ดลับบางอย่างสำหรับการแก้ไขจุดบกพร่องในขณะที่สร้างการแสดงด้วยภาพของคุณThis page shows some tips for debugging while building your visual. ซึ่งประกอบด้วยขั้นตอนพื้นฐานและแสดงความแตกต่างระหว่างแอปพลิเคชัน frontend มาตรฐานและการแก้ไขจุดบกพร่องของการแสดงผลด้วยภาพของ Power BIIt includes basic steps and shows differences between standard frontend applications and Power BI visual's debugging. หลังจากอ่านบทความ คุณจะสามารถแก้ไขจุดบกพร่องของวิชวล Power BI โดยใช้จุดสั่งหยุด ข้อยกเว้นการบันทึก และตรวจจับข้อยกเว้นใน Chrome และ Microsoft EdgeAfter 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 BIWhen 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.

เนื่องจากเป็นวิธีการแก้ไข โปรดเพิ่มรหัสเพื่อจับและบันทึกข้อยกเว้นของคุณ หรือตั้งค่าตัวแก้ไขจุดบกพร่องของคุณเพื่อแบ่งข้อยกเว้นที่ถูกจับ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

คุณยังสามารถตั้งค่าเบราว์เซอร์เพื่อแบ่งข้อยกเว้นที่ถูกจับได้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. เลือกกล่องกาเครื่องหมายหยุดชั่วคราวบนข้อยกเว้นที่ถูกจับSelect the Pause On Caught Exceptions check box.

เขตข้อมูลบทบาทข้อมูล

ขั้นตอนถัดไปNext steps