Nuove funzionalità di debug in Angular Ivy

Come ispezionare un componente Angular Ivy dalla DevTools Console

Introduzione

Angular Ivy ha portato con se molte novità e miglioramenti; tra questi possiamo trovare: minore peso dei bundle generati ed un uso maggiore del tree-shaking, ottimizzazioni nel processo di compilazione, nuovi modi per effettuare il debug.

Maggiori informazioni su Angular Ivy le potete trovare nel seguente articolo.

In quest’articolo ci occuperemo soprattutto dei nuovi metodi per poter effettuare il debug di un applicazione Angular nella DevTools Console.

Fino ad ora avevamo solo 2 possibilità: usare il debug presente in Visual Studio Code, usare il debug presente nella DevTools Console. Oltre a mettere nel codice dei “console.log()”.

Ora nella Console dei DevTools abbiamo anche l’oggetto “ng” che ci permette di ispezionare un applicazione Angular, di visualizzare e modificare i valori di una proprietà di un componente, piuttosto che richiamare i metodi dello stesso.

Da notare che ciò che verrà illustrato nel proseguo del presente articolo funzionerà solo in modalità di debug. In produzione non troveremo l’oggetto “ng”.

Come funziona l’oggetto “ng” e quali metodi offre?

Ma andiamo per ordine e guardiamo con attenzione l’immagine sottostante.

Se clicchiamo su un componente all’interno del tab “elements” noteremo che compare il simbolo “$0”.

Se invece ci spostiamo nella console e digitiamo “ng” vengono mostrati vari metodi: getComponent(), getContext(), getListeners(), etc.

Proviamo ora ad unire entrambe le cose e digitiamo nella console: ng.getComponent($0).

Come si può vedere vengono mostrate le proprietà ed i metodi del nostro componente. Questa è una funzionalità molto potente perché ci permette di modificare a caldo le proprietà e di richiamare i metodi (come anticipato poco sopra).

Se invece proviamo a digitare: “ng.getHostElement($0)” noteremo che ci viene mostrato html generato dal template.

Modifica di una proprietà

Proviamo ora a modificare una proprietà presente nel nostro componente, per esempio la proprietà “title”.

Noteremo subito che, anche se abbiamo assegnato alla proprietà title il valore “Page X” la UI non viene aggiornata. Come mai?

Questo accade perché da console la “change-detection” non scatta, dobbiamo essere noi ad avviare un ciclo di “change-detection” tramite il metodo: “ng.applyChange($0)”. A questo punto la UI viene magicamente aggiornata.

Stesso discorso nel caso vengano richiamati metodi che modificano una proprietà, dobbiamo essere sempre noi ad invocare un ciclo di “change-detection”.

Proviamo a richiamare un metodo

Nel nostro componente è presente un form con un paio di campi, troviamo inoltre un bottone mappato con il metodo “onSubmit()” che ci permette di recuperare i valori inseriti.

Se vogliamo richiamare il metodo in modalità di debug basta digitare “c.onSubmit()”, se è presente un brekpoint nella corpo del metodo in questione, questo magicamente scatterà e vedremo i valori inseriti.

Conclusioni

Questo piccolo esempio è un buon punto di partenza per iniziare a prendere confidenza con i metodi offerti dall’oggetto “ng”.

Da notare che tutto ciò funziona solo in modalità debug. Non vedremo questi metodi se abbiamo compilato la nostra applicazione in modalità produzione.

Se volete contattarmi il mio profilo Linkedin è il seguente: Stefano Marchisio: Consulente freelance Angular ASP.NET MVC C#