Estoy trabajando en una prueba de concepto usando Angular JavaScript.

¿Cómo depurar el código JavaScript angular en diferentes navegadores (Firefox y Chrome)?

1. Chrome

Para Debug AngularJS en Chrome , puede usar AngularJS Batarang . (Según las revisiones recientes del complemento, parece que AngularJS Batarang ya no se mantiene. Probado en varias versiones de Chrome no funciona)

Aquí está el enlace para la descripción y la demostración:

Introducción de Angular JS Batarang

Descargue el complemento de Chrome desde aquí: complemento de Chrome para depurar AngularJS

También puede consultar este enlace: ng-book: Debugging AngularJS

También puede usar ng-inspect para depurar angular.

2. Firefox

Para Firefox, con la ayuda de Firebug , puede depurar el código.

También use estos complementos de Firefox : AngScope: complementos para Firefox (extensión no oficial del equipo de AngularJS)

3. Depurando AngularJS : Verifique el enlace: Depurando AngularJS

En mi humilde opinión, la experiencia más frustrante proviene de obtener / establecer un valor de un alcance específico relacionado con un elemento visual. Hice muchos puntos de interrupción no solo en mi propio código, sino también en angular.js, pero a veces simplemente no es la forma más efectiva. Aunque los métodos a continuación son muy poderosos, definitivamente se consideran una mala práctica si realmente los usa en el código de producción, ¡así que úselos sabiamente!

Obtener una referencia en la consola de un elemento visual

En muchos navegadores que no son IE, puede seleccionar un elemento haciendo clic con el botón derecho en un elemento y haciendo clic en "Inspeccionar elemento". Alternativamente, también puede hacer clic en cualquier elemento en la pestaña Elementos en Chrome, por ejemplo. El último elemento seleccionado se almacenará en variable$0 en la consola.

Obtener un alcance vinculado a un elemento

Dependiendo de si existe una directiva que crea un alcance aislado, puede recuperar el alcance mediante angular.element($0).scope()o angular.element($0).isolateScope()(usar $($0).scope()si $ está habilitado). Esto es exactamente lo que obtiene cuando usa la última versión de Batarang. Si está cambiando el valor directamente, recuerde usarscope.$digest() para reflejar los cambios en la IU.

$ eval es malvado

No necesariamente para depurar. scope.$eval(expression)es muy útil cuando desea comprobar rápidamente si una expresión tiene el valor esperado.

Los miembros prototipo que faltan del alcance

La diferencia entre scope.blay scope.$eval('bla')es que el primero no considera los valores heredados prototípicamente. Use el fragmento de abajo para obtener la imagen completa (no puede cambiar directamente el valor, pero puede usarlo de $evaltodos modos).

scopeCopy = function (scope) {
    var a = {}; 
    for (x in scope){ 
        if (scope.hasOwnProperty(x) && 
            x.substring(0,1) !== '$' && 
            x !== 'this') {
            a[x] = angular.copy(scope[x])
        }
    }
    return a
};

scopeEval = function (scope) {
    if (scope.$parent === null) {
        return hoho(scope)
    } else {
        return angular.extend({}, haha(scope.$parent), hoho(scope))
    }
};

Úselo con scopeEval($($0).scope()) .

¿Dónde está mi controlador?

A veces, es posible que desee controlar los valores ngModelcuando escribe una directiva. Uso $($0).controller('ngModel')y se llega a comprobar el $formatters, $parsers, $modelValue, $viewValue $rendery todo.

¡También hay $ log que puedes usar! hace uso de su consola de la manera que usted quiere que funcione.

mostrando el error / advertencia / información de la forma en que su consola lo muestra normalmente.

usa esto> Documento

A pesar de que la pregunta está respondida, podría ser interesante echar un vistazo a ng-inspector

Pruebe ng-inspector. Descargue el complemento para Firefox desde el sitio web http://ng-inspector.org/ . No está disponible en el menú de complementos de Firefox.

http://ng-inspector.org/ - sitio web

http://ng-inspector.org/ng-inspector.xpi - Complemento de Firefox

Desafortunadamente, la mayoría de los complementos y extensiones de navegador solo le muestran los valores, pero no le permiten editar variables de alcance o ejecutar funciones angulares. Si desea cambiar las variables $ scope en la consola del navegador (en todos los navegadores), puede usar jquery. Si carga jQuery antes de AngularJS, a angular.element se le puede pasar un selector de jQuery. Entonces podría inspeccionar el alcance de un controlador con

