Как отлаживать Angular код JavaScript

Я работаю над доказательством концепции, используя Angular JavaScript.

Как отладить Angular код JavaScript в разных браузерах (Firefox и Chrome)?

Ответ 1

1. Chrome

Для Debug AngularJS в хром вы можете использовать AngularJS Batarang. (Из недавних обзоров на плагине кажется, что AngularJS Batarang больше не поддерживается. Протестировано в разных версиях хром не работает)

Вот ссылка для описания и демонстрации:

Введение Angular JS Batarang

Загрузите chrome plugin отсюда: chrome plugin для отладки AngularJS

Вы также можете сослаться на эту ссылку: ng-book: Отладка AngularJS

Вы также можете использовать ng-inspect для отладки angular.

2. Firefox

Для Firefox с помощью Firebug вы можете отлаживать код.

Также используйте надстройки Firefox: AngScope: надстройки для Firefox (не официальное расширение командой AngularJS)

3. Отладка AngularJS: проверьте ссылку: Отладка AngularJS

Ответ 2

IMHO, самый неприятный опыт связан с получением/установкой значения определенной области, связанной с визуальным элементом. Я сделал много точек останова не только в своем собственном коде, но также и в angular.js, но иногда это просто не самый эффективный способ. Хотя приведенные ниже методы очень эффективны, они, безусловно, считаются плохой практикой, если вы действительно используете в производственном коде, поэтому используйте их с умом!

Получить ссылку в консоли из визуального элемента

Во многих браузерах, отличных от IE, вы можете выбрать элемент, щелкнув правой кнопкой мыши элемент и нажав "Осмотреть элемент". Кроме того, вы также можете щелкнуть любой элемент на вкладке Элементы в Chrome, например. Последний выбранный элемент будет храниться в переменной $0 в консоли.

Получить область, связанную с элементом

В зависимости от того, существует ли директива, которая создает область изоляции, вы можете получить область видимости с помощью angular.element($0).scope() или angular.element($0).isolateScope() (используйте $($0).scope(), если включен параметр $). Это именно то, что вы получаете, когда используете последнюю версию Batarang. Если вы меняете значение напрямую, не забудьте использовать scope.$digest(), чтобы отразить изменения в пользовательском интерфейсе.

$eval is evil

Не обязательно для отладки. scope.$eval(expression) очень удобно, если вы хотите быстро проверить, имеет ли выражение ожидаемое значение.

Отсутствующие элементы прототипа области видимости

Разница между scope.bla и scope.$eval('bla') заключается в том, что первая не учитывает прототипно унаследованные значения. Используйте сниппет ниже, чтобы получить всю картину (вы не можете напрямую изменить значение, но вы можете использовать $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))
    }
};

Используйте его с scopeEval($($0).scope()).

Где мой контроллер?

Иногда вы можете отслеживать значения в ngModel при написании директивы. Используйте $($0).controller('ngModel'), и вы сможете проверить $formatters, $parsers, $modelValue, $viewValue $render и все.

Ответ 3

существует также $log, который вы можете использовать! он использует вашу консоль так, чтобы вы ее работали!

показывает сообщение об ошибке/предупреждении/информацию о том, как обычно показывает ваша консоль!

используйте это > Документ

Ответ 4

Несмотря на ответ на вопрос, было бы интересно взглянуть на ng-inspector

Ответ 5

Попробуйте ng-inspector. Загрузите надстройку для Firefox с веб-сайта http://ng-inspector.org/. Он недоступен в меню добавления Firefox.

http://ng-inspector.org/ - веб-сайт

http://ng-inspector.org/ng-inspector.xpi - надстройка Firefox

Ответ 6

К сожалению, большинство надстроек и расширений браузера просто показывают вам значения, но они не позволяют вам редактировать переменные области или запускать функции angular. Если вы хотите изменить переменные $scope в консоли браузера (во всех браузерах), вы можете использовать jquery. Если вы загружаете jQuery перед AngularJS, angular.element может быть передан селектор jQuery. Таким образом, вы можете проверить область действия контроллера с помощью

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

Пример: Вам нужно изменить значение переменной $scope и увидеть результат в браузере, а затем просто ввести консоль браузера:

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

Вы можете сразу увидеть изменения в своем браузере. Причина, по которой мы использовали $apply(), - это: любая переменная области, обновленная извне angular контекста, не обновит привязку, вам нужно запустить цикл дайджест после обновления значений области с помощью scope.$apply().

Для наблюдения значения переменной $scope вам просто нужно вызвать эту переменную.

Пример: Вы хотите увидеть значение $scope.var1 в веб-консоли в Chrome или Firefox, просто введите:

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

Результат будет немедленно показан на консоли.

Ответ 7

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

Объем() Мы можем получить $scope из элемента (или его родителя) с помощью метода scope() на Элемент:

var scope = ele.scope();

инжектор()

var injector = ele.injector();

С помощью этого инжектора мы можем затем создать экземпляр любого объекта Angular внутри нашего приложения, такого как службы, другие контроллеры или любой другой объект

Ответ 8

Добавьте вызов debugger, где вы собираетесь его использовать.

someFunction(){
  debugger;
}

На вкладке console инструментов веб-разработчика браузера введите angular.reloadWithDebugInfo();

Посетите или перезагрузите страницу, которую вы собираетесь отлаживать, и посмотрите, как отладчик отображается в вашем браузере.

Ответ 9

Вы можете добавить "отладчик" в свой код и перезагрузить приложение, которое помещает точку останова, и вы можете "перешагнуть" или запустить.

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

Ответ 10

Для кода Visual Studio (не Visual Studio) выполните Ctrl + Shift + P

введите Debugger для Chrome в строке поиска, установите его и включите.

в файле Lanche.json добавьте эту конфигурацию:

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

Вы должны запустить Chrome с удаленной отладкой, чтобы расширение было прикреплено к нему.

для Windows

Щелкните правой кнопкой мыши ярлык Chrome и выберите свойства В поле "target" добавьте -remote-debugging-port = 9222 Или в командной строке выполните /chrome.exe --remote-debugging-port = 9222

OS X

В терминале выполните /Applications/Google \Chrome.app/Contents/MacOS/Google\Chrome -remote-debugging-port = 9222

Linux

В терминале запустите google-chrome -remote-debugging-port = 9222

Найти больше === >

Ответ 11

Поскольку надстройки больше не работают, самый полезный набор инструментов, которые я нашел, - это использование Visual Studio/IE, потому что вы можете установить контрольные точки в своем JS и проверить свои данные таким образом. Конечно, Chrome и Firefox имеют гораздо лучшие инструменты для разработчиков в целом. Кроме того, хороший ol 'console.log() был очень полезен!

Ответ 12

Возможно, вы можете использовать Angular Augury Расширение инструментальных средств Google Chrome Dev для отладки Angular 2 и выше приложений.