25 October 2016  ·  javascriptprogrammazione

AngularJS - Debugging Tips


Effettuare il debug di codice JavaScript è ormai un'operazione abbastanza agevole. Se però utilizziamo AngularJS non sempre è immediato capire come accedere ai servizi, scope, controller, etc semplicemente utilizzando la console presente nei browser e senza perdersi in breakpoints, step over, step into, etc...

Eccovi qualche informazione che può rendervi la vita un po' più facile.

Ricordo che con Chrome à possibile aprire la console sviluppatori semplicemente premendo sulla tastiera Ctrl+Shift+j e che la variabile $0 rappresenta sempre l'ultimo elemento ispezionato.

Ecco come ottenere:

Un elemento angular (indicate il selettore appropriato)

let elemento = angular.element(document.querySelector("selettore"));

// oppure se volete l'elemento appena ispezionato da console

let elemento = angular.element($0);

Lo scope di un elemento (ottenuto come da punto precedente)

let scope = elemento.scope();

Il controller di un elemento

let ctrl = elemento.controller();

Un service, che sia tra quelli standard, di terze parti o vostro (ad esempio potete provare mettendo $http come "nomeService")

let srv = angular.element(document.body).injector().get('nomeService')

Attenzione: le istruzioni presenti in questo articolo sono relative ad AngularJS versione 1.x


← Tutti gli articoli