Rechercher la définition de la fonction JavaScript dans Chrome

Les outils de développement de Chrome sont géniaux, mais une chose qu'ils ne semblent pas avoir (que je pourrais trouver) est un moyen de trouver la définition d'une fonction JavaScript. Ce serait super pratique pour moi car je travaille sur un site qui comprend de nombreux fichiers JS externes. Bien sûr, grep résout ce problème, mais dans le navigateur, ce serait beaucoup mieux. Je veux dire, le navigateur doit savoir cela, alors pourquoi ne pas l'exposer? Je m'attendais à quelque chose comme:

• Sélectionnez «Inspecter l'élément» sur la page, qui met en surbrillance la ligne dans l'onglet Éléments
• Cliquez avec le bouton droit sur la ligne et sélectionnez «Aller à la définition de la fonction»
• Le script correct est chargé dans l'onglet Scripts et il passe à la définition de la fonction

Tout d'abord, cette fonctionnalité existe-t-elle et je la manque juste?

Et si ce n'est pas le cas, je suppose que cela proviendrait de WebKit, mais je n'ai rien trouvé pour les demandes de fonctionnalités de Developer Tool ou Bugzilla de WebKit .

Disons que nous recherchons une fonction nommée foo:

1. (ouvrez les outils de développement Chrome),
2. Windows: ctrl+ shift+ Fou macOS: cmd+ optn+ F. Cela ouvre une fenêtre de recherche dans tous les scripts.
3. cochez la case "Expression régulière",
4. rechercher foo\s*=\s*function(recherche foo = functionavec n'importe quel nombre d'espaces entre ces trois jetons),
5. appuyez sur un résultat renvoyé.

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.

Cela a atterri dans Chrome le 2012-08-26 Pas sûr de la version exacte, je l'ai remarqué dans Chrome 24.

Une capture d'écran vaut un million de mots:

J'inspecte un objet avec des méthodes dans la console. Cliquer sur "Afficher la définition de la fonction" m'amène à l'endroit du code source où la fonction est définie. Ou je peux simplement survoler le function () {mot pour voir le corps de la fonction dans une info-bulle. Vous pouvez facilement inspecter toute la chaîne de prototypes comme ceci! CDT définitivement rock !!!

J'espère que vous le trouverez tous utile!

Vous pouvez imprimer la fonction en évaluant son nom dans la console, comme ceci

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

cela ne fonctionnera pas pour les fonctions intégrées, elles s'afficheront uniquement à la [native code]place du code source.

EDIT : cela implique que la fonction a été définie dans le cadre actuel.

Mise à jour 2016 : dans la version Chrome 51.0.2704.103

Il existe un Go to memberraccourci (répertorié dans settings > shortcut > Text Editor). Ouvrez le fichier contenant votre fonction (dans le sourcespanneau des DevTools) et appuyez sur:

ctrl+ shift+O

ou sous OS X:

⌘+ shift+O

Cela permet de lister et d'atteindre les membres du fichier actuel.

Une autre façon de naviguer vers l'emplacement d'une définition de fonction serait de casser le débogueur quelque part où vous pouvez accéder à la fonction et d'entrer le nom complet des fonctions dans la console. Cela imprimera la définition de la fonction dans la console et donnera un lien qui, au clic, ouvre l'emplacement du script où la fonction est définie.

Différents navigateurs le font différemment.

1. Ouvrez d'abord la fenêtre de la console en cliquant avec le bouton droit sur la page et en sélectionnant "Inspecter l'élément", ou en appuyant sur F12.

2. Dans la console, tapez ...

   • Firefox

     functionName.toSource()

   • Chrome

     functionName

dans la console Chrome:

debug(MyFunction)
MyFunction()

Je trouve que le moyen le plus rapide de localiser une fonction globale est simplement:

1. Sélectionnez les sources onglet .
2. Dans le volet de surveillance, cliquez sur + et tapez fenêtre
3. Vos références de fonction globale sont répertoriées en premier, par ordre alphabétique.
4. Cliquez avec le bouton droit sur la fonction qui vous intéresse.
5. Dans le menu contextuel, sélectionnez Afficher la définition de la fonction .
6. Le volet de code source passe à cette définition de fonction.

Dans Google Chrome, l'outil d'inspection des éléments, vous pouvez afficher n'importe quelle définition de fonction Javascript.

1. Cliquez sur l'onglet Sources. Sélectionnez ensuite la page d'index. Recherchez la fonction.

2. Sélectionnez la fonction, puis cliquez avec le bouton droit sur la fonction et sélectionnez «Évaluer le texte sélectionné dans la console».

Si vous déboguez déjà, vous pouvez survoler la fonction et l' info - bulle vous permettra d'accéder directement à la définition de la fonction:

Lectures complémentaires :

• Chrome DevTools> Référence de débogage JavaScript

J'ai eu un problème similaire pour trouver la source de la méthode d'un objet. Le nom de l'objet était myTreeet sa méthode était load. J'ai mis un point d'arrêt sur la ligne que la méthode a été appelée. En rechargeant la page, l'exécution s'est arrêtée à ce stade. Ensuite, sur la console DevTools, j'ai tapé l'objet avec le nom de la méthode, c'est myTree.load-à- dire et appuyez sur Entrée. La définition de la méthode a été imprimée sur la console:

De plus, en faisant un clic droit sur la définition, vous pouvez accéder à sa définition dans le code source: