Encontre a definição da função JavaScript no Chrome

As Ferramentas de desenvolvedor do Chrome são ótimas, mas uma coisa que elas parecem não ter (que eu poderia encontrar) é uma maneira de encontrar a definição de uma função JavaScript. Isso seria super útil para mim, porque estou trabalhando em um site que inclui muitos arquivos JS externos. Claro que o grep resolve isso, mas no navegador seria muito melhor. Quero dizer, o navegador precisa saber disso, então por que não expô-lo? O que eu esperava era algo como:

• Selecione 'Inspecionar elemento' na página, que destaca a linha na guia Elementos
• Clique com o botão direito do mouse na linha e selecione 'Ir para a definição de função'
• O script correto é carregado na guia Scripts e salta para a definição da função

Primeiro, essa funcionalidade existe e só estou sentindo falta dela?

E, se não, acho que isso viria do WebKit, mas não consegui encontrar nada para solicitações de recursos da Ferramenta de Desenvolvedor ou o Bugzilla do WebKit .

Digamos que estamos procurando a função denominada foo:

1. (abra as ferramentas de desenvolvimento do Chrome),
2. Windows: ctrl+ shift+ Fou macOS: cmd+ optn+ F. Isso abre uma janela para pesquisar em todos os scripts.
3. marque a caixa de seleção "Expressão regular",
4. pesquisar foo\s*=\s*function(pesquisa foo = functioncom qualquer número de espaços entre esses três tokens),
5. pressione um resultado retornado.

Outra variante para definição de função é function\s*foo\s*\(para function foo(qualquer número de espaços entre esses três tokens.

Foi lançado no Chrome em 26/08/2012. Não tenho certeza da versão exata, notei isso no Chrome 24.

Uma captura de tela vale um milhão de palavras:

Estou inspecionando um objeto com métodos no console. Clicar em "Mostrar definição da função" leva-me ao local no código-fonte em que a função está definida. Ou posso passar o mouse sobre a function () {palavra para ver o corpo da função em uma dica de ferramenta. Você pode inspecionar facilmente toda a cadeia de protótipos dessa maneira! CDT definitivamente rock !!!

Espero que todos achem útil!

Você pode imprimir a função avaliando o nome dela no console, assim

> unknownFunc
function unknownFunc(unknown) {
    alert('unknown seems to be ' + unknown);
}

isso não funcionará para funções internas, elas serão exibidas apenas em [native code]vez do código-fonte.

EDIT : isso implica que a função foi definida dentro do escopo atual.

Atualização de 2016 : na versão 51.0.2704.103 do Chrome

Há um Go to memberatalho (listado em settings > shortcut > Text Editor). Abra o arquivo que contém sua função (no sourcespainel do DevTools) e pressione:

ctrl+ shift+O

ou no OS X:

⌘+ shift+O

Isso permite listar e alcançar membros do arquivo atual.

Outra maneira de navegar para o local de uma definição de função seria interromper o depurador em algum lugar em que você possa acessar a função e inserir o nome completo da função no console. Isso imprimirá a definição da função no console e fornecerá um link que, ao clicar, abre o local do script em que a função está definida.

Navegadores diferentes fazem isso de maneira diferente.

1. Primeiro abra a janela do console clicando com o botão direito do mouse na página e selecionando "Inspecionar elemento" ou pressionando F12.

2. No console, digite ...

   • Raposa de fogo

     functionName.toSource()

   • cromada

     functionName

no console do Chrome:

debug(MyFunction)
MyFunction()

Acho que a maneira mais rápida de localizar uma função global é simplesmente:

1. Selecionar fontes guia .
2. No painel Watch, clique em + e digite window
3. Suas referências de funções globais são listadas primeiro, em ordem alfabética.
4. Clique com o botão direito do mouse na função em que está interessado.
5. No menu pop-up, selecione Mostrar definição da função .
6. O painel de código-fonte muda para essa definição de função.

No Google chrome, ferramenta Inspecionar elementos, você pode visualizar qualquer definição de função Javascript.

1. Clique na guia Fontes. Em seguida, selecione a página de índice. Procure a função.

2. Selecione a função e clique com o botão direito do mouse na função e selecione "Avaliar o texto selecionado no console".

Se você já estiver depurando, poderá passar o mouse sobre a função e a dica de ferramenta permitirá navegar diretamente para a definição da função:

Leitura adicional :

• Chrome DevTools> Referência de depuração de JavaScript

Eu tive um problema semelhante ao encontrar a fonte do método de um objeto. O nome do objeto era myTreee seu método era load. Coloquei um ponto de interrupção na linha em que o método foi chamado. Recarregando a página, a execução foi interrompida nesse ponto. Então, no console do DevTools, digitei o objeto juntamente com o nome do método, ou seja, myTree.loade pressionei Enter. A definição do método foi impressa no console:

Além disso, clicando com o botão direito do mouse na definição, você pode acessar sua definição no código-fonte: