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

크롬 확장프로그램 스토어

https://chrome.google.com/webstore/

Chrome 웹 스토어

---

React Developer Tools

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

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

---

Redux Developer Tools 

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

 

---

출처 : 코딩애플 https://codingapple.com/