2014-10-20 7 views
8

Ich entwickle eine Webapp in Angular und ich benutze Firefox mit Firebug zum Debuggen.Angular Stacktrace in Firefox mit Firebug

Immer wenn ein Fehler in meinem Angular auftritt, kann der StackTrace nicht richtig angezeigt werden. Stattdessen zeigt es so etwas wie dies in der console.log:

enter image description here

In Chrome, erhalte ich eine schöne Stacktrace mit einem klickbaren Link auf die Fehlerdefinition:

enter image description here

Bin ich gezwungen um zu Chrome zu wechseln, um in Angular zu entwickeln, oder gibt es eine Lösung dafür?

+0

erhalten Sie HTML-Link, weil Sie eine Version von angular js – harishr

+0

verwenden Ich bin okay mit einem Link, mein Problem ist, wie es in Firefox formatiert ist. – wvdz

Antwort

1

Sie möchten für eine bessere Stapelverfolgung zu den Chrome-Entwicklertools wechseln. Es kann jedoch ein Plugin/eine Erweiterung für Firefox geben, die Dinge für Sie aufräumt, also stellen Sie sicher, dass Sie ein wenig nachforschen, bevor Sie eine Entscheidung treffen.

Aber beim Vergleich von Vanille mit Vanille ist Chrom genau das, was Sie wollen.

+0

Ich kann keine Plugins dafür finden. Ich habe AngScope ausprobiert, aber das hilft nur bei der Überprüfung des eckigen Bereichs $ im DOM. – wvdz

+0

Das ist das gleiche wie Chrome Batarang. Ich habe auch einige Zeit damit verbracht, mich umzusehen, und es scheint, dass Chrome ein besser entwickeltes Werkzeug zur Überprüfung und Verfolgung des Stapels hat. Meistens sind die Unterschiede vernachlässigbar, aber wenn Sie Angular-Apps entwickeln, scheint Chrome Ihnen das Leben leichter zu machen. –

4

Versuchen Sie, die verkleinerte Version von Angular durch die nicht verkleinerte Version zu ersetzen.
Wenn es sich um ein Injektionsproblem handelt, haben Sie mehr aussagekräftiges Feedback in der Konsole.
Als allgemeine Antwort, die besten Werkzeuge zum Debuggen Winkel sind AngularJS Batarang und ng-inspector und ja, sie sind Chrome-Erweiterungen.

+1

Sieht aus wie das einzige, was getan werden kann, ist in der Tat mit der nicht-verkleinerten Version von eckigen, kurz vor der Entwicklung eines Firefox-Plugin selbst. – wvdz

1

Sie können die gleiche anklickbare Funktion zur Fehlerlinkdefinition in Firebug erhalten, wenn Sie angular.js in Ihre Webanwendung einschließen. Firebug kann Zeilennummern (in denen ein Teilfehler aufgetreten ist) für Ihre Angular-Anwendung anzeigen.

3

Es ist ein einzigartiges Add-on für Firefox AngScope genannt, die nicht offiziell ist, scheint aber sehr hilfreich zu sein, wenn Angularjs in firefox debuggen. Wenn Sie nicht zu Chrome wechseln möchten, sollten Sie es versuchen.

3

Anstatt angular.min.js durch angular.js zu ersetzen, können Sie beide Dateien zusammen mit angular.min.js.map zur Verfügung stellen. Firefox erkennt die Quellkartendatei und zieht die bessere Fehlermeldung und den Stack-Trace von der nicht-minimierten Quelle.