React Monitor 용 Google Chrome

ReactMonitor - 개발자가 React 애플리케이션을 디버그하고 최적화하는 데 도움이 되는 앱

ReactMonitor는 개발자가 React 애플리케이션을 디버그하고 최적화하는 데 도움이 되는 앱입니다.

구성 요소 상태 변경 및 소품 변경을 시각화하기 위해 React 구성 요소 트리를 시각화합니다. 사용자의 브라우저와 React 서버 간의 webSocket 연결을 통해 이를 수행합니다. 이런 식으로 개발자는 애플리케이션의 현재 상태와 적용된 모든 변경 사항의 전체 트리를 자세히 볼 수 있습니다.

ReactMonitor는 클라이언트 측에서 실시간으로 트리를 업데이트합니다. . 또한 클라이언트 측에서 변경 사항을 시각화하기 위해 트리의 상태를 로컬 상태로 유지합니다.

어떻게 작동합니까?

ReactMonitor가 시작되면 ReactServer와 ReactDOMServer가 둘 다 시작되고 포트 3000에서 연결을 수신 대기합니다. 개발자는 ReactServer와 ReactDOMServer를 사용하여 애플리케이션을 시작할 수 있습니다. 그러면 개발자는 앱을 디버깅하고 최적화하기 위해 앱을 제어할 수 있습니다.