Je travaille sur une preuve de concept en utilisant JavaScript angulaire.

Comment déboguer le code JavaScript angulaire dans différents navigateurs (Firefox et Chrome)?

1. Chrome

Pour Debug AngularJS dans Chrome, vous pouvez utiliser AngularJS Batarang . (D'après des critiques récentes sur le plugin, il semble que AngularJS Batarang ne soit plus maintenu. Testé dans différentes versions de chrome ne fonctionne pas)

Voici le lien pour la description et la démo:

Introduction de Angular JS Batarang

Téléchargez le plugin Chrome à partir d'ici: plugin Chrome pour déboguer AngularJS

Vous pouvez également consulter ce lien: ng-book: Debugging AngularJS

Vous pouvez également utiliser ng-inspect pour déboguer angular.

2. Firefox

Pour Firefox avec l'aide de Firebug, vous pouvez déboguer le code.

Utilisez également ces modules complémentaires pour Firefox : AngScope: modules complémentaires pour Firefox (extension non officielle par AngularJS Team)

3. Débogage AngularJS : Vérifiez le lien: Débogage AngularJS

À mon humble avis, l'expérience la plus frustrante vient de l'obtention / de la définition d'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 angular.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 du code de production, alors utilisez-les à bon escient!

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

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 n'importe quel élément dans l'onglet Éléments de Chrome, par exemple. Le dernier élément sélectionné sera stocké dans la variable $0de la console.

Obtenir une portée liée à un élément

Selon qu'il existe une directive qui crée une étendue d'isolement, 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 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 souhaitez vérifier rapidement si une expression a la valeur attendue.

Les prototypes manquants de la portée

La différence entre scope.blaet scope.$eval('bla')est le premier ne tient pas compte des valeurs héritées prototypiquement. Utilisez l'extrait ci-dessous pour obtenir une vue d'ensemble (vous ne pouvez pas modifier directement la valeur, mais vous pouvez l'utiliser $evalquand même!)

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 souhaiterez peut-être surveiller les valeurs ngModellorsque vous écrivez une directive. L' utilisation $($0).controller('ngModel')et vous obtiendrez de vérifier la $formatters, $parsers, $modelValue, $viewValue $renderet tout.

il y a aussi $ log que vous pouvez utiliser! il utilise votre console de la manière dont vous voulez qu'elle fonctionne!

montrant l'erreur / l'avertissement / les informations comme votre console vous montre normalement!

utilisez ce> Document

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

Essayez ng-inspector. Téléchargez le module complémentaire pour Firefox à partir du site Web http://ng-inspector.org/ . Il n'est pas disponible dans le menu d'ajout de Firefox.

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

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

Malheureusement, la plupart des modules complémentaires et des extensions de navigateur ne vous montrent que les valeurs, mais ils ne vous permettent pas de modifier les variables de portée ou d'exécuter des fonctions angulaires. Si vous souhaitez modifier les variables $ scope dans la console du navigateur (dans tous les navigateurs), vous pouvez utiliser jquery. Si vous chargez jQuery avant AngularJS, angular.element peut recevoir un sélecteur jQuery. Ainsi, vous pouvez inspecter la portée d'un contrôleur avec

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

Exemple: Vous devez changer 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 la suivante: toute variable de portée mise à jour à partir d'un contexte angulaire extérieur ne la mettra pas à jour, vous devez exécuter le cycle de digest après la mise à jour des valeurs de portée à l'aide de 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 de Chrome ou Firefox, tapez simplement:

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

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

Ajoutez un appel debuggerlà où vous avez l'intention de l'utiliser.

someFunction(){
  debugger;
}

Dans l' consoleonglet des outils de développement Web de votre navigateur, le problèmeangular.reloadWithDebugInfo();

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

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

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

var scope = ele.scope();

injecteur()

var injector = ele.injector();

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

Vous pouvez ajouter un `` débogueur '' dans votre code et recharger l'application, ce qui place le point d'arrêt là-bas et vous pouvez `` avancer '' ou exécuter.

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

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

1. ouvrez les outils de développement 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. actualiser la page.

Il existe de nombreux plugins disponibles pour le débogage, vous pouvez vous référer pour l'utilisation du plugin chrome Debug Angular Application en utilisant le plugin "Debugger for chrome"

Pour Visual Studio Code (pas Visual Studio), faites Ctrl+ Shift+P

Tapez Debugger for Chrome dans la barre de recherche, installez-le et activez-le.

Dans votre launch.jsonfichier, 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 s'y attache.

• les fenêtres

Cliquez avec le bouton droit sur le raccourci Chrome et sélectionnez les propriétés Dans le champ "cible", ajoutez --remote-debugging-port = 9222 Ou dans une invite de commande, exécutez /chrome.exe --remote-debugging-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-debugging-port = 9222

En savoir plus ===>

Étant donné que les modules complémentaires ne fonctionnent plus, l'ensemble d'outils le plus utile que j'ai trouvé utilise Visual Studio / IE car 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. De plus, le bon vieux console.log () a été très 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.