angular.element('[ng-controller="name of your controller"]').scope()

Ejemplo: debe cambiar el valor de la variable $ scope y ver el resultado en el navegador y luego escribir en la consola del navegador:

angular.element('[ng-controller="mycontroller"]').scope().var1 = "New Value";
angular.element('[ng-controller="mycontroller"]').scope().$apply();

Puede ver los cambios en su navegador de inmediato. La razón por la que usamos $ apply () es: cualquier variable de alcance actualizada desde fuera del contexto angular no la actualizará vinculante, debe ejecutar el ciclo de resumen después de actualizar los valores del alcance usando scope.$apply().

Para observar un valor de variable $ scope, solo necesita llamar a esa variable.

Ejemplo: desea ver el valor de $ scope.var1 en la consola web en Chrome o Firefox, simplemente escriba:

angular.element('[ng-controller="mycontroller"]').scope().var1;

El resultado se mostrará en la consola de inmediato.

Agregue la llamada a debuggerdonde desea usarla.

someFunction(){
  debugger;
}

En la consolepestaña de las herramientas de desarrollo web de su navegador, emitaangular.reloadWithDebugInfo();

Visite o vuelva a cargar la página que desea depurar y vea aparecer el depurador en su navegador.

var rootEle = document.querySelector("html");
var ele = angular.element(rootEle); 

scope () Podemos obtener el $ scope del elemento (o su padre) usando el método scope () en el elemento:

var scope = ele.scope();

inyector()

var injector = ele.injector();

Con este inyector, podemos crear una instancia de cualquier objeto Angular dentro de nuestra aplicación, como servicios, otros controladores o cualquier otro objeto.

Puede agregar 'depurador' en su código y volver a cargar la aplicación, lo que coloca el punto de interrupción allí y puede 'pasar' o ejecutar.

var service = {
user_id: null,
getCurrentUser: function() {
  debugger; // Set the debugger inside 
            // this function
  return service.user_id;
}

Puede depurar utilizando navegadores integrados en herramientas de desarrollo.

1. abra las herramientas de desarrollo en el navegador y vaya a la pestaña de fuentes.

2. abra el archivo que desea depurar usando Ctrl + P y busque el nombre del archivo

3. agregue un punto de ruptura en una línea y haga clic en el lado izquierdo del código.

4. recarga la página.

Hay una gran cantidad de complementos disponibles para la depuración que puede consultar para usar el complemento de Chrome Debug Angular Application usando el complemento "Debugger for chrome"

Para Visual Studio Code (no Visual Studio), haga Ctrl+ Shift+P

Escriba Debugger for Chrome en la barra de búsqueda, instálelo y habilítelo.

En su launch.jsonarchivo, agregue esta configuración:

{
    "version": "0.1.0",
    "configurations": [
        {
            "name": "Launch localhost with sourcemaps",
            "type": "chrome",
            "request": "launch",
            "url": "http://localhost/mypage.html",
            "webRoot": "${workspaceRoot}/app/files",
            "sourceMaps": true
        },
        {
            "name": "Launch index.html (without sourcemaps)",
            "type": "chrome",
            "request": "launch",
            "file": "${workspaceRoot}/index.html"
        },
    ]
}

Debe iniciar Chrome con la depuración remota habilitada para que la extensión se adjunte a él.

• Ventanas

Haga clic con el botón derecho en el acceso directo de Chrome y seleccione propiedades. En el campo "objetivo", agregue --remote-debugging-port = 9222 O en un símbolo del sistema, ejecute /chrome.exe --remote-debugging-port = 9222

• OS X

En una terminal, ejecute / Applications / Google \ Chrome.app/Contents/MacOS/Google \ Chrome --remote-debugging-port = 9222

• Linux

En una terminal, inicie google-chrome --remote-debugging-port = 9222

Buscar más ===>

Dado que los complementos ya no funcionan, el conjunto de herramientas más útil que he encontrado es el uso de Visual Studio / IE porque puede establecer puntos de interrupción en su JS e inspeccionar sus datos de esa manera. Por supuesto, Chrome y Firefox tienen herramientas de desarrollo mucho mejores en general. Además, ¡el buen viejo console.log () ha sido muy útil!

Tal vez pueda usar Angular Augury, una extensión de Google Chrome Dev Tools para depurar aplicaciones de Angular 2 y superiores.