크롬과 같은 브라우저에서 요소를 검사할 때 요소에 바인딩된 Vue 메서드를 보는 방법은 무엇입니까?

Question

이전 jq 시대에는 태그에 onclick과 같은 속성을 추가하여 이벤트 처리 기능을 추가할 수 있다는 것은 누구나 알고 있습니다. 이 경우 브라우저에서 해당 요소를 마우스 오른쪽 버튼으로 클릭하면 어떤 메서드가 바인딩되어 있는지 알 수 있고, 이 메서드가 코드의 어느 줄에 있는지도 확인할 수 있습니다.
그러나 Vue가 등장한 이후에는 버튼이 무엇을 하는지 알고 싶어하는 것이 골칫거리가 되었습니다. 소스 코드에 작성된 @click='method'는 Vue에서 처리되고 숨겨져서 버튼을 직접 볼 수 없습니다. 조치를 취하더라도 소스 코드에서 이를 찾아야 하는데 이는 매우 비효율적입니다. 그래서 질문은 버튼이 어떤 Vue 메소드에 바인딩되어 있는지, 어떤 라인에 있는지 브라우저에서 직접 확인할 수 있는 방법입니다.

Answer 1

이 문제에 대해 아는 사람도 없고, 생각해 본 사람도 없는 것 같습니다. 잊어버리세요. 그냥 제가 직접 플러그인을 작성하겠습니다

Answer 2

vue-devtools를 사용할 수 있습니다

Answer 3

웹 페이지의 소스 코드를 마우스 오른쪽 버튼으로 클릭하여 보고, 해당 요소에서 직접 바인딩 처리 방법을 찾은 다음, 소스 패널에서 해당 js를 검색하여 특정 행을 찾습니다.

Answer 4

DOM 요소의 이벤트 보기:

첫 번째 항목을 직접 클릭하고 Vue 파일을 연 다음 중단점을 설정하면 fn이 어떤 메서드에 바인딩되어 있는지 확인할 수 있습니다.

콘솔에 fn을 입력하고 Enter 키를 누른 다음 출력 방법 이름을 클릭합니다:

자동으로 소스로 이동하는 방법:

Answer 5

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