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

Une autre façon de naviguer jusqu'à l'emplacement d'une définition de fonction serait d'entrer dans le débogueur à un endroit où vous pouvez accéder à la fonction et de saisir le nom complet de la fonction dans la console. Cela imprimera la définition de la fonction dans la console et donnera un lien qui, en cliquant, ouvre l'emplacement script où la fonction est définie.

Answer 2

Dans la console Chrome :

debug(MyFunction)
MyFunction()

Answer 3

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

1. Sélectionnez Sources onglet.
2. Dans le Regarder cliquez sur le volet + et le type fenêtre
3. Les références de vos fonctions globales sont listées en premier, par ordre alphabétique.
4. Cliquez avec le bouton droit de la souris sur la fonction qui vous intéresse.
5. Dans le menu contextuel, sélectionnez Afficher la définition de la fonction .
6. Le volet du code source passe à cette définition de fonction.

Answer 4

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

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

Answer 5

Dans Google chrome, l'outil Inspecter l'élément vous permet de visualiser toute 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 de la souris sur la fonction et sélectionnez "Évaluer le texte sélectionné dans la console".