[Vue/코딩애플/part3] 11. 디버깅 하기 위한 Vue devtools 설치하기 (for Vue3)

1. chrome 웹 스토어에서 vue-devtools 검색

 

 

2. 최신 devtools 설치하기

예전에 나온건 vue2 를 위한 확장프로그램이라고 한다.

 

 

3. 설치가 완료되면 개발자 모드 열어서 확인하기

 

저 화살표 눌러서 vue 를 선택하면 된다.

 

 

잘 나오는 것을 확인할 수 있다.

 

- 프로젝트에 라우터를 설치했으면 현재 route, parameter 등도 확인할 수 있다.

- state 도 수정 가능

설정을 바꾸면 props 도 수정 가능하다.

 

- Timeline 메뉴에서 지금까지 어떤 이벤트가 동작했는 지도 체크 가능