Ich arbeite an einem Proof of Concept mit Angular JavaScript.

Wie debugge ich den Angular JavaScript-Code in verschiedenen Browsern (Firefox und Chrome)?

1. Chrome

Für Debug AngularJS in Chrome können Sie AngularJS Batarang verwenden . (Aus den letzten Bewertungen des Plugins geht hervor, dass AngularJS Batarang nicht mehr gewartet wird. Getestet in verschiedenen Versionen von Chrome funktioniert nicht)

Hier ist der Link für Beschreibung und Demo:

Einführung von Angular JS Batarang

Laden Sie das Chrome-Plugin hier herunter: Chrome-Plugin für das Debuggen von AngularJS

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

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

2. Firefox

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

Verwenden Sie auch diese Firefox-Add-Ons: AngScope: Add-Ons für Firefox (keine offizielle Erweiterung durch das AngularJS-Team)

3. Debuggen von AngularJS : Überprüfen Sie den Link: Debuggen von AngularJS

IMHO, die frustrierendste Erfahrung kommt vom 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 gesetzt, aber manchmal ist es einfach nicht der effektivste Weg. Obwohl die folgenden Methoden sehr leistungsfähig sind, werden sie definitiv als schlechte Praxis angesehen, wenn Sie sie tatsächlich im Produktionscode verwenden. Verwenden Sie sie also mit Bedacht!

Holen Sie sich eine Referenz in der Konsole von einem visuellen Element

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 überprüfen" klicken. Alternativ können Sie beispielsweise auch in Chrome auf ein beliebiges Element auf der Registerkarte "Elemente" klicken. Das zuletzt ausgewählte Element wird in einer Variablen $0in der Konsole gespeichert .

Holen Sie sich einen Bereich, der mit einem Element verknüpft ist

Abhängig davon, ob eine Direktive vorhanden ist, die einen isolierten Bereich erstellt, können Sie den Bereich mit angular.element($0).scope()oder abrufen angular.element($0).isolateScope()(verwenden, $($0).scope()wenn $ aktiviert ist). Genau das erhalten Sie, wenn Sie die neueste Version von Batarang verwenden. Wenn Sie den Wert direkt ändern, denken Sie daran, scope.$digest()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 Prototyp-Mitglieder des Geltungsbereichs

Der Unterschied zwischen scope.blaund scope.$eval('bla')ist der erstere berücksichtigt nicht die prototypisch vererbten Werte. Verwenden Sie das folgende Snippet, um das gesamte Bild zu erhalten (Sie können den Wert nicht direkt ändern, aber Sie können ihn $evaltrotzdem 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 möglicherweise die Werte überwachen, ngModelwenn Sie eine Direktive schreiben. Verwenden Sie $($0).controller('ngModel')und Sie werden das erhalten zu überprüfen $formatters, $parsers, $modelValue, $viewValue $renderund alles.

Es gibt auch $ log, das Sie verwenden können! Es nutzt Ihre Konsole so, dass Sie möchten, dass sie funktioniert!

Zeigen Sie den Fehler / die Warnung / die Informationen so an, wie Ihre Konsole Sie normalerweise anzeigt!

Verwenden Sie dieses> Dokument

Obwohl die Frage beantwortet ist, könnte es interessant sein, einen Blick auf ng-inspector zu werfen

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

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

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

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

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

Beispiel: Sie müssen den Wert der Variablen $ scope ändern und das Ergebnis im Browser anzeigen. Geben Sie dann einfach 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 Bereichsvariable, die von außerhalb des Winkelkontexts aktualisiert wurde, aktualisiert ihre Bindung nicht. Sie müssen den Digest-Zyklus ausführen, nachdem Sie die Werte des Bereichs mit aktualisiert haben scope.$apply().

Um einen $ scope-Variablenwert 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 sehen. Geben Sie einfach Folgendes ein:

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

Das Ergebnis wird sofort in der Konsole angezeigt.

Fügen Sie einen Anruf an der Stelle hinzu, debuggeran der Sie ihn verwenden möchten.

someFunction(){
  debugger;
}

consoleProblem auf der Registerkarte der Webentwickler-Tools Ihres Browsersangular.reloadWithDebugInfo();

Besuchen Sie die Seite, die Sie debuggen möchten, oder laden Sie sie neu, und der Debugger wird in Ihrem Browser angezeigt.

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

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

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. Dienste, andere Controller oder jedes andere Objekt

Sie können 'Debugger' in Ihren Code einfügen und die App neu laden, wodurch der Haltepunkt dort platziert wird, und Sie können 'übergehen' oder ausführen.

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

Sie können mit in Entwicklertools integrierten Browsern debuggen.

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

2. Öffnen Sie die Datei, die Sie debuggen möchten, mit Strg + P und suchen Sie den Dateinamen

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

4. Lade die Seite neu.

Es gibt viele Plugins zum Debuggen, auf die Sie für die Verwendung des Chrome-Plugins verweisen können. Debug Angular Application mit dem Plugin "Debugger for Chrome"

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

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

launch.jsonFügen Sie in Ihrer 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 eine Verbindung herstellen 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. Führen Sie an 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

Mehr finden ===>

Da die Add-Ons nicht mehr funktionieren, ist die Verwendung der hilfreichsten Tools, die ich gefunden habe, die Verwendung von Visual Studio / IE, da Sie Haltepunkte in Ihrem JS festlegen und Ihre Daten auf diese Weise überprüfen können. Natürlich haben Chrome und Firefox im Allgemeinen viel bessere Entwicklertools. Auch die gute alte console.log () war super hilfreich!

Möglicherweise können Sie Angular Augury verwenden. Eine Google Chrome Dev Tools-Erweiterung zum Debuggen von Angular 2-Anwendungen und höher.