Trouver JavaScript définition de la fonction dans Chrome

Chrome Developer Tools rock, mais une chose qu'ils ne semblent pas avoir (que j'ai pu trouver) est un moyen de trouver une fonction JavaScript définition. Ce serait super pratique pour moi parce que je travaille sur un site qui regroupe beaucoup de JS externe des fichiers. Assurez-vous grep permet de résoudre ce mais dans le navigateur serait beaucoup mieux. Je veux dire, le navigateur doit savoir cela, alors pourquoi ne pas l'exposer? De ce que j'attendais était quelque chose comme:

  • Sélectionnez " Inspecter l'Élément de la page, qui met en évidence la ligne dans l'onglet Éléments
  • Cliquez-droit sur la ligne et sélectionnez "Aller à la définition de la fonction'
  • Corriger le script est chargé dans l'onglet Scripts et elle saute à la définition de la fonction

Tout d'abord, est ce que cette fonctionnalité existe pas et je suis juste en manque c'?

Et si ça ne marche pas, je suppose que ce serait à partir de WebKit, mais ne pouvait pas trouver quoi que ce soit pour Développeur de l'Outil de demandes de fonctionnalités ou WebKit de Bugzilla.

  • Il y a une barre de recherche qui grep le fichier en cours dans l'onglet Scripts et vous pouvez regarder le contenu d'une fonction d'impression par elle. Mais je suis maintenant curieux de si il ya un moyen de faire une recherche plus générale comme vous voulez...
  • Avec Google Chrome Developer Tools, lors de la "Sources" Tap -> droite de la fenêtre, vous avez la possibilité de définir l'Événement "points d'arrêt".
  • Dans mon cas, j'ai eu une variable à une fonction inconnue. Je n'ai myvar.toString() et de l'imprimer: "la fonction de l'Objet() { [native code] }" qui est tout ce que je besoin de savoir.
