it-swarm.com.de

Debuggen von Angular JavaScript Code

Ich arbeite an einem Proof of Concept mit Angular JavaScript.

Wie debuggen Sie den Angular-JavaScript-Code in verschiedenen Browsern (Firefox und Chrome)?

100
AskQuestion

1. Chrome

Für das Debugging von AngularJS in chrome können Sie AngularJS Batarang ..__ verwenden.

Hier ist der Link zur Beschreibung und Demo:

Einführung von Angular JS Batarang

Laden Sie das Chrome-Plugin hier herunter: Chrome-Plugin zum Debuggen von AngularJS

Sie können auch auf diesen Link verweisen: ng-book: Debugging von AngularJS

Sie können auch ng-inspect zum Winkel-Debuggen verwenden.

2. Firefox

Für Firefox können Sie den Code mit Hilfe von Firebug debuggen.

Verwenden Sie auch diese Firefox-Add-Ons: AngScope: Add-Ons für Firefox (Nicht offizielle Erweiterung von AngularJS Team)

3. AngularJS debuggen: Überprüfen Sie den Link: AngularJS debuggen

63
Vaibhav Jain

Meiner Meinung nach ist die frustrierendste Erfahrung das Erhalten/Festlegen eines Werts eines bestimmten Bereichs, der sich auf ein visuelles Element bezieht. Ich habe viele Haltepunkte nicht nur in meinem eigenen Code, sondern auch in angle.js selbst gemacht, aber manchmal ist es einfach nicht der effektivste Weg. Obwohl die folgenden Methoden sehr mächtig sind, werden sie definitiv als schlecht angesehen Praxis, wenn Sie tatsächlich in der Produktion Code verwenden, so verwenden Sie sie weise!

Rufen Sie einen Verweis in der Konsole von einem visuellen Element ab

In vielen Nicht-IE-Browsern können Sie ein Element auswählen, indem Sie mit der rechten Maustaste auf ein Element klicken und auf "Element prüfen" klicken. Alternativ können Sie beispielsweise auch in Chrome auf ein Element in der Registerkarte Elemente klicken. Das zuletzt ausgewählte Element wird in der Variablen $0 in der Konsole gespeichert. 

Rufen Sie einen mit einem Element verknüpften Bereich ab

Abhängig davon, ob es eine Direktive gibt, die einen isolierten Bereich erstellt, können Sie den Bereich über angular.element($0).scope() oder angular.element($0).isolateScope() abrufen (verwenden Sie $($0).scope(), wenn $ aktiviert ist). Das ist genau das, was Sie erhalten, wenn Sie die neueste Version von Batarang verwenden. Wenn Sie den Wert direkt ändern, denken Sie daran, scope.$digest() zu verwenden, um die Änderungen auf der Benutzeroberfläche wiederzugeben.

$ eval ist böse

Nicht unbedingt zum Debuggen. scope.$eval(expression) ist sehr praktisch, wenn Sie schnell überprüfen möchten, ob ein Ausdruck den erwarteten Wert hat.

Die fehlenden Prototypmitglieder des Geltungsbereichs

Der Unterschied zwischen scope.bla und scope.$eval('bla') besteht darin, dass erstere die prototypisch vererbten Werte nicht berücksichtigt. Verwenden Sie den folgenden Ausschnitt, um das gesamte Bild zu erhalten (Sie können den Wert nicht direkt ändern, Sie können jedoch $eval trotzdem verwenden!)

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

Verwenden Sie es mit scopeEval($($0).scope()).

Wo ist mein Controller?

Manchmal möchten Sie die Werte in ngModel überwachen, wenn Sie eine Direktive schreiben. Verwenden Sie $($0).controller('ngModel') und Sie können $formatters, $parsers, $modelValue, $viewValue$render und alles überprüfen.

28
Osbert Ngok

es gibt auch $ log, das Sie verwenden können! Es nutzt Ihre Konsole so, wie Sie es möchten!

zeigen Sie die Fehler/Warnungen/Informationen so an, wie es Ihnen Ihre Konsole normalerweise anzeigt.

verwenden Sie dieses> Dokument

13
Ali RAN

Trotz der beantworteten Frage könnte es interessant sein, einen Blick auf ng-inspector zu werfen. 

10
Iker Aguayo

Versuchen Sie es mit dem Inspektor. Laden Sie das Add-On für Firefox von der Website http://ng-inspector.org/ herunter. Es ist nicht im Firefox-Menü "Add-On" verfügbar.

http://ng-inspector.org/ - Website

http://ng-inspector.org/ng-inspector.xpi - Firefox-Add-on

7
Akash

