Nuove funzionalità di debug in Angular Ivy

Come ispezionare un componente Angular Ivy dalla DevTools Console

Introduzione

Image for post

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.

Image for post

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).

Image for post

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).

Image for post

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”.

Image for post

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.

Image for post
Image for post

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#

Sono uno sviluppatore web full-stack: Angular / TypeScript e ASP.NET MVC CORE C# https://www.stefanomarchisio.it/

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store