InformationsquelleAutor Ryan DuVal | 2012-03-22
  1. 354

    Permet de dire que nous sommes à la recherche pour fonction nommée foo:

    1. (ouvrez google Chrome dev-tools),
    2. Windows: ctrl + maj + F, ou macOS:
      cmd + optn + F. Cela ouvre une fenêtre de recherche à travers tous les scripts.
    3. cochez la case "expression Régulière" case à cocher,
    4. de recherche pour foo\s*=\s*function (recherche foo = function avec un nombre quelconque d'espaces entre ces trois jetons),
    5. appuyez sur un résultat retourné.

    Une autre variante pour la définition de fonction est function\s*foo\s*\( pour function foo( avec un nombre quelconque d'espaces entre ces trois jetons.

    • Maintenant, c'est de quoi je parle! Je n'avais aucune idée de ce volet de l'existence même -- et comment feriez-vous?
    • cmd + option + F sur mac OSX
    • Grande réponse - n'arrivais pas à trouver cette recherche dans l'un des menus - ressemble à une fonctionnalité cachée?
    • Ce n'est qu'un moyen de définir une fonction nommée foo. Il en existe d'autres. Que faire si notre fonction est, par exemple,bar['foo']? (Il n'y a pas de bonne réponse à cette question, autant que je sache --- c'est "ne pas écrire alambiqué code")
    • ajouter le raccourci OS X dans la réponse ou explicitement spécifier quelle plate-forme ctrl-shift-f est conçu pour
    • Vous pourriez suggérer une modification en modifiant la réponse directement.
    • Je ne sais pas à quel plates-formes <kbd>ctrl</kbd> + <kbd>shift</kbd> + <kbd>F</kbd> s'applique
    • super réponse, comment puis-je apprendre quelque chose comme ça - c'est à dire où est le manuel?
    • Je ne pouvais pas trouver la fonction "définition" à l'aide de la réponse choisie. J'ai cherché sur Google et je ne trouve pas d'aide. (À l'aide de la Version Chrome 41.0.2272.118 m )
    • C'est assez rad yo!
    • Et puis vous ne trouvez pas de déclarations de fonction, générées dynamiquement en fonction des expressions et anonyme (sans nom) de fonctions. Je préfère voulez quelque chose comme Firefox: Cliquez sur la fonction de référence de la montre de bord -> Saut à la fonction de référence.
    • Ce serait bien si vous pouviez ctrl+clic et cela vous prendrait-il.
    • Dans Chrome 46.0.2490.86 m sous Windows 10, j'ai eu à double échapper les caractères spéciaux dans l'expression régulière, par exemple, foo\\s*=\\s*function
    • Il n'y a pas de solution parfaite que je suis au courant, et Chrome a maintenant une fonctionnalité qui aime trop, mais la référence doit exister dans la portée lorsque vous êtes à la recherche pour que le truc fonctionne. Je pense que cette regex gère les situations que vous avez mentionné (à l'exception des fonctions anonymes, qui.. je veux dire, juste la recherche pour "fonction" si vous voulez les voir): ^(?=.*foo)(?=.*function).*$ Aussi, la réponse ci-dessus est techniquement une réponse parfaite à la question, avec quelques bonus info jeté dans.
    • Remarque l'expression régulière ci-dessus ne trouverez pas de flèche fonctions attribuées à une variable comme var foo = () => (...), mais qui doit être assez rare. @StevenLu C'est pédant, mais je crois que la fonction n'est pas nom foo dans votre deuxième exemple. Il est affecté à la propriété foo sur la barre.
    • Cela ne fonctionne pas tant que la fonction n'est pas définie de cette façon, ou n'est pas venue jusqu'à la recherche, en tant que juste à la recherche pour le nom de la fonction affiche uniquement 1/1 résultat qui est seulement dans la balise HTML onclick appel (peu importe où et comment, je recherche à partir de). Je ne suis pas sûr de savoir comment accéder à cette fonction, la définition de sans récurer tout inclus .js fichiers, dont je pensais qu'ils étaient déjà inclus dans ce type de recherche.
    • La réponse semble être obsolète, rien ne se passe si je clique sur cette combinaison de touches dans la console développeur.

    InformationsquelleAutor plesiv
  2. 72

    Ce débarqué en Chrome sur 2012-08-26
    Pas sûr au sujet de la version exacte, je l'ai remarqué en Chrome 24.

    Une capture d'écran vaut un million de mots:Trouver JavaScript définition de la fonction dans Chrome

    Je suis inspection d'un objet avec des méthodes dans la Console. En cliquant sur "Afficher définition de la fonction" me prend de la place dans le code source où la fonction est définie. Ou je peux il suffit de passer sur le function () { mot pour voir le corps de la fonction dans une info-bulle. Vous pouvez facilement inspecter l'ensemble de la chaîne de prototype de ce genre! CDT définitivement rock!!!

    Espère que vous le trouverez utile!

    • Est-il un raccourci ou une fonction qui permet de rechercher par une fonction de référence? comme ">inspecter(document.corps)". Pour l'instant j'ai de d > tmp={a:mafonction}; >tmp, suivi par le "Spectacle de définition de la fonction"
    • Je pense que vous pouvez faire dir(myFunc)
    • dir(mafonction) est beaucoup mieux, mais toujours besoin de deux clics de souris et
    • Oh, vous voulez dire que si vous pouvez le faire complètement à partir d'un clavier? Quelque chose comme findDefinition(myFunc)? Autant que je sache qui n'existe pas encore...
    • Si vous n'avez pas un objet contenant la fonction, vous pouvez créer un objet autour d'elle et elle fonctionne toujours. E. g. dans le type de console: ({1:somefunction}), puis à droite, cliquez sur la fonction à l'intérieur de l'objet imprimé.
    • vous pouvez simplement taper dir(someFunction) dans la console
    • Oui, mais qui va juste afficher la définition, de ne pas vous prendre là où il est réellement définie. Ce dernier est plus utile, parce que vous pouvez vivre de le modifier.
    • non, console.dir() toujours affiche son argument comme sur l'objet avec les propriétés de sorte que vous pouvez droit-cliquez dessus et sélectionnez "Afficher la définition de la fonction"
    • Il n'y a aucun objet dans mon cas, tout ce que j'ai est HTML: onclick=some_function(weird). Le seul résultat de la recherche peu importe ce que j'essaie montre juste la balise HTML, si la fonction est en train de faire... quelque chose... et ce n'est pas un pré-définis en fonction JavaScript.
    • Vous devriez être en mesure d'inspecter l'élément, puis aller à DOM Auditeurs dans le panneau de droite et de trouver le gestionnaire de clic il. Vous pouvez également utiliser le Visuel de l'Événement extension Chrome pour rendre la recherche pour le droit de gestionnaire plus rapide.

    InformationsquelleAutor Dmitry Pashkevich
  3. 44

    Vous pouvez imprimer la fonction par l'évaluation de la nom de dans la console, comme

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

    cela ne fonctionne pas pour les fonctions intégrées, ils n'affichent [native code] au lieu de code source.

    MODIFIER: cela implique que la fonction a été définie dans le champ d'application actuel.

    • Cela ne fonctionne pas pour moi (même w/ fonctions définies à l'intérieur de la page): > toggle_search ReferenceError: toggle_search n'est pas défini
    • Aah, voir mon edit. Otherwisse, à l'aide de la fonction de recherche va vous aider. Chrome devtools n'est pas un IDE, c'est un débogueur 🙂
    • Tant pis, c'est parce qu'il était dans un iframe. Une autre question cependant, est-il un moyen de voir ce fichier la fonction est définie dans?
    • Je n'en ai pas vu. La fonction de recherche va vous aider avec ça. Si vous êtes à la recherche pour une intégration plus étroite entre Chrome et votre IDE, découvrez Source de Chrome Cartes. youtube.com/watch?v=-xJl22Kvgjg
    • Quand je fais cela, la source et la ligne est imprimée clair à droite sur la même ligne que la fonction de fermeture de corset.
    • Cela fonctionne pour trouver la définition de la fonction.
    • Cela signifie que la fonction a été définie dans le actuelle portée.
    • En effet, fixe
    • Malheureusement, cela ne fonctionne plus, car au moins il y a quelques mois. Au lieu de cela, vous obtenez juste un très inutile function unknownFunc(unknown) ligne maintenant, sans code en ligne.
    • Au moins dans google Chrome, 45, cela fonctionne de nouveau. Je suis conscient que les choses ont changé, quelque part entre les deux, lorsque cela a été posté et maintenant. En conclusion, il semble fonctionner de nouveau.
    • Ce que s'affiche "undefined", même si en cliquant sur le bouton qui appelle la fonction en fait des trucs à partir du code source je ne peux pas trouver n'importe où... est-il magique portée assistant en agitant sa baguette quelque part et comment puis-je le trouver?

    InformationsquelleAutor joar
  4. 30

    2016 mise à Jour: dans la Version Chrome 51.0.2704.103

    Il y a un Go to member raccourci (répertoriés dans settings > shortcut > Text Editor). Ouvrez le fichier contenant votre fonction (dans le sources panneau de la DevTools) et appuyez sur:

    ctrl + maj + O

    ou OS X:

    ⌘ + maj + O

    Cela permet de répertorier et de la sensibilisation des membres de l'actuel fichier.

    • bien, cela semble faire est de ne pas "aller à la définition" de l'arbitraire d'un appel de fonction, mais "vous montrera tous les noms de fonction dans le fichier courant et laissez-vous aller à eux" - qui est un peu trop utile.
    • C'est exactement ce que je cherchais, une fonctionnalité similaire à firefox! Dans firefox, vous pouvez simplement ouvrir les outils de dev, appuyez sur Ctrl+f, et il recherchera la fonction JS dans tous les volets(HTML/CSS/Javascript/etc.). Ce n'est, à la différence de la regex caractéristiques mentionnées dans d'autres réponses.
    • sur quelle version de chrome? Quel système d'exploitation? J'utilise la Version Chrome 59.0.3071.115 sur OS X et il fonctionne très bien.
    • Désolé, je ne savais pas que vous deviez être dans les sources pour que cela fonctionne. Je m'attendais à travailler dans la console ainsi.
    • Pour moi, un menu google chrome s'ouvre si j'appuyez sur cette combinaison de touches dans le dev de la console.
    • Juste pour s'assurer que: 1. Focus (clic) sur les fichiers de la source où vous voulez regarder pour la fonction, dans le panneau source de l'outils de dev. 2. C'est la lettre "O", pas le nombre de "0".

    InformationsquelleAutor arthur.sw
  5. 17

    Une autre façon de naviguer jusqu'à l'emplacement de la définition d'une fonction serait de séparer dans le débogueur, vous pouvez accéder à la fonction et entrez les fonctions du nom complet de la console. Cette impression sera la définition de la fonction dans la console et de donner un lien qui s'ouvre cliquez sur l'emplacement du script où la fonction est définie.

    Trouver JavaScript définition de la fonction dans Chrome

    InformationsquelleAutor Răzvan Flavius Panda
  6. 15

    Différents navigateurs ce faire différemment.

    1. D'abord ouvrir la fenêtre de la console par un clic droit sur la page et choisir "Inspecter l'Élément", ou en appuyant sur la touche F12.

    2. Dans la console, tapez...

      • Firefox

        functionName.toSource()

      • Chrome

        functionName
    • la fonction que je recherche, c'est d'arrêter() et il est utilisé comme onmouseover="this.stop();" quand je fais ce que vous dites, il retourne: stop() { [native code] } Alors, que faire maintenant?
    • functionName.toSource() travaille également sur les dernières versions de chrome.
    • Regardez la documentation en ligne pour la builtin stop.
    • Merci, je comprends maintenant que quand il retourne: stop() { [native code] }, il code natif signifie qu'Il n'est pas une fonction privée, c'est une fonction interne et que je devrais regarder pour la documentation en ligne de la fonction.
    InformationsquelleAutor Deepak Dixit
  7. 4

    J'ai trouver le moyen le plus rapide pour localiser une fonction globale est tout simplement:

    1. Sélectionnez Sources onglet.
    2. Dans le Regarder volet cliquez sur + et le type fenêtre
    3. Votre fonction globale références sont classées par ordre alphabétique.
    4. Droit-cliquez sur la fonction qui vous intéresse.
    5. Dans le menu déroulant sélectionnez Afficher la définition de fonction.
    6. Le code source volet de commutateurs à cette définition de fonction.
    InformationsquelleAutor Chris Robinson
  8. 4

    en Chrome console:

    debug(MyFunction)
MyFunction()
    • J'aime que. À noter: faire un undebug(MyFunction) pour supprimer le point d'arrêt à nouveau (après avoir trouvé la méthode de la mise en œuvre)
    InformationsquelleAutor Igor Krupitsky
  9. 0

    Dans Google chrome, Inspecter l'élément outil, vous pouvez afficher le code Javascript définition de la fonction.

    1. Cliquez sur l'onglet Sources. Puis sélectionnez la page d'index. Recherche pour l'
      fonction.

    Trouver JavaScript définition de la fonction dans Chrome

    1. Sélectionner la fonction, puis cliquez-Droit sur la fonction et sélectionnez
      "Évaluer le texte sélectionné dans la console."

    Trouver JavaScript définition de la fonction dans Chrome

    InformationsquelleAutor subhro