Come eseguire il debug degli oggetti visivi di Power BIHow to debug Power BI visuals

Questa pagina illustra alcuni suggerimenti per eseguire il debug durante la compilazione dell'oggetto visivo.This page shows some tips for debugging while building your visual. Vengono illustrati i passaggi di base e le differenze tra l'esecuzione del dubug nelle applicazioni front-end standard e negli oggetti visivi di Power BI.It includes basic steps and shows differences between standard frontend applications and Power BI visual's debugging. Dopo aver letto l'articolo, sarà possibile eseguire il debug di oggetti visivi di Power BI usando i punti di interruzione, registrare le eccezioni e intercettarle in Chrome ed Edge.After reading the article you will be able to debug Power BI visuals using breakpoints, log exceptions, and catch exceptions in Chrome and Edge.

Uso dei punti di interruzioneUsing breakpoints

Poiché il codice JavaScript dell'oggetto visivo viene completamente ricaricato ogni volta che l'oggetto visivo viene aggiornato, eventuali punti di interruzione aggiunti andranno persi quando l'oggetto visivo di debug viene aggiornato.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. Come soluzione alternativa, è possibile usare istruzioni debugger nel codice.As a workaround, use debugger statements in your code. Quando si usa debugger nel codice, è consigliabile disattivare il ricaricamento automatico.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>`;
}

Visualizzazione delle eccezioniShowing exceptions

Quando si lavora sull'oggetto visivo, si noterà che tutti gli errori vengono 'utilizzati' dal servizio Power BI.When working on your visual, you'll notice that all errors are 'consumed' by the Power BI service. Si tratta di una funzionalità intenzionale di Power BI per impedire che gli oggetti visivi con un comportamento anomalo rendano instabile l'intera app.This is an intentional feature of Power BI to prevent misbehaving visuals from causing the entire app to become unstable.

Come soluzione alternativa, aggiungere codice per rilevare e registrare le eccezioni oppure impostare il debugger in modo che interrompa le eccezioni rilevate.As a workaround, add code to catch and log your exceptions, or set your debugger to break on caught exceptions.

Registrare le eccezioniLog exceptions

Per registrare le eccezioni nell'oggetto visivo di Power BI, aggiungere il codice seguente all'oggetto visivo per definire un elemento Decorator di registrazione delle eccezioni.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;
                }
            }
        }
    }
}

Tale elemento Decorator potrà quindi essere usato in qualsiasi funzione per visualizzare la registrazione degli errori.Then, you can use this decorator on any function to see error logging.

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

Interrompere le eccezioniBreak on exceptions

È anche possibile impostare il browser in modo che interrompa le eccezioni rilevate.You can also set the browser to break on caught exceptions. In questo modo si interrompe l'esecuzione del codice ogni volta che si verifica un errore ed è possibile eseguire il debug da questa posizione.This'll stop code execution wherever an error happens, and allow you to debug from there.

EdgeEdge

  1. Aprire Strumenti di sviluppo (F12).Open developer tools (F12).
  2. Andare alla scheda Debugger.Go to the Debugger tab.
  3. Fare clic sull'icona che consente di interrompere in caso di eccezioni (esagono con un simbolo di pausa).Click the break on exceptions icon (hexagon with a pause symbol).
  4. Selezionare Interrompi per tutte le eccezioni.Select Break on all exceptions.

Screenshot che mostra la scheda Debugger con l'opzione Interrompi per tutte le eccezioni selezionata.

ChromeChrome

  1. Aprire Strumenti di sviluppo (F12).Open developer tools (F12).
  2. Passare alla scheda Sources (Origini).Go to the Sources tab.
  3. Fare clic sull'icona che consente di interrompere in caso di eccezioni (segnale di arresto con un simbolo di pausa).Click the break on exceptions icon (stop sign with a pause symbol).
  4. Selezionare la casella di controllo Pause On Caught Exceptions (Sospendi per le eccezioni rilevate).Select the Pause On Caught Exceptions check box.

Screenshot che mostra la scheda Sources (Origini) con l'opzione Pause On Caught Exceptions (Sospendi per le eccezioni rilevate) selezionata.

Passaggi successiviNext steps