Trouver la définition d'une fonction JavaScript dans Chrome

Question

Les outils de développement de Chrome sont excellents, mais une chose qu'ils ne semblent pas avoir (à ma connaissance) 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 serait beaucoup mieux. Je veux dire, le navigateur doit le savoir, alors pourquoi ne pas l'exposer ? Ce que j'attendais était quelque chose comme :

• Sélectionnez "Inspecter l'élément" dans la page, ce qui met en évidence la ligne dans l'onglet Éléments.
• Cliquez avec le bouton droit de la souris sur la ligne et sélectionnez "Aller à la définition de la fonction".
• Le script correct est chargé dans l'onglet script et il saute à la définition de la fonction.

Tout d'abord, cette fonctionnalité existe-t-elle et je ne la vois pas ?

Et si ce n'est pas le cas, je suppose que cela viendrait de WebKit, mais je n'ai rien pu trouver pour Demandes de fonctionnalités de l'outil du développeur o Bugzilla de WebKit .

Answer 1

Disons que nous cherchons une fonction nommée foo :

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

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

Answer 2

Ce site a atterri dans Chrome le 2012-08-26 Je ne suis 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. En cliquant sur "Afficher la définition de la fonction", j'accède à l'endroit du code source où la fonction est définie. Ou bien je peux simplement passer la souris sur l'icône function () { mot pour voir le corps de la fonction dans une infobulle. Vous pouvez facilement inspecter toute la chaîne de prototypes de cette manière ! Le CDT est vraiment génial !

J'espère que vous trouverez tous ces informations utiles !

Answer 3

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

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

cela ne fonctionnera pas pour les fonctions intégrées, elles afficheront seulement [native code] au lieu du code source.

EDIT : cela implique que la fonction a été définie dans la portée actuelle.

Answer 4

Mise à jour de 2016 : dans Chrome Version 51.0.2704.103

Il existe un Go to member raccourci (listé dans settings > shortcut > Text Editor ). Ouvrez le fichier contenant votre fonction (dans le dossier sources du panneau DevTools) et appuyez :

ctrl + shift + O

ou dans OS X :

+ shift + O

Cela permet de lister et d'atteindre les membres du dossier en cours.

Answer 5

Les différents navigateurs font cela différemment.

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

2. Dans la console, tapez...

   • Firefox

     functionName.toSource()

   • Chrome

     functionName