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

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

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

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

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

$eval-это зло

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

недостающие элементы прототипа scope

разницу между 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($().scope()).

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

var scope = ele.scope();

инжектор()

var injector = ele.injector();

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

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

someFunction(){
  debugger;
}

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

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

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

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

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

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

в своем добавить данный config :

{
    "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 и выберите свойства В поле" цель " добавьте --remote-debugging-port=9222 Или в командной строке Выполнить /хром.exe --remote-debugging-port=9222

• OS X

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

• Linux

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

Узнать Больше === >

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

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

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

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

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

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

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

есть много плагинов, доступных для отладки вы можете обратиться для использования плагина Chrome отладка углового приложения с помощью плагина "Debugger for chrome"