web-dev-qa-db-fra.com

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 j'ai pu trouver) est un moyen de trouver la définition d'une fonction JavaScript. Ce serait très pratique pour moi car je travaille sur un site qui inclut de nombreux fichiers JS externes. Certes, grep résout ce problème, mais dans le navigateur, ce serait beaucoup mieux. Je veux dire, le navigateur doit le savoir, alors pourquoi ne pas l'exposer? Ce à quoi je m'attendais était quelque chose comme:

  • Sélectionnez "Inspecter l'élément" sur la page, qui met en surbrillance la ligne dans l'onglet Elé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 passe à la définition de la fonction

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

Et si ce n'est pas le cas, je suppose que cela proviendrait de WebKit, mais que rien ne pourrait être trouvé pour demandes de fonctionnalités de l'outil de développement ou la Webzit Bugzilla .

javascriptgoogle-chrome-devtools
261
Ryan DuVal

Disons que nous cherchons une fonction nommée foo:

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

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

348
plesiv

This atterri à 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:enter image description here

J'inspecte un objet avec des méthodes dans la console. En cliquant sur "Afficher la définition de la fonction", cela me conduit à l'emplacement du code source où la fonction est définie. Ou je peux simplement survoler la function () { Word pour voir le corps de la fonction dans une info-bulle. Vous pouvez facilement inspecter la chaîne de prototypes dans son ensemble! CDT définitivement rock !!!

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

71
Dmitry Pashkevich

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 uniquement [native code] au lieu du code source.

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

44
joar

Mise à jour 2016: dans Chrome version 51.0.2704.103

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

ctrl + shift + O

ou sous OS X:

⌘ + shift + O

Cela permet de répertorier et d’atteindre les membres du fichier en cours.

30
arthur.sw

Un autre moyen de naviguer jusqu'à l'emplacement d'une définition de fonction consiste à ouvrir le débogueur à un endroit où vous pouvez accéder à la fonction et entrer le nom complet de la fonction dans la console. Ceci imprimera la définition de la fonction dans la console et donnera un lien qui ouvrira l'emplacement du script où la fonction est définie.

17
Răzvan Flavius Panda

Différents navigateurs le font différemment.

  1. Commencez par ouvrir la fenêtre de la console en cliquant avec le bouton droit de la souris sur la page et en sélectionnant "Inspecter élément" ou en appuyant sur F12.

  2. Dans la console, tapez ...

    • Firefox

      functionName.toSource()

    • Chrome

      functionName
15
Deepak Dixit

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

  1. Sélectionnez Sources onglet.
  2. Dans le volet Regarder, cliquez sur + et tapez fenêtre
  3. Vos références de fonctions globales 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 bascule vers cette définition de fonction.
3
Chris Robinson

dans la console Chrome:

debug(MyFunction)
MyFunction()
2
Igor Krupitsky

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

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

enter image description here

  1. Sélectionnez la fonction, puis cliquez avec le bouton droit de la souris sur la fonction et sélectionnez "Évaluer le texte sélectionné dans la console".

enter image description here

0
subhro