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

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

1. Хром

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

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

Введение в Angular JS Batarang

Загрузите плагин Chrome отсюда: плагин Chrome для отладки AngularJS

Вы также можете обратиться по этой ссылке: ng-book: Debugging AngularJS

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

2. Firefox

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

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

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

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

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

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

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

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

$ eval - это зло

Не обязательно для отладки. 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и все.

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

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

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

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

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

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

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

К сожалению, большинство надстроек и расширений браузера просто показывают вам значения, но не позволяют редактировать переменные области видимости или запускать функции 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;

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

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

someFunction(){
  debugger;
}

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

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

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

scope () Мы можем получить $ scope из элемента (или его родителя), используя метод scope () для элемента:

var scope = ele.scope();

инжектор ()

var injector = ele.injector();

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

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

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

Вы можете отлаживать браузеры, встроенные в инструменты разработчика.

1. откройте инструменты разработчика в браузере и перейдите на вкладку исходного кода.

2. откройте файл, который вы хотите отладить, используя Ctrl + P и найдите имя файла

3. добавить точку останова в строке, нажав на левую часть кода.

4. обновите страницу.

Существует множество плагинов для отладки, которые вы можете использовать для использования плагина Chrome. Отладка приложения Angular с использованием плагина «Отладчик для Chrome»

Для кода Visual Studio (не Visual Studio): Ctrl+ Shift+P

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

В свой launch.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

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

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

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