Em muitos navegadores não-IE, poderá seleccionar um elemento se carregar com o botão direito num elemento e carregar em "inspeccionar o elemento". Alternativamente, você também pode clicar em qualquer elemento na página elementos no Chrome, por exemplo. O último elemento seleccionado será armazenado na variável $0 na consola.

Obter um âmbito ligado a um elemento

Dependendo da existência de uma directiva que crie um âmbito isolado, poderá obter o âmbito por angular.element($0).scope() ou angular.element($0).isolateScope() (use $($0).scope() Se $ for habilitado). Isto é exatamente o que você recebe quando você está usando a versão mais recente de Batarang. Se estiver a alterar o valor directamente, lembre-se de usar scope.$digest() para reflectir as alterações na IU.

Não necessariamente para depuração. scope.$eval(expression) é muito útil quando você quer verificar rapidamente se uma expressão tem o valor esperado.

Os protótipos em falta no âmbito de aplicação

A diferença entre scope.bla e scope.$eval('bla') é que o primeiro não considera o valores herdados prototipicamente. Use o excerto abaixo para obter toda a imagem (não pode alterar directamente o valor, mas pode usar $eval de qualquer forma!)

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))
    }
};

Usa-o com scopeEval($($0).scope()).

Às vezes você pode querer monitorar os valores em ngModel Quando você está escrevendo uma diretiva. Use $($0).controller('ngModel') e poderá verificar o $formatters, $parsers, $modelValue, $viewValue $render e tudo.

Também há $ log que você pode usar! ele faz uso do seu console de uma forma que você quer que ele funcione!

Mostrar o erro/aviso / informação da forma como a sua consola o mostra normalmente!

Utilize este > Documento

Http://ng-inspector.org / - sítio web

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

Infelizmente, a maioria das extensões add-ons e browser estão apenas a mostrar os valores para si, mas não lhe permitem editar variáveis de âmbito ou executar funções angulares. Se quiser alterar as variáveis $ scope na consola do navegador (em todos os navegadores), então poderá usar o jquery. Se carregares o jQuery antes do AngularJS, angular.elemento pode ser passado um selector jQuery. Então você poderia inspecionar o escopo de um controlador com

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

Exemplo: Você precisa mudar o valor da variável $ scope e veja o resultado no navegador, em seguida, basta digitar na consola do navegador:

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

Você pode ver as alterações no seu navegador imediatamente. A razão pela qual usámos o $apply() é: qualquer variável de âmbito actualizada a partir de um contexto angular exterior não a actualiza, pelo que terá de executar o ciclo do digest depois de actualizar os valores de âmbito usando o scope.$apply() .

Para observar um valor variável $ scope, você só precisa chamar essa variável.

Exemplo: Queres ver o valor de $scope.var1 na web consola em Chrome ou Firefox do tipo:

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

O resultado será mostrado na consola imediatamente.

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

Âmbito de aplicação() Nós podemos obter o escopo $do elemento (ou seu pai) usando o método scope() no elemento:

var scope = ele.scope();

Injector()

var injector = ele.injector();

Adicione uma chamada a debugger onde pretende usá-la.

someFunction(){
  debugger;
}

Na página console das ferramentas de desenvolvimento web do seu navegador, a edição angular.reloadWithDebugInfo();

Visitar ou recarregar a página que pretende depurar e ver o depurador aparecer no seu navegador.

Você pode adicionar 'depurador' no seu código e recarregar a aplicação, que coloca o ponto de paragem ali e você pode 'pisar' , ou executar.

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

Para o código Visual Studio (não Visual Studio) do Ctrl+Shift+P

Escreva o depurador para o Chrome na barra de pesquisa, instale-o e Active-o.

No seu ficheiro launch.json Adicione esta configuração:

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

Você deve lançar o Chrome com a depuração remota activada para que a extensão se ligue a ele.

• janelas

Carregue com o botão direito no atalho Chrome e seleccione as propriedades No campo" Alvo", adicionar --remote-debugging-port=9222 Ou numa linha de comandos, execute / chrome.exe --remote-debugging-port=9222

• OS X

Num terminal, execute / Applications / Google\ Chrome.app/Contents/MacOS / Google\ Chrome --remote-debugging-port=9222

• Linux

Num terminal, lançar o google-chrome --remote-debugging-port=9222

Encontrar Mais ===>

Uma vez que os add-ons já não funcionam, o conjunto de ferramentas mais úteis que encontrei é a utilização do Visual Studio/IE, porque você pode definir pontos de paragem nos seus JS e inspeccionar os seus dados dessa forma. Claro que o Chrome e o Firefox têm ferramentas dev muito melhores em geral. E também, a velha consola.log() tem sido super útil!

Talvez você possa usar um augúrio Angular uma extensão do Google Chrome Dev Tools para depurar as aplicações angulares 2 e acima.

Você pode depurar usando navegadores construídos em ferramentas de desenvolvimento.

1. Abrir as ferramentas de desenvolvimento no navegador e ir para a página de código.

2. Abre o ficheiro se deseja depurar com o Ctrl+P e procurar o nome do ficheiro

3. Adicionar um ponto de paragem numa linha se carregar com o botão esquerdo do Código.

4. Refresque a página.

Existem muitos 'plugins' disponíveis para depuração que poderá referir por usar o 'plugin' chrome para depurar a aplicação Angular usar o plugin "depurador para o cromo"