728x90
React의 트리구조를 쉽게 볼 수 있게 도와주는 확장 프로그램
React Developer Tools
Adds React debugging tools to the Chrome Developer Tools. Created from revision 1a88fbb67 on 2/16/2023.
chrome.google.com
리액트를 이용하여 개발하는 사람들에게 필수 확장 프로그램이라고 할 수 있다.
주요 기능은 `컴포넌트 트리 구조 확인`과 `컴포넌트의 상태 및 속성을 확인`이다.
1. 컴포넌트 트리 구조를 확인할 수 있다.
기본 개발자도구의 element 요소를 이용해서 컴포넌트를 확인하기는 쉽지 않지만 이 확장 프로그램을 이용하여 쉽게 확인할 수 있다.
2. 컴포넌트의 상태 및 속성을 확인할 수 있다.
원하는 컴포넌트를 클릭하면 상태, 속성을 한눈에 확인하기 쉽게 되어 있다.
사용 방법
확장 프로그램 설치 후 크롬을 전체 껐다가 다시 킨다.
개발자 도구를 열면 Components 탭이 생긴다.
리액트로 만들어진 페이지가 아니면 탭도 당연히 안 보인다.
반응형
'FrontEnd > React' 카테고리의 다른 글
| Recoil, Recoil-Persist를 이용한 상태관리 (0) | 2023.06.30 |
|---|