javascript - 如何在瀏覽器如chrome中審查元素時查看某個元素綁定的Vue方法？

Question

大家都知道，在以前jq時代，可以透過在標籤裡加onclick之類的屬性來加入事件處理函數。這樣的話瀏覽器中直接右鍵查看元素就可以知道綁了哪個方法，甚至可以看到這個方法在程式碼裡哪一行。
然而，在Vue出現後，想知道一個按鈕做了什麼就變成了一個頭疼的問題，在源碼裡寫的@click='method'會被vue處理並隱藏，這樣就不能直接看到按鈕的動作了，還要再去源碼裡找，十分低效。那麼問題來了，如何才能直接在瀏覽器中看到按鈕綁定了哪一個Vue方法以及在哪一行呢？

Answer 1

看來沒人知道呀，也沒人想過這個問題。算了，我還是自己寫個插件吧

Answer 2

你可以用 vue-devtools

Answer 3

右鍵網頁原始碼查看，直接在相關元素上找到綁定處理方法，然後在source面板的相關js中search，就可以定位到具體某一行。

Answer 4

查看 DOM 元素的事件：

直接點選第一個，開啟 Vue 文件，然後設定斷點，斷到斷點之後，就可以看 fn 綁定的是哪個方法了：

在 console 裡輸入 fn，敲回車，然後點選輸出的方法名稱：

自動跳到 Sources 中的方法：

Answer 5

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