web-dev-qa-db-fra.com

Comment déboguer le code JavaScript angulaire

Je travaille sur une preuve de concept utilisant JavaScript angulaire.

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

debugginggoogle-chromefirefoxangularjsbrowser
100
AskQuestion

1. Chrome

Pour Debug AngularJS dans chrome, vous pouvez utiliser AngularJS Batarang . (D'après les dernières critiques sur le plugin, il semble qu'AngularJS Batarang n'est 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 plug-in chrome à partir d'ici: plug-in chrome pour déboguer AngularJS

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

Vous pouvez également utiliser ng-inspect pour le débogage angulaire.

2. Firefox

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

Utilisez également ces add-ons Firefox: AngScope: add-ons pour Firefox (extension non officielle de l'équipe AngularJS)

3. Déboguer AngularJS: Vérifier le lien: Déboguer AngularJS

63
Vaibhav Jain

À mon humble avis, l'expérience la plus frustrante consiste à obtenir/définir une valeur d'une étendue 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 mauvaises pratique si vous utilisez réellement dans le code de production, alors utilisez-les judicieusement!

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 dessus avec le bouton droit de la souris et en cliquant sur "Inspecter l'élément". Vous pouvez également cliquer sur n'importe quel élément de l'onglet Elé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 ou non une directive créant une étendue d'isolement, vous pouvez extraire l'étendue par angular.element($0).scope() ou angular.element($0).isolateScope() (utilisez $($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, pensez à utiliser scope.$digest() pour refléter les modifications apportées à l'interface utilisateur.

$ eval is evil

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 membres manquants du prototype de scope

La différence entre scope.bla et scope.$eval('bla') est que l'ancien ne prend pas en compte les valeurs héritées du prototype. Utilisez l'extrait de code ci-dessous pour obtenir une image complète (vous ne pouvez pas modifier directement la valeur, mais vous pouvez quand même utiliser $eval!)

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 dans ngModel lorsque vous écrivez une directive. Utilisez $($0).controller('ngModel') et vous pourrez vérifier le $formatters, $parsers, $modelValue, $viewValue$render et tout le reste.

28
Osbert Ngok

il y a aussi $ log que vous pouvez utiliser! il utilise votre console d’une manière qui vous convient!

montrant l'erreur/avertissement/info comme votre console vous le montre normalement!

utilisez ceci> Document

13
Ali RAN

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

10
Iker Aguayo

Essayez ng-inspector. Téléchargez l'add-on pour Firefox sur le site Web http://ng-inspector.org/ . Il n’est pas disponible dans l’ajout de Firefox dans le menu.

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

http://ng-inspector.org/ng-inspector.xpi - Complément de Firefox

7
Akash

Malheureusement, la plupart des add-ons et des extensions de navigateur ne vous affichent que les valeurs, mais ils ne vous permettent pas de modifier les variables de l'étendue 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, il est possible de transmettre à angular.element un sélecteur jQuery. Donc, vous pouvez inspecter le périmètre 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 que: toute variable de portée mise à jour depuis un contexte angulaire extérieur ne met pas à jour la liaison, 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 sous Chrome ou Firefox, tapez simplement:

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

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

7
Iman Sedighi

Ajoutez l’appel à debugger là où vous avez l’intention de l’utiliser.

someFunction(){
  debugger;
}

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

Visitez ou rechargez la page que vous souhaitez déboguer et voyez le débogueur apparaître dans votre navigateur.

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

scope () Nous pouvons récupérer la portée $ de l'élément (ou de 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 angulaire à l'intérieur de notre application, tel que des services, des contrôleurs Ou tout autre objet.

3
zloctb

Vous pouvez ajouter un "débogueur" dans votre code et recharger l'application, ce qui place le point d'arrêt à cet endroit 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;
}
2
Rk R Bairi

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 allez à l'onglet source.

  2. ouvrez le fichier que vous voulez déboguer en utilisant Ctrl + P et cherchez le nom du fichier

  3. ajoutez 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 que vous pouvez consulter pour utiliser le plugin chrome Debug Angular Application utilisant le plugin "Debugger for chrome"

1
Dharmaraj Kavatagi

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

Tapez Debugger for 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 s'y associe.

  • 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, à l'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

Trouver plus ===>

1
Ze Rubeus

Peut-être pouvez-vous utiliser Angular Augury Une extension Google Chrome Dev Tools pour le débogage des applications Angular 2 et des versions précédentes.

0
aligokayduman

Comme les add-ons 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 ainsi vos données. Bien sûr, Chrome et Firefox ont de bien meilleurs outils de développement en général. En outre, le bon vieux console.log () a été super utile!

0
Sara Inés Calderón