React : 개발자도구 크롬 확장프로그램 (React/Redux Developer Tools)

⚛️ React/개념

Zoeeey 2023. 7. 4. 20:49

Chrome 웹 스토어

Chrome에 사용할 유용한 앱, 게임, 확장 프로그램 및 테마를 찾아보세요.

chrome.google.com

React Developer Tools

기존 개발자 도구에서 react 구조를 찍어보며 state, props 등을 확인할 수 있다.

Profiler 탭에서는 성능확인도 할 수 있다. (녹화 버튼 → 페이지 조작 → 녹화 중지버튼)
오래 걸리는 경우는 대게 서버에서 ajax 요청결과가 늦게 도착해서 그렇다.

Redux store에 있던 state를 전부 확인 가능하며, dispatch 날릴 때마다 어떻게 바뀌었는지 로그를 남겨준다.