Accediendo a información del Scope de AngularJS desde la consola en Chrome

Ya hace varios meses venimos trabajando con AngularJS, el framework JavaScript super heróico. 🙂

Algún día juntaré fuerzas para comentar mis impresiones, pero primero necesitaría entenderlo con mayor profundidad cosa que al día de hoy no he logrado completamente. Así que voy a concentrarme, esta vez, en sacar a relucir una característica que me pareció interesante a la hora de hacer testing y aprender a usarlo.

Básicamente, cuando se trabaja con AngularJS, se usa muchísimo algo conocido como $scope que vendría a ser un contender de atributos para cierta sección. Un formulario está dentro de un scope, cada item de una lista tendrá definido un scope propio, de hecho, cada componente HTML define un scope. Podríamos decir que es el canal de comunicación que se usa dentro de toda aplicación AngularJS.

Mi sorpresa vino cuando, buscando sobre cómo leer ese contenedor de información desde la consola de Chrome, me encontré con esta explicación y todo cobró vida. Básicamente lo que proponen hacer es:

1. Abrir la consola ([cmd] + [alt] + i)

2. Usar la lupa para indicar el contendor donde esté la información scope a la que querramos acceder

3. Tipear

angular.element($0).scope()

Y podremos ver la cantidad de información que nos muestra el Chrome. Ideal para hacer debug! 🙂


Discussion Area - Leave a Comment