クロムなどのブラウザで要素を検査するときに、要素にバインドされた Vue メソッドを表示するにはどうすればよいですか?

Question

ご存知のとおり、以前の JQ の時代では、タグに onclick などの属性を追加することでイベント処理関数を追加できました。この場合、ブラウザで要素を右クリックすることでどのメソッドがバインドされているかを知ることができ、このメソッドがコード内のどの行にあるのかを確認することもできます。
しかし、Vue が登場してからは、ボタンが何をするのか知りたいということが頭の痛い問題になり、ソースコードに書かれた @click='method' は Vue によって処理されて隠蔽され、直接見ることはできなくなります。ボタンのアクションが正しい場合でも、ソース コード内でそれを見つける必要がありますが、これは非常に非効率的です。そこで問題は、ボタンがどの Vue メソッドにバインドされているか、またボタンがどの行にあるのかをブラウザで直接確認するにはどうすればよいでしょうか?

Answer 1

この問題については誰も知らないし、誰も考えていないようです。忘れてください、プラグインを自分で書きます

Answer 2

vue-devtoolsを使用できます

Answer 3

Web ページのソース コードを右クリックして表示し、関連する要素でバインディング処理メソッドを直接見つけて、ソース パネルで関連する JS を検索して特定の行を見つけます。

Answer 4

DOM 要素のイベントを表示:

最初のものを直接クリックして Vue ファイルを開き、ブレークポイントを設定すると、fn がどのメソッドにバインドされているかがわかります。
コンソールに fn と入力し、Enter キーを押して、出力メソッド名をクリックします:

ソースに自動的にジャンプする方法:

Answer 5

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