問(wèn)題描述

大家都知道，在以前jq時(shí)代，可以通過(guò)在標(biāo)簽里加onclick之類的屬性添加事件處理函數(shù)。這樣的話瀏覽器中直接右鍵查看元素就可以知道綁了哪個(gè)方法，甚至可以看到這個(gè)方法在代碼里哪一行。然而，在Vue出現(xiàn)后，想知道一個(gè)按鈕做了什么就變成了一個(gè)頭疼的問(wèn)題，在源碼里寫的@click=’method’會(huì)被vue處理并隱藏，這樣就不能直接看到按鈕的動(dòng)作了，還要再去源碼里找，十分低效。那么問(wèn)題來(lái)了，如何才能直接在瀏覽器中看到按鈕綁定了哪一個(gè)Vue方法以及在哪一行呢？

問(wèn)題解答

看來(lái)沒(méi)人知道呀，也沒(méi)人想過(guò)這個(gè)問(wèn)題。算了，我還是自己寫個(gè)插件吧

你可以使用 vue-devtools

右鍵網(wǎng)頁(yè)源代碼查看，直接在相關(guān)元素上找到綁定處理方法，然后在source面板的相關(guān)js中search，就可以定位到具體某一行。

查看 DOM 元素的事件：

直接點(diǎn)擊第一個(gè)，打開(kāi) Vue 文件，然后設(shè)置斷點(diǎn)，斷到斷點(diǎn)之后，就可以看 fn 綁定的是哪個(gè)方法了：

在 console 里輸入 fn，敲回車，然后點(diǎn)擊輸出的方法名：

自動(dòng)跳到 Sources 中的方法：

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