As we all know, in the previous jq era, event handling functions could be added by adding attributes such as onclick to the tag. In this case, you can know which method is bound by right-clicking on the element in the browser, and you can even see which line in the code this method is on.
However, after the emergence of Vue, wanting to know what a button does has become a headache. @click='method' written in the source code will be processed and hidden by Vue, so that it cannot be seen directly. If the button action is correct, you still have to find it in the source code, which is very inefficient. So the question is, how can we directly see in the browser which Vue method the button is bound to and which line it is on?
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
It seems that no one knows, and no one has thought about this problem. Forget it, I’ll just write a plug-in myself
You can use vue-devtools
Right-click the source code of the web page to view it, find the binding processing method directly on the relevant element, and then search in the relevant js in the source panel to locate a specific line.
View events of DOM elements:
Click directly on the first one, open the Vue file, and then set a breakpoint. After breaking to the breakpoint, you can see which method fn is bound to:
Enter fn in the console, hit Enter, and then click the output method name:
How to automatically jump to Sources:
https://chrome.google.com/web...