À mon humble avis, l'expérience la plus frustrante vient d'obtenir / définir une valeur d'une portée 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 angulaire.js lui-même, mais parfois ce n'est tout simplement pas le moyen le plus efficace. Bien que les méthodes ci-dessous soient très puissantes, elles sont définitivement considérées comme une mauvaise pratique si vous les utilisez réellement dans le code de production, alors utilisez-les à bon escient!

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

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

Obtenir une portée liée à 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 permettre). C'est exactement ce que vous obtenez lorsque vous utilisez la dernière version de Batarang. Si vous modifiez la valeur directement, n'oubliez pas d'utiliser scope.$digest() pour refléter les modifications sur L'interface utilisateur.

$ eval est mauvais

Pas nécessairement pour le débogage. scope.$eval(expression) est très pratique lorsque vous voulez vérifier rapidement si une expression a la valeur attendue.

Les prototypes manquants de scope

La différence entre scope.bla et scope.$eval('bla') est l'ancien ne considère pas la valeurs héritées prototypiquement. Utilisez l'extrait ci-dessous pour obtenir l'image complète (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))
    }
};

Utilisez-le avec scopeEval($($0).scope()).

Où est mon contrôleur?

Parfois, vous pouvez surveiller les valeurs dans ngModel lorsque vous écrivez une directive. Utiliser $($0).controller('ngModel') et vous aurez pour vérifier l'$formatters, $parsers, $modelValue, $viewValue $render et tout et tout.

Il y a aussi $log que vous pouvez utiliser! il utilise votre console d'une manière que vous voulez qu'elle fonctionne!

Affichage de l'erreur / avertissement / info de la façon dont votre console vous montre normalement!

Utiliser ce > Document

Malgré la réponse à la question, il pourrait être intéressant de jeter un oeil à ng-inspector

Essayer ng-inspecteur. Télécharger l'add - on pour Firefox à partir du site http://ng-inspector.org/. Il n'est pas disponible dans le menu Firefox add on.

Http://ng-inspector.org/ - site web

Http://ng-inspector.org/ng-inspector.xpi - Module complémentaire Firefox

Malheureusement, la plupart des add-ons et des extensions de navigateur ne font que vous montrer les valeurs, mais ils ne vous permettent pas d'éditer des variables de portée ou d'exécuter des fonctions angulaires. Si vous voulez changer les variables $ scope dans la console du navigateur (dans tous les navigateurs), vous pouvez utiliser jquery. Si vous chargez jQuery avant AngularJS, angular.élément peut être passé un sélecteur jQuery. Vous pouvez donc inspecter la portée d'un contrôleur avec

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

Exemple: Vous devez modifier la valeur de la variable $scope et voir le résultat dans le navigateur puis tapez simplement dans la console du navigateur:

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 pour laquelle nous avons utilisé $apply() est: toute variable de portée mise à jour à partir du contexte angulaire extérieur ne la mettra pas à jour, vous devez exécuter le cycle digest après la mise à jour des valeurs de la portée en utilisant scope.$apply() .

Pour observer une valeur de variable $ scope, il vous suffit d'appeler cette variable.

Exemple: Vous voulez voir la valeur de $ scope.var1 dans la console web dans Chrome ou Firefox, tapez simplement:

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

Champ d'application() Nous pouvons récupérer le $ scope de l'élément (ou de son parent) en utilisant la méthode scope () sur le élément:

var scope = ele.scope();

Injecteur()

var injector = ele.injector();

Avec cet injecteur, nous pouvons ensuite instancier n'importe quel objet angulaire à l'intérieur de notre application, tels que les services, autres contrôleurs, ou tout autre objet

Ajouter un appel de debugger où vous avez l'intention de l'utiliser.

someFunction(){
  debugger;
}

Dans l'onglet console des outils de développement web de votre navigateur, émettez angular.reloadWithDebugInfo();

Visitez ou rechargez la page que vous avez l'intention de déboguer et voyez le débogueur apparaître dans votre navigateur.

Vous pouvez ajouter "débogueur" dans votre code et recharger l'application, ce qui met le point d'arrêt là et vous pouvez "passer", ou exécuter.

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

Pour le code Visual Studio (pas Visual Studio) faites Ctrl+décalage+P

Tapez débogueur pour Chrome dans la barre de recherche, installez-le et activez-le.

Dans votre fichier launch.json Ajoutez cette configuration:

{
    "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"
        },
    ]
}

Vous devez lancer Chrome avec le débogage à distance activé pour que l'extension puisse s'y attacher.

• fenêtres

Cliquez avec le bouton droit sur le raccourci Chrome, puis sélectionnez Propriétés Dans le champ "cible", " ajouter --à distance-débogage-port = 9222 Ou dans une invite de commande, Exécuter / chrome.exe --remote-débogage-port=9222

• OS X

Dans un terminal, exécutez / Applications / Google \ Chrome.app / Contents / MacOS/ Google \ Chrome --Remote-debugging-port = 9222

• Linux

Dans un terminal, lancez google chrome --remote-débogage-port=9222

Trouver Plus De ===>

Puisque les add-ons ne fonctionnent plus, l'ensemble d'outils le plus utile que j'ai trouvé utilise 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 développement en général. Aussi, bonne vieille console.log() a été super utile!

Peut-être que vous pouvez utiliser Angular Augury une extension Google Chrome Dev Tools pour déboguer les applications Angular 2 et supérieures.

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

1. Ouvrez developer tools dans le navigateur et accédez à l'onglet source.

2. Ouvrez le fichier que vous souhaitez déboguer en utilisant Ctrl + P et recherchez le nom du fichier

3. Ajouter un point de rupture sur une ligne ny en cliquant sur le côté gauche du code.

4. Actualisez la page.

Il y a beaucoup de plug-in disponibles pour le débogage, vous pouvez vous référer pour l'utilisation de chrome plugin Debug Angular Application en utilisant "Débogueur pour chrome" plugin