javascript - ver - modo debug chrome




Como encontrar o código que é executado por um botão/elemento no Chrome usando as Ferramentas do desenvolvedor (4)

Solução 1: blackboxing de estrutura

Funciona muito bem, apenas um pouco de configuração, mas não de terceiros.

Edit : Desde que escrevi esta solução, o Chrome (e outros navegadores também, tenho certeza) facilitou os scripts do blackbox.

De acordo com a documentação do Chrome :

O que acontece quando você blackbox um script?

Exceções lançadas do código da biblioteca não serão pausadas (se Pausar em exceções estiver ativado), Avançar / ignorar / ultrapassar o código da biblioteca, Pontos de interrupção do listener de eventos não quebram no código da biblioteca, O depurador não pausará em nenhum ponto de interrupção definido na biblioteca código. O resultado final é que você está depurando seu código de aplicativo em vez de recursos de terceiros.

Aqui está o fluxo de trabalho atualizado:

  1. Abra as Ferramentas do desenvolvedor do Google Chrome abertas ( F12 ou + + i ) e vá para as configurações (direita superior ou F1 ). Encontre uma aba à esquerda chamada " Blackboxing "

  1. E é aqui que você coloca o padrão RegEx dos arquivos que deseja evitar passar. Por exemplo: jquery\..*\.js (tradução humana : jquery.*.js )
  2. Se você quiser pular arquivos com múltiplos padrões, você pode adicioná-los usando o caractere pipe como: jquery\..*\.js|include\.postload\.js . Ou continue adicionando-as com o botão "Adicionar".
  3. Agora, aplique a solução 3 descrita abaixo.

Dica de bônus : eu uso o Regex101 (mas há muitos outros) para testar rapidamente meus padrões de regex enferrujados e descobrir onde estou errado com o depurador passo a passo do regex.

Você também pode usar o menu de contexto ao trabalhar no painel Origens. Ao visualizar um arquivo, você pode clicar com o botão direito do mouse no editor. E você pode clicar com o botão direito do mouse em um arquivo no navegador de arquivos. De lá, escolha o Blackbox Script. Isso adicionará o arquivo à lista no painel Configurações:

Solução 2: evento visual

É uma boa ferramenta para ter .

Solução 3: passando pelo código

Este tipo de doloroso, mas fácil (o blackboxing será muito bom aqui).

  1. Abrindo a guia Dev Tools -> Sources, e à direita localize Event Listener Breakpoints :

  2. Expanda o Mouse e clique em ... bem, click .

  3. Agora clique no elemento (a execução deve ser pausada) e aqui começa o jogo: apenas comece pressionando F11 (que é Step in ) para percorrer todo o código. Sente-se apertado, pode haver uma tonelada de saltos.

Solução 4: modo de sobrevivência

Eu sempre fico com + + F ou:

e pesquisando #envio ou qualquer que seja a tag / classe / id que você acha que inicia a festa, lendo todas as descobertas para tentar descobrir qual código poderia estar rodando , sentindo-se um perdedor e sentindo que tem que haver uma maneira segura de realmente saber o que é desencadeado pelo botão.

Mas esteja ciente de que às vezes não há apenas um img mas toneladas de divs sobrepostas, e você não pode nem saber o que aciona o código. Você provavelmente não deveria ter que usar esse método.

Estou usando o Chrome e meu próprio site.

O que eu sei de dentro:

1 ) Eu tenho um formulário onde as pessoas se inscrevem clicando neste botão de imagem laranja:

2 ) Eu inspeciono, e isso é tudo: <img class="formSend" src="images/botoninscribirse2.png">

3 ) Na parte superior do código-fonte, existem várias fontes de script. Claro, eu sei qual deles o botão chama, eu o codifiquei : <script src="js/jquery2.js" type="text/javascript"></script>

4 ) Dentro desse arquivo, você pode encontrar: $(".formSend").click(function() { ... }); que é o que é acionado pelo botão (para fazer uma validação de formulário bastante complexa e enviar) e o que eu quero é ser capaz de encontrar isso usando ferramentas de desenvolvimento do Chrome em qualquer site.

Como podemos descobrir para onde o elemento chama?

A guia "Ouvintes" não funcionou para mim

Então eu tentei procurar os ouvintes de eventos click, o que pareceu uma aposta segura para mim, mas ... não há jquery2.js lá (e eu realmente não sei qual arquivo o código é, então eu perderia tempo verificando tudo estes...):

Meu $(".formSend").click(function() { ... }); função dentro do arquivo jquery2.js não está lá.

Jesse explica por que na sua resposta :

"Finalmente, a razão pela qual sua função não está diretamente ligada ao manipulador de eventos click é porque jQuery retorna uma função que é ligada. A função do jQuery, por sua vez, passa por algumas camadas de abstração e verifica, e em algum lugar, executa sua função."

EDIT: eu coletei todos os métodos que esta questão surgiu em uma resposta abaixo como sugerido por alguns de vocês.


