[VUE] devtools 설치 및 사용하기

안녕하세요!

프뚜(프로그래머 뚜)입니다!

 

[개발 환경]

 - OS: windows 10 64bit

 - git: 2.37.1.windows.1

 - nodejs: v16.16.0

 - npm: 8.15.0

 - yarn: 1.22.19

 - @vue/cli(vue3): 5.0.8

 

chrome에서 사용할 수 있는 devtools을 설치하고 사용해보겠습니다.

 

 

1. chrome 웹 스토어 접속하기 (링크)

 

 

2. chrome 관리자(F12) > Vue 탭으로 이동하기

Vue의 계층 구조, Router, params, emit, path 등 다양한 값들을 한 눈에 볼 수 있는 devtools입니다.

 

개발 시, devtools 또는 debug는 필수입니다.

 

 

궁금하신 부분 또는 문제가 생긴 부분에 대해서 댓글 남겨주시면 빠르고 정확한 답변드리겠습니다.