Leider zeigen die meisten Add-Ons und Browser-Erweiterungen nur die Werte an, aber Sie können damit keine Bereichsvariablen bearbeiten oder angular Funktionen ausführen. Wenn Sie die $ Bereichsvariablen in ändern möchten In der Browserkonsole (in allen Browsern) können Sie dann jquery verwenden. Wenn Sie jQuery vor AngularJS laden, kann angle.element als jQuery-Selektor übergeben werden. So können Sie den Bereich eines Controllers mit überprüfen

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

Beispiel: Sie müssen den Wert der $ scope-Variablen ändern und das Ergebnis im Browser anzeigen. Geben Sie dann einfach Folgendes in die Browserkonsole ein:

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

Sie können die Änderungen sofort in Ihrem Browser sehen. Der Grund, warum wir $ apply () verwendet haben, ist: Jede von außerhalb aktualisierte Bereichsvariable angular Kontext aktualisiert sie nicht. Sie müssen den Digest-Zyklus ausführen, nachdem Sie die Werte des Bereichs mit scope.$apply().

Um einen Variablenwert von $ scope zu beobachten, müssen Sie nur diese Variable aufrufen.

Beispiel: Sie möchten den Wert von $ scope.var1 in der Webkonsole in Chrome oder Firefox, geben Sie einfach Folgendes ein:

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

Das Ergebnis wird sofort in der Konsole angezeigt.

7
Iman Sedighi

Fügen Sie an debugger einen Aufruf hinzu, an dem Sie ihn verwenden möchten.

someFunction(){
  debugger;
}

Geben Sie auf der Registerkarte console der Webentwicklertools Ihres Browsers die Funktion angular.reloadWithDebugInfo(); ein.

Rufen Sie die zu debuggende Seite auf oder laden Sie sie neu. Der Debugger wird in Ihrem Browser angezeigt.

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

scope () Wir können den $ scope vom Element (oder seinem übergeordneten Element) abrufen, indem Sie die scope () - Methode für das

var scope = ele.scope();

Injektor ()

var injector = ele.injector();

Mit diesem Injektor können wir dann jedes Angular-Objekt in unserer App instanziieren, z. B. Services, andere Controller oder ein beliebiges anderes Objekt

3
zloctb

Sie können "Debugger" in Ihren Code einfügen und die App erneut laden. Dadurch wird der Haltepunkt dort platziert und Sie können "springen" oder ausführen.

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

Sie können mit Browsern debuggen, die in Entwicklertools integriert sind.

  1. Öffnen Sie die Entwicklertools im Browser und wechseln Sie zur Registerkarte "Quelle".

  2. Öffnen Sie die Datei, die Sie mit Hilfe von Strg + P debuggen möchten, und suchen Sie nach dem Dateinamen

  3. fügen Sie einen Haltepunkt in einer Zeile ein, indem Sie auf die linke Seite des Codes klicken.

  4. lade die Seite neu.

Es gibt viele Plugins für das Debugging, die Sie für die Verwendung des Chrome-Plugins Debug Angular Application mit dem Plugin "Debugger für Chrome" verwenden können.

1

Für Visual Studio Code (nicht Visual Studio) tun Ctrl+Shift+P

Geben Sie Debugger for Chrome in die Suchleiste ein, installieren Sie es und aktivieren Sie es.

Fügen Sie in Ihrer launch.json-Datei diese Konfiguration hinzu:

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

Sie müssen Chrome mit aktiviertem Remote-Debugging starten, damit die Erweiterung daran angehängt werden kann.

  • Windows

Klicken Sie mit der rechten Maustaste auf die Chrome-Verknüpfung und wählen Sie Eigenschaften aus. Fügen Sie im Feld "Ziel" --remote-debugging-port = 9222 hinzu, oder führen Sie in einer Eingabeaufforderung /chrome.exe --remote-debugging-port = 9222 aus

  • OS X

Führen Sie in einem Terminal/Applications/Google\Chrome.app/Contents/MacOS/Google\Chrome --remote-debugging-port = 9222 aus

  • Linux

Starten Sie in einem Terminal google-chrome --remote-debugging-port = 9222

Weitere suchen ===>

1
Ze Rubeus

Möglicherweise können Sie Angular Augury Eine Erweiterung für Google Chrome Dev Tools zum Debuggen von Angular 2-Anwendungen verwenden.

0
aligokayduman

Da die Add-Ons nicht mehr funktionieren, ist die Verwendung von Visual Studio/IE das hilfreichste Werkzeug, das ich gefunden habe, da Sie in Ihrem JS Haltepunkte setzen und Ihre Daten auf diese Weise prüfen können. Natürlich haben Chrome und Firefox im Allgemeinen viel bessere Entwicklungswerkzeuge. Gute ol 'console.log () war auch sehr hilfreich!