Essa solução precisa do método de dados do jQuery .

  1. Abra o console do Chrome (embora qualquer navegador com jQuery carregado funcione)
  2. Execute $._data($(".example").get(0), "events")
  3. Analise a saída para encontrar o manipulador de eventos desejado.
  4. Clique com o botão direito em "handler" e selecione "Show function definition"
  5. O código será mostrado na guia Origens

$._data() está apenas acessando o método de dados do jQuery. Uma alternativa mais legível poderia ser jQuery._data() .

Ponto interessante por esta resposta SO :

A partir do jQuery 1.8, os dados do evento não estão mais disponíveis na "API pública" para dados. Leia este post no blog da jQuery . Agora você deve usar isso:

jQuery._data( elem, "events" ); elem deve ser um elemento HTML, não um objeto jQuery ou um seletor.

Por favor, note que esta é uma estrutura interna, 'privada', e não deve ser modificada. Use isso apenas para fins de depuração.

Nas versões mais antigas do jQuery, você pode ter que usar o método antigo que é:

jQuery( elem ).data( "events" );

Uma versão agnóstica do jQuery seria: (jQuery._data || jQuery.data)(elem, 'events');


Você pode usar findHandlersJS

Você pode encontrar o manipulador no console do Chrome:

findEventHandlers("click", "img.envio")

Você receberá as seguintes informações impressas no console do chrome:

  • elemento
    O elemento real em que o manipulador de eventos foi registrado
  • eventos
    Array com informações sobre os manipuladores de eventos jquery para o tipo de evento em que estamos interessados ​​(por exemplo, clicar, alterar, etc)
  • manipulador
    Método de manipulador de eventos real que você pode ver clicando com o botão direito e selecionando Mostrar definição de função
  • seletor
    O seletor forneceu eventos delegados. Estará vazio para eventos diretos.
  • alvos
    Listar com os elementos que esse manipulador de eventos alveja. Por exemplo, para um manipulador de eventos delegados que está registrado no objeto do documento e segmenta todos os botões em uma página, essa propriedade listará todos os botões da página. Você pode passar o mouse e vê-los destacados no chrome.

Mais informações here e você pode tentar neste site de exemplo here .


A resposta de Alexander Pavlov chega o mais próximo do que você quer.

Devido à grande abrangência da abstração e funcionalidade do jQuery, muitos pulos têm que ser saltados para chegar à carne do evento. Eu configurei este jsFiddle para demonstrar o trabalho.

1. Configurando o ponto de interrupção do listener de eventos

Você estava perto disso.

  1. Abra o Chrome Dev Tools (F12) e vá para a guia Origens.
  2. Drill down to Mouse -> Clique

    (clique para zoom)

2. Clique no botão!

O Chrome Dev Tools pausará a execução do script e apresentará a você esse belo emaranhado de código minificado:

(clique para zoom)

3. Encontre o código glorioso!

Agora, o truque aqui é não se deixar levar pela tecla e ficar de olho na tela.

  1. Pressione a tecla F11 (Entrar) até aparecer o código fonte desejado
  2. Código-fonte finalmente alcançado
    • No exemplo jsFiddle fornecido acima, tive que pressionar F11 108 vezes antes de chegar ao manipulador / função de evento desejado
    • Sua milhagem pode variar, dependendo da versão do jQuery (ou biblioteca de framework) usada para ligar os eventos
    • Com dedicação e tempo suficientes, você pode encontrar qualquer manipulador / função de evento

4. Explicação

Eu não tenho a resposta exata, ou explicação do porquê jQuery passa pelas muitas camadas de abstrações que faz - tudo o que posso sugerir é que é por causa do trabalho que faz para abstrair seu uso do navegador executando o código. .

Aqui está um jsFiddle com uma versão de depuração do jQuery (ou seja, não minificada). Quando você olha o código no primeiro ponto de interrupção (não minificado), você pode ver que o código está lidando com muitas coisas:

    // ...snip...

    if ( !(eventHandle = elemData.handle) ) {
        eventHandle = elemData.handle = function( e ) {
            // Discard the second event of a jQuery.event.trigger() and
            // when an event is called after a page has unloaded
            return typeof jQuery !== strundefined && jQuery.event.triggered !== e.type ?
                jQuery.event.dispatch.apply( elem, arguments ) : undefined;
        };
    }

    // ...snip...

A razão que eu acho que você perdeu em sua tentativa quando a " execução faz uma pausa e eu salto linha por linha ", é porque você pode ter usado a função "Step Over", ao invés de Step In. Aqui está uma resposta do explicando as diferenças.

Finalmente, a razão pela qual sua função não está diretamente ligada ao manipulador de eventos click é porque jQuery retorna uma função que é ligada. A função do jQuery, por sua vez, passa por algumas camadas e cheques de abstração e, em algum lugar , executa sua função.





google-chrome-devtools