Depurar AngularJS en Chrome
Presentaremos cómo depurar AngularJS en Chrome.
Depurar AngularJS en Chrome
Suponiendo que estamos trabajando con estructuras en AngularJS, hemos pasado por una circunstancia en la que tenemos casillas de verificación en nuestra estructura AngularJS. Debe verificar asumiendo que un cliente ha elegido (o restringido) una de las casillas de verificación antes de presentar el formulario.
Aquí, le diremos la forma ideal de verificar si alguna casilla de verificación está marcada o no está restringida desde su $scope de AngularJS.
# AngularJS
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script>
</head>
<body>
<div ng-app="angApp" ng-controller="angController">
<div>
<input type="text" ng-model="myname" id="myname" />
</div>
</div>
</body>
<script>
var angApp = angular.module('angApp', []);
angApp.controller('angController',
['$scope', function () {
} ]
);
</script>
</html>
Producción:
A la entrada del $scope del componente desde el centro de control del programa, necesitaremos componer este código en la ventana de la consola.
# AngularJS
angular.element($0).scope();
Podemos ejecutar la aplicación, y en ese navegador, presionaremos F12 en esa ventana del navegador. Lo primero que podemos hacer es abrir y elegir la pestaña Elemento y seleccionar el componente que deseamos depurar.
Podemos ver el único elemento que tenemos en el ejemplo anterior. Por lo tanto, podemos hacer clic en el elemento de entrada y, en la ventana, podemos escribir el siguiente script e ingresarlo.
# AngularJS
angular.element($0).scope();
Al elegir el componente en la pestaña Elemento, guardamos los datos del componente o su referencia en $0. es una variable
Debemos recordar que tenemos que seleccionar el elemento haciendo clic en él antes de acceder al elemento $scope.
Notaremos que usar la consola IntelliSense para ver las diferentes técnicas y propiedades que otorga el programa nos ayudará a profundizar más en la aplicación.
el método querySelector() en AngularJS
Sin embargo, hay un método más para hacer esto en lugar de utilizar la variable $0. Podemos utilizar el método .querySelector() del documento.
# AngularJS
document.querySelector("input"); angular.element(document.querySelector("input")).scope();
Valor asignado a AngularJS
Ahora, asignaremos y modificaremos el valor dentro del elemento del cuadro de entrada desde la consola. Por ejemplo, deseamos mostrar el nombre en ese cuadro.
# AngularJS
angular.element($0).scope().name = 'Subhan';
De hecho, nada ocurrió en esa capacidad; el cuadro de entrada aún está vacío.
Todo eso se hará como muestra el nombre en la consola real. Muestra que el valor es de color rojo en Chrome.
Sin embargo, necesitamos ese valor en el cuadro de información. Necesitamos agregar el método $apply() al $scope para reflejar el cambio real en la ventana del navegador.
# AngularJS
angular.element($0).scope().$apply();
Necesitamos presionar la tecla Enter para ver el cuadro de valor Subhan en el cuadro de entrada de nuestro navegador. También podemos agregar otro control en nuestra aplicación, como un botón a alguna validación para verificar el texto o el valor que ingresamos en el cuadro de entrada.
Conclusión
Como discutimos anteriormente, es solo una menor cantidad de conocimiento. Podemos hacer mucho más usando el navegador en la consola JS, lo que ayudará a probar y examinar nuestra aplicación AngularJS.
Podemos acceder a los elementos, propiedades y datos para acceder a la variable $scope y asignar valores a la variable.
Rana is a computer science graduate passionate about helping people to build and diagnose scalable web application problems and problems developers face across the full-stack.
LinkedIn