Pracuję nad weryfikacją koncepcji przy użyciu Angular JavaScript.

Jak debugować kod Angular JavaScript w różnych przeglądarkach (Firefox i Chrome)?

1. Chrome

Do debugowania AngularJS w chrome możesz użyć AngularJS Batarang . (Z ostatnich recenzji wtyczki wynika, że ​​AngularJS Batarang nie jest już obsługiwany. Testowane w różnych wersjach Chrome nie działa)

Oto link do opisu i wersji demonstracyjnej:

Wprowadzenie do Angular JS Batarang

Pobierz wtyczkę chrome stąd: wtyczka chrome do debugowania AngularJS

Możesz również skierować ten link: ng-book: Debugging AngularJS

Możesz także użyć ng-inspect do debugowania angular.

2. Firefox

W przypadku Firefoksa z pomocą Firebuga możesz debugować kod.

Użyj również tych dodatków do przeglądarki Firefox : AngScope: Dodatki do przeglądarki Firefox (nie jest to oficjalne rozszerzenie zespołu AngularJS)

3. Debugowanie AngularJS : Sprawdź łącze: Debugowanie AngularJS

IMHO, najbardziej frustrujące doświadczenie pochodzi z uzyskania / ustawienia wartości określonego zakresu związanego z elementem wizualnym. Zrobiłem wiele punktów przerwania nie tylko we własnym kodzie, ale także w samym angular.js, ale czasami nie jest to po prostu najbardziej efektywny sposób. Chociaż poniższe metody są bardzo potężne, zdecydowanie uważa się je za złą praktykę, jeśli faktycznie używasz ich w kodzie produkcyjnym, więc używaj ich mądrze!

Uzyskaj odwołanie w konsoli z elementu wizualnego

W wielu przeglądarkach innych niż IE można wybrać element, klikając element prawym przyciskiem myszy i klikając opcję „Sprawdź element”. Alternatywnie możesz na przykład kliknąć dowolny element na karcie Elementy w przeglądarce Chrome. Ostatnio wybrany element zostanie zapisany w zmiennej $0w konsoli.

Uzyskaj zakres połączony z elementem

W zależności od tego, czy istnieje dyrektywa, która tworzy zakres izolowany, możesz pobrać zakres za pomocą angular.element($0).scope()lub angular.element($0).isolateScope()(użyj, $($0).scope()jeśli opcja $ jest włączona). Dokładnie to otrzymujesz, korzystając z najnowszej wersji Batarangu. Jeśli zmieniasz wartość bezpośrednio, pamiętaj, scope.$digest()aby odzwierciedlić zmiany w interfejsie użytkownika.

$ eval jest zły

Niekoniecznie do debugowania. scope.$eval(expression)jest bardzo przydatne, gdy chcesz szybko sprawdzić, czy wyrażenie ma oczekiwaną wartość.

Brakujące prototypowe elementy zakresu

Różnica między scope.blai scope.$eval('bla')jest pierwszym nie uwzględnia prototypowo dziedziczonych wartości. Użyj poniższego fragmentu, aby uzyskać cały obraz (nie możesz bezpośrednio zmienić wartości, ale i tak możesz użyć $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))
    }
};

Użyj go z scopeEval($($0).scope()).

Gdzie jest mój kontroler?

Czasami możesz chcieć monitorować wartości w ngModelpodczas pisania dyrektywy. Zastosowanie $($0).controller('ngModel')i dostaniesz sprawdzić $formatters, $parsers, $modelValue, $viewValue $renderi wszystko.

jest też $ log, którego możesz użyć! wykorzystuje konsolę w sposób, w jaki chcesz, aby działała!

pokazując błąd / ostrzeżenie / informacje w sposób, w jaki twoja konsola pokazuje ci normalnie!

użyj tego> Dokumentu

Pomimo odpowiedzi na pytanie, może być interesujące przyjrzenie się ng-inspector

Spróbuj ng-inspector. Pobierz dodatek do przeglądarki Firefox ze strony http://ng-inspector.org/ . Nie jest dostępne w menu dodatku Firefoksa.

http://ng-inspector.org/ - strona internetowa

http://ng-inspector.org/ng-inspector.xpi - dodatek do przeglądarki Firefox

