Comment déboguer Angulaire du Code JavaScript

À mon humble avis, le plus frustrant expérience vient de se /définition de la valeur d'un champ d'application spécifique liée à un élément visuel. J'ai fait beaucoup de points d'arrêt non seulement dans mon propre code, mais aussi dans angular.js lui-même, mais parfois, il n'est tout simplement pas la façon la plus efficace.
Bien que les méthodes ci-dessous sont très puissants, ils sont certainement considéré comme une mauvaise pratique si vous comptez l'utiliser dans le code de production, afin de les utiliser à bon escient!

Obtenir une référence dans la console à partir d'un élément visuel

Dans de nombreux non-IE des navigateurs, vous pouvez sélectionner un élément par cliquer-droit sur un élément et en cliquant sur "Inspecter l'Élément". Sinon, vous pouvez également cliquer sur l'un quelconque des éléments des Éléments de l'onglet dans Chrome, par exemple. Le dernier élément sélectionné sera stockée dans la variable $0 dans la console.

Obtenir un champ lié à un élément

Selon qu'il existe une directive qui crée un isolat champ d'application, vous pouvez récupérer la portée par angular.element($0).scope() ou angular.element($0).isolateScope() (utiliser $($0).scope() si $ est activé). C'est exactement ce que vous obtenez lorsque vous utilisez la dernière version de Batarang. Si vous modifiez directement la valeur, n'oubliez pas d'utiliser scope.$digest() afin de refléter les changements de l'INTERFACE utilisateur.

$eval est mal

Pas nécessairement à des fins de débogage. scope.$eval(expression) est très pratique lorsque vous souhaitez vérifier rapidement si une expression a la valeur attendue.

Le manque prototype membres de portée

La différence entre scope.bla et scope.$eval('bla') est l'ancien ne prend pas en considération le fait hérité de valeurs. L'utilisation de l'extrait de code ci-dessous pour obtenir l'image en entier (vous ne pouvez pas modifier directement la valeur, mais vous pouvez utiliser $eval de toute façon!)

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))
    }
};

L'utiliser avec scopeEval($($0).scope()).

Où est mon contrôleur?

Parfois, vous pouvez surveiller les valeurs dans ngModel lorsque vous êtes à la rédaction d'une directive. Utilisation $($0).controller('ngModel') et vous aurez pour vérifier l' $formatters, $parsers, $modelValue, $viewValue $render et tout et tout.

En dépit de la réponse à la question, il pourrait être intéressant de prendre un coup d'oeil à ng-inspecteur

Malheureusement, la plupart des add-ons et extensions de navigateur sont juste montrer les valeurs pour vous, mais ils ne vous laissent pas modifier la portée des variables ou exécuter angulaire des fonctions. Si vous voulez changer le $scope des variables dans le navigateur de la console (dans tous les navigateurs), alors vous pouvez utiliser jquery. Si vous chargez jQuery avant AngularJS, angulaire.l'élément peut être passé un sélecteur jQuery. Vous pourriez donc à inspecter l'étendue d'un contrôleur avec

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

Exemple:
Vous avez besoin de changer la valeur de $portée variable et voir le résultat dans le navigateur, puis il suffit de taper dans le navigateur de la console:

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

Vous pouvez voir les changements dans votre navigateur immédiatement. La raison nous avons utilisé $apply() est: un champ variable de mises à jour à partir de l'extérieur angulaire contexte de ne pas mettre à jour la liaison, Vous devez exécuter digérer cycle après la mise à jour des valeurs de la portée à l'aide scope.$apply() .

Pour l'observation d'un $champ valeur de la variable, il vous suffit d'appeler cette variable.

Exemple:
Vous voulez voir la valeur de $champ d'application.var1 dans la console web dans Chrome ou Firefox, il suffit de taper:

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

Le résultat sera affiché dans la console immédiatement.

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

portée()
Nous pouvons récupérer le $champ d'application de l'élément (ou de sa mère) à l'aide de la portée() la méthode sur la
élément:

var scope = ele.scope();

injecteur()

var injector = ele.injector();

Avec cet injecteur, on peut alors ensuite instancier tout Angulaire de l'objet à l'intérieur de notre application, tels que les services,
d'autres contrôleurs, ou tout autre objet

Vous pouvez déboguer à l'aide de navigateurs intégrés dans les outils de développement.

1. ouvrir les outils de développement dans le navigateur et allez à l'onglet source.

2. ouvrir le fichier voulez-vous de débogage à l'aide de Ctrl+P et de recherche de nom de fichier

3. ajouter un point d'arrêt sur une ligne ny cliquant sur le côté gauche de la code.

4. actualiser la page.

Il y a beaucoup de plugin disponible pour le débogage, vous pouvez vous référer pour l'utilisation de plugin chrome Debug Angulaire de l'Application à l'aide de "Debugger for chrome" plugin

Depuis les add-ons ne fonctionnent plus, le plus utile des outils que j'ai trouvé est à l'aide de Visual Studio/IE parce que vous pouvez définir des points d'arrêt dans votre JS et inspecter vos données de cette façon. Bien sûr, Chrome et Firefox ont de bien meilleurs outils de dev en général. Aussi, la bonne vieille console.log() a été super utile!