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

282

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 .

Ryan DuVal
fonte
3
Há uma barra de pesquisa que encontra o arquivo atual na guia Scripts e você pode espiar o conteúdo de uma função imprimindo-a. Mas agora estou curiosa se há uma maneira de fazer uma pesquisa mais geral, como você quer ...
hugomg
3
Com as Ferramentas do desenvolvedor do Google Chrome, na janela "Fontes", toque em -> à direita, você tem a possibilidade de definir "Pontos de interrupção de eventos".
No meu caso, eu tinha uma variável definida para uma função desconhecida. Eu fiz myvar.toString () e ele imprimiu: "function Object () {[código nativo]}", que é tudo que eu precisava saber.
Ring

Respostas:

366

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.

plesiv
fonte
8
Agora é disso que estou falando! Eu não tinha ideia de que o painel existia - e como você faria?
Ryan DuVal
22
cmd + option + F no OSX
Stiggler 04/03
2
Essa é apenas uma maneira de definir uma função denominada foo. Há outros. E se a nossa função for, por exemplo bar['foo']? (Não há uma boa resposta para essa pergunta, até onde eu sei - é essencialmente "não escreva código complicado") #
915 Steven Lu
1
Não consegui encontrar "definição de função" usando a resposta selecionada. Pesquisei no Google e não encontrei nenhuma ajuda. (Usando a versão do Chrome 41.0.2272.118 m)
Web_Developer 13/15
7
E então você falha ao encontrar declarações de função, expressões de função geradas dinamicamente e funções anônimas (sem nome). Eu preferiria algo como o Firefox: clique na referência de função no painel do relógio -> Ir para a referência de função.
Fagner Brack #
77

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:

 Ferramentas de desenvolvimento do Chrome> Console> Mostrar definição de função

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!

Dmitry Pashkevich
fonte
1
Existe um atalho ou uma função que permitirá pesquisar por uma referência de função? como "> inspecionar (document.body)". Por enquanto eu tenho que d> tmp = {a: myFunc}; > tmp, seguido pela "Mostrar definição da função"
Dennis C
16
Eu acho que você pode fazerdir(myFunc)
Dmitry Pashkevich 24/04
dir (myFunc) é muito melhor, mas ainda precisa de dois cliques e rato
Dennis C
1
Ah, quer dizer, se você pode fazer isso completamente a partir do teclado? Algo como findDefinition(myFunc)? AFAIK que ainda não existe ...
Dmitry Pashkevich
Se você não tiver um objeto contendo a função, poderá criar um objeto ao seu redor e ele ainda funcionará. Por exemplo, no tipo de console:, ({1:somefunction})clique com o botão direito do mouse na função dentro do objeto impresso.
Protector one
47

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.

joar
fonte
1
Isso não funciona para mim (mesmo w / funções definidas dentro da página):> toggle_search ReferenceError: toggle_search não é definido
Ryan DuVal
Aah, veja minha edição. Caso contrário, o uso da função de pesquisa o ajudará. Chrome devtools não é um IDE, é um depurador :)
joar
1
Isso funciona para encontrar a definição atualmente ativa da função.
284 Patrick Patrick
1
Na verdade, isso implica que a função foi definida dentro do escopo atual .
Jonathan
1
@aroth Pelo menos no Chrome 45, isso funciona novamente. Estou ciente de que as coisas mudaram em algum lugar entre quando isso foi publicado e agora. Conclusivamente, parece funcionar novamente.
joar
32

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.

arthur.sw
fonte
1
bem, o que isso parece fazer não é "ir para a definição" de uma chamada de função arbitrária, mas "mostrar todos os nomes de funções no arquivo atual e deixá-los ir para eles" - o que também é útil.
Scott Weaver
Era exatamente isso que eu procurava, um recurso semelhante ao firefox! No firefox, você pode simplesmente abrir as ferramentas de desenvolvimento, pressionar Ctrl + f, e ele procurará a função JS em todos os painéis (HTML / CSS / Javascript / etc.). Isso é feito, diferentemente dos recursos de regex mencionados em outras respostas.
JavaBean007 /
@ Randy, em qual versão do chrome? Qual SO? Eu uso a versão 59.0.3071.115 do Chrome no OS X e funciona bem.
Arthur.sw
@ arthur.sw Desculpe, eu não sabia que você precisava estar em fontes para que isso funcionasse. Eu esperava que ele funcionasse no console também.
Randy
Para mim, um menu cromado é aberto se eu pressionar essa combinação de teclas no console de desenvolvimento.
Preto
19

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.

Răzvan Flavius ​​Panda
fonte
17

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
Deepak Dixit
fonte
a função que estou procurando é stop () e é usada como onmouseover = "this.stop ();" quando faço o que você diz, ele retorna: stop () {[código nativo]} Então, o que fazer agora?
Tarik
functionName.toSource()também funciona nas versões mais recentes do chrome.
Sourav Ghosh
1
@Tarik Veja a documentação on-line do built-in stop.
Fund Monica's Lawsuit 03/03
@QPaysTaxes Obrigado, agora entendo que quando ele retorna: stop () {[código nativo]} o código nativo significa que não é uma função privada, é uma função interna e devo procurar a documentação on-line da função.
Tarik
6

no console do Chrome:

debug(MyFunction)
MyFunction()
Igor Krupitsky
fonte
1
Eu gosto disso. Digno de nota: faça um undebug(MyFunction)para remover o ponto de interrupção novamente (depois de encontrar a implementação do método)
Andreas Dolk
5

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.
Chris Robinson
fonte
1

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.

insira a descrição da imagem aqui

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

insira a descrição da imagem aqui

subhro
fonte
0

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:

insira a descrição da imagem aqui

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

insira a descrição da imagem aqui

Abdollah
fonte