Niestety większość dodatków i rozszerzeń przeglądarki po prostu pokazuje wartości, ale nie pozwalają one na edycję zmiennych zakresu lub uruchamianie funkcji kątowych. Jeśli chcesz zmienić zmienne $ scope w konsoli przeglądarki (we wszystkich przeglądarkach), możesz użyć jquery. Jeśli załadujesz jQuery przed AngularJS, angular.element może zostać przekazany do selektora jQuery. Możesz więc sprawdzić zakres kontrolera za pomocą

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

Przykład: Musisz zmienić wartość zmiennej $ scope i zobaczyć wynik w przeglądarce, a następnie po prostu wpisać w konsoli przeglądarki:

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

Możesz natychmiast zobaczyć zmiany w swojej przeglądarce. Powodem, dla którego użyliśmy $ apply () jest: każda zmienna zakresu zaktualizowana spoza kontekstu kątowego nie zaktualizuje jej powiązania, musisz uruchomić cykl podsumowania po zaktualizowaniu wartości zakresu za pomocą scope.$apply().

Aby obserwować wartość zmiennej $ scope, wystarczy wywołać tę zmienną.

Przykład: Chcesz zobaczyć wartość $ scope.var1 w konsoli internetowej w przeglądarce Chrome lub Firefox, po prostu wpisz:

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

Wynik zostanie natychmiast wyświetlony w konsoli.

Dodaj połączenie do debuggermiejsca, w którym zamierzasz go użyć.

someFunction(){
  debugger;
}

Na consolekarcie narzędzi programistycznych przeglądarki internetowej problemangular.reloadWithDebugInfo();

Odwiedź lub ponownie załaduj stronę, którą chcesz debugować, i zobacz, jak debugger pojawi się w przeglądarce.

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

scope () Możemy pobrać $ scope z elementu (lub jego rodzica) używając metody scope () na elemencie:

var scope = ele.scope();

wtryskiwacz()

var injector = ele.injector();

Za pomocą tego wtryskiwacza możemy następnie utworzyć wystąpienie dowolnego obiektu Angular w naszej aplikacji, takiego jak usługi, inne kontrolery lub dowolny inny obiekt

Możesz dodać `` debugger '' do swojego kodu i ponownie załadować aplikację, co spowoduje umieszczenie tam punktu przerwania i możesz `` przejść przez '' lub uruchomić.

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

Możesz debugować za pomocą przeglądarek wbudowanych w narzędzia programistyczne.

1. otwórz narzędzia programistyczne w przeglądarce i przejdź do zakładki źródła.

2. otwórz plik, który chcesz debugować, używając Ctrl + P i wyszukaj nazwę pliku

3. dodaj punkt przerwania w linii, klikając po lewej stronie kodu.

4. Odśwież stronę.

Dostępnych jest wiele wtyczek do debugowania, z których możesz skorzystać przy użyciu wtyczki do Chrome Debuguj aplikację kątową za pomocą wtyczki „Debugger for chrome”

W przypadku programu Visual Studio Code (nie Visual Studio) Ctrl+ Shift+P

Wpisz Debugger for Chrome w pasku wyszukiwania, zainstaluj go i włącz.

W swoim launch.jsonpliku dodaj tę konfigurację:

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

Aby rozszerzenie mogło się do niego dołączyć, musisz uruchomić Chrome z włączonym zdalnym debugowaniem.

• Windows

Kliknij prawym przyciskiem myszy skrót Chrome i wybierz właściwości. W polu „target” dodaj --remote-debugging-port = 9222 Lub w wierszu polecenia wykonaj /chrome.exe --remote-debugging-port = 9222

• OS X

W terminalu wykonaj / Applications / Google \ Chrome.app/Contents/MacOS/Google \ Chrome --remote-debugging-port = 9222

• Linux

W terminalu uruchom google-chrome --remote-debugging-port = 9222

Znajdź więcej ===>

Ponieważ dodatki już nie działają, najbardziej pomocnym zestawem narzędzi, jakie znalazłem, jest użycie Visual Studio / IE, ponieważ możesz ustawić punkty przerwania w swoim JS i w ten sposób sprawdzić swoje dane. Oczywiście Chrome i Firefox mają ogólnie znacznie lepsze narzędzia programistyczne. Poza tym stary dobry console.log () był bardzo pomocny!

Może możesz użyć rozszerzenia Angular Augury A Google Chrome Dev Tools do debugowania aplikacji Angular 2 i nowszych.