Comment afficher la méthode Vue liée à un élément lors de l'inspection de l'élément dans un navigateur tel que Chrome ?

Question

Tout le monde sait que dans l'ère jq précédente, des fonctions de gestion d'événements pouvaient être ajoutées en ajoutant des attributs tels que onclick à la balise. Dans ce cas, vous pouvez savoir quelle méthode est liée en cliquant avec le bouton droit sur l'élément dans le navigateur, et vous pouvez même voir sur quelle ligne du code se trouve cette méthode.
Cependant, après l'émergence de Vue, vouloir savoir ce que fait un bouton est devenu un casse-tête. @click='method' écrit dans le code source sera traité et masqué par Vue, de sorte que le bouton ne puisse pas être vu directement après. pour passer à l'action, il faut quand même le chercher dans le code source, ce qui est très inefficace. La question est donc : comment pouvons-nous voir directement dans le navigateur à quelle méthode Vue le bouton est lié et sur quelle ligne il se trouve ?

Answer 1

Il semble que personne ne le sache et que personne n'ait réfléchi à ce problème. Oubliez ça, je vais juste écrire un plug-in moi-même

Answer 2

Vous pouvez utiliser vue-devtools

Answer 3

Cliquez avec le bouton droit sur le code source de la page Web pour l'afficher, recherchez la méthode de traitement de liaison directement sur l'élément concerné, puis recherchez dans le js correspondant dans le panneau source pour localiser une ligne spécifique.

Answer 4

Afficher les événements des éléments DOM :

Cliquez directement sur le premier, ouvrez le fichier Vue, puis définissez un point d'arrêt. Après avoir atteint le point d'arrêt, vous pouvez voir à quelle méthode fn est lié :

.

Entrez fn dans la console, appuyez sur Entrée, puis cliquez sur le nom de la méthode de sortie :

Comment accéder automatiquement aux sources :

Answer 5

https://chrome.google.com/web...