Per poter "loggare" un messaggio nella console del browser durante il ciclo di vita di una applicazione SharePoint Framework (SPFx) bisogna prima importare la classe Log:
import { Log } from '@microsoft/sp-core-library';

//definisco una costante per la sorgente dei log
const SOURCE_LOG = "SgartSpfxApp";

poi posso usare uno dei 4 metodi messi a disposizione:
Log.verbose(SOURCE_LOG, "Messaggio 'verbose'.", this.context.serviceScope);

Log.info(SOURCE_LOG , "Messaggio 'info'.", this.context.serviceScope);

Log.warn(SOURCE_LOG , "Messaggio 'warning'.", this.context.serviceScope);

Log.error(SOURCE_LOG, new Error("Questo è un errore"), this.context.serviceScope);
L'ultimo parametro this.context.serviceScope è opzionale
Ad esempio queste 4 istruzioni:
Log.verbose(SOURCE_LOG, "messaggio verbose", this.context.serviceScope);
Log.info(SOURCE_LOG, "messaggio informativo", this.context.serviceScope);
Log.warn(SOURCE_LOG, "messaggio di avertimento", this.context.serviceScope);
Log.error(SOURCE_LOG, new Error("messaggio di errore"), this.context.serviceScope);
generano questo output nella console del browser
log outputlog output
nella console è anche possibile filtrare i log
log filterlog filter
Le schermate si riferiscono a Chrome, ma ormai tutti i browser hanno delle funzionalità simili.
Di base il Log scrive nella console solo nel workbench locale (https://localhost:4321/temp/workbench.html ).
Sull'online non c'è associato un handler predefinito quindi le scritture non vengono redirette sulla console e vanno "perse". Puoi trovare un implementazione di un custom handler che scrive in console a questo link Logging in SharePoint Framework solutions
E' comunque possibile utilizzare i classici console.debug, console.info, console.warn e console.error di JavaScript solo che se non li si rimuove, l'output viene emesso anche in produzione
Vedi anche Working with the Logging API