Estou trabalhando em uma prova de conceito usando Angular JavaScript.

Como depurar o código Angular JavaScript em diferentes navegadores (Firefox e Chrome)?

1. Chrome

Para Debug AngularJS em cromo, você pode usar AngularJS Batarang . (A partir de análises recentes sobre o plug-in, parece que o AngularJS Batarang não está mais sendo mantido. Testado em várias versões do Chrome não funciona)

Aqui está o link para descrição e demonstração:

Introdução do Angular JS Batarang

Baixe o plugin do Chrome aqui: plugin do Chrome para depurar AngularJS

Você também pode consultar este link: ng-book: Debugging AngularJS

Você também pode usar o ng-inspect para depurar o angular.

2. Firefox

Para Firefox, com a ajuda do Firebug, você pode depurar o código.

Use também estes add-ons do Firefox : AngScope: add-ons para Firefox (extensão não oficial da equipe AngularJS)

3. Depurando AngularJS : verifique o link: Depurando AngularJS

IMHO, a experiência mais frustrante vem de obter / definir um valor de um escopo específico relacionado a um elemento visual. Fiz muitos pontos de interrupção não apenas em meu próprio código, mas também no próprio angular.js, mas às vezes simplesmente não é a maneira mais eficaz. Embora os métodos abaixo sejam muito poderosos, eles são definitivamente considerados uma prática ruim se você realmente os usa em código de produção, então use-os com sabedoria!

Obtenha uma referência no console a partir de um elemento visual

Em muitos navegadores não-IE, você pode selecionar um elemento clicando com o botão direito em um elemento e clicando em "Inspecionar Elemento". Alternativamente, você também pode clicar em qualquer elemento na guia Elementos no Chrome, por exemplo. O último elemento selecionado será armazenado na variável $0no console.

Obtenha um escopo vinculado a um elemento

Dependendo se existe uma diretiva que cria um escopo isolado, você pode recuperar o escopo por angular.element($0).scope()ou angular.element($0).isolateScope()(use $($0).scope()se $ estiver habilitado). Isso é exatamente o que você obtém ao usar a versão mais recente do Batarang. Se você estiver alterando o valor diretamente, lembre-se de usar scope.$digest()para refletir as alterações na IU.

$ eval é mau

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

Os membros do protótipo ausentes do escopo

A diferença entre scope.blae scope.$eval('bla')é o primeiro não considera os valores herdados prototipicamente. Use o snippet abaixo para obter a imagem completa (você não pode alterar diretamente o valor, mas pode usar de $evalqualquer maneira!)

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

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

Onde está meu controlador?

Às vezes, você pode querer monitorar os valores ngModelao escrever uma diretiva. Use $($0).controller('ngModel')e você vai começar a verificar o $formatters, $parsers, $modelValue, $viewValue $rendere tudo mais.

também há $ log que você pode usar! ele usa seu console da maneira que você deseja que funcione!

mostrando o erro / aviso / informação da maneira que seu console mostra normalmente!

use este> Documento

Apesar da pergunta ser respondida, pode ser interessante dar uma olhada no ng-inspector

Experimente o ng-inspector. Baixe o add-on para Firefox no site http://ng-inspector.org/ . Não está disponível no menu add-on do Firefox.

http://ng-inspector.org/ - website

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

Infelizmente, a maioria dos add-ons e extensões de navegador estão apenas mostrando os valores para você, mas eles não permitem que você edite variáveis ​​de escopo ou execute funções angulares. Se você quiser mudar as variáveis ​​$ scope no console do navegador (em todos os navegadores), você pode usar jquery. Se você carregar o jQuery antes do AngularJS, angular.element pode receber um seletor do jQuery. Então você pode inspecionar o escopo de um controlador com

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

Exemplo: você precisa alterar o valor da variável $ scope e ver o resultado no navegador, em seguida, basta digitar no console do navegador:

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

Você pode ver as mudanças em seu navegador imediatamente. O motivo pelo qual usamos $ apply () é: qualquer variável de escopo atualizada a partir do contexto angular externo não atualizará sua vinculação. Você precisa executar o ciclo digest após atualizar os valores de escopo usando scope.$apply().

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

Exemplo: você deseja ver o valor de $ scope.var1 no console da web no Chrome ou Firefox, basta digitar:

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

O resultado será mostrado no console imediatamente.

Adicione a chamada para debuggeronde você pretende usá-la.

someFunction(){
  debugger;
}

Na consoleguia das ferramentas de desenvolvedor da web do seu navegador, emitaangular.reloadWithDebugInfo();

Visite ou recarregue a página que você pretende depurar e veja o depurador aparecer em seu navegador.

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

scope () Podemos buscar o $ scope do elemento (ou de seu pai) usando o método scope () no elemento:

var scope = ele.scope();

injetor ()

var injector = ele.injector();

Com este injetor, podemos instanciar qualquer objeto Angular dentro de nosso aplicativo, como serviços, outros controladores ou qualquer outro objeto

Você pode adicionar 'depurador' em seu código e recarregar o aplicativo, o que coloca o ponto de interrupção lá e você pode 'passar por cima' ou executar.

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

Você pode depurar usando navegadores integrados às ferramentas de desenvolvedor.

1. abra as ferramentas do desenvolvedor no navegador e vá para a guia de código-fonte.

2. abra o arquivo que deseja depurar usando Ctrl + P e pesquise o nome do arquivo

3. adicione o ponto de interrupção em uma linha clicando no lado esquerdo do código.

4. recarregue a página.

Existem muitos plug-ins disponíveis para depuração que você pode consultar usando o plug-in do cromo Depurar o aplicativo angular usando o plug-in "Depurador para cromo"

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

Digite Debugger for Chrome na barra de pesquisa, instale-o e ative-o.

Em seu launch.jsonarquivo, 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 iniciar o Chrome com a depuração remota ativada para que a extensão seja anexada a ele.

• janelas

Clique com o botão direito do mouse no atalho do Chrome e selecione propriedades No campo "target", acrescente --remote-debugging-port = 9222 Ou em um prompt de comando, execute /chrome.exe --remote-debugging-port = 9222

• OS X

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

• Linux

Em um terminal, inicie google-chrome --remote-debugging-port = 9222

Encontre mais ===>

Como os add-ons não funcionam mais, o conjunto de ferramentas mais útil que encontrei é o uso do Visual Studio / IE, porque você pode definir pontos de interrupção em seu JS e inspecionar seus dados dessa maneira. É claro que o Chrome e o Firefox têm ferramentas de desenvolvimento muito melhores em geral. Além disso, o bom e velho console.log () foi muito útil!

Talvez você possa usar Angular Augury Uma extensão do Google Chrome Dev Tools para depurar aplicativos Angular 2 e superiores.