Come debuggare una applicazione SharePoint Framework (SPFx) con Chrome
Una WebPart SharePoint Framework (SPFx) può essere debuggata in Chorme tramite i Developer tools. Per accedere ai developer tool puoi usare il tasto F12 o la combinazione CTRL+SHIFT+I.
Se accedi al percorso corretto dei file JavaScript, nella scheda Sources, vedrai che sono tutti in una forma che non coincide con i sorgenti TypeScript.
Per debuggare i sorgenti TypeScript bisogna scavare più a fondo, ovvero andare nel percorso webpack://../../../../src/webparts/nomeWebPart, vedi immagine seguente:sorgenti typescripta questo punto è possibile mettere dei breakpoint, visualizzare le variabili, ecc... tutto come se fosse un normale JavaScript:Debug Nelle schermate dell'esempio ho fatto il debug sul workbench remoto dello SharePoint Online. Per eseguire il workbench remoto, avviare la solution con il comando:
DOS / Batch file
gulp serve --nobrowser
poi aprire la pagina del workbench remoto https://[istanza sharepoint].sharepoint.com/[percorso sito]/_layouts/15/workbench.aspx ed eggiungere la webpart:aggiunta web part
Il debug è possibile anche da Firefox, solo che il percoso dei file TypeScript è diverso. In base alla versione del browser il percorso dei file TypeScript potrebbe cambiare.
