Serie di post sullo SharePoint Framework
- SharePoint Framework: come effettuare il debug di web part (questo post)

Nel precedente post abbiamo visto il comando utile per lanciare il progetto in debug e aprire la web part tramite il Local Workbanch. Una volta in esecuzione, dobbiamo sapere come muoverci per effettuare il debug delle funzionalità che andremo ad implementare all'interno della nostra Client Side Web Part. 
Come abbiamo già detto, lo SharePoint Framework è basato su tecnologie client-side (Javascript) e quindi dobbiamo metterci in testa di utilizzare i tool di debug offerti dai vari browser presenti nel mercato. Dico questo perchè chi viene da SharePoint e ha lavorato poco con Javascript, è stato sempre abituato al debug server-side del codice. Attaccandosi quindi ai processi di IIS e sfruttando Visual Studio.

Per effettuare il debug abbiamo due opzioni:
  1. Inserire l'istruzione Javascript "debugger" nel punto del nostro sorgente in cui vogliamo far partire il debug
  2. Sfruttare il browser e la funzionalità "source map" offerta da TypeScript
La prima è facile, basta inserire l'isturzione "debugger" nel sorgente, lanciare la soluzione in debug e aspettare che il browser apra automaticamente gli strumenti di sviluppo al punto in cui avete inserito l'istruzione. Da lì in poi potete andare avanti con il debug, struttando i classici comandi "step into" e "step over".


La seconda invece si basa su una funzionalità di TypeScript chiamata "Source maps".
TypeScript è un linguaggio che, una volta compilato, genera del codice Javascript che però risulta molto difficile da debuggare (come potete vedere dall'immagine sotto).


Se però fate F12 sul browser, aprite il tab "Source" e cercate tra le risorse caricate all'interno del browser, troverete la voce "webpack://" che vi permette di raggiungere gli stessi sorgenti TypeScript che sono presenti all'interno della vostra soluzione. In questo modo è possibile fare debug direttamente dal codice che avete prodotto.


Così facendo siete in grado di aprire lo stesso sorgente come se aveste inserito l'istruzione "debugger" all'interno del codice, con il vantaggio di non dover modificare il sorgente ogni volta per iniziare le attività di debug.