[React.js] React Developer Tools

n-u-002·2022년 6월 21일
0

TIL

목록 보기
20/24
post-thumbnail

React Developer Tools

크롬의 확장 도구

  • 사이트 액세스 -> 모든 사이트에서
  • 파일 URL에 대한 액세스 허용 -> 활성화

사용 법

1. 컴포넌트 구조 확인

  • 개발자 도구에서 componets영역에서 React로 만든 컴포넌트들을 확인 할 수 있다.

  • 개발한 컴포넌트의 props, state, Effect등의 정보들이 정리 되어 있다.



2. 리랜더 컴포넌트 화면에 나타내는 기능

  • 개발자 설정 아이콘을 클릭 시
  • Hightlight updates when components render를 활성화

    현재 리랜더 되고 있는 곳에 노란색으로 영역을 알려준다.




3. 리랜더 실시간 확인


리랜더 되고 있는 값들을 실시간으로 확인 할 수도 있다.

profile
주니어 프론트엔드 개발자가 되고 싶은

0개의 댓글