C-React 용 Google Chrome

C-React: 컴포넌트의 React 렌더링을 시각화하기

C-React는 컴포넌트의 React 렌더링을 시각적으로 제공하는 C-React에서 개발한 크롬 확장 도구입니다. 이 오픈 소스 도구를 사용하면 사용자는 DOM 컴포넌트 트리를 볼 수 있으며 웹 페이지에서 렌더링 패턴을 관찰하고 성능 메트릭에 액세스할 수 있습니다.

C-React 개발자 도구를 크롬 개발자 패널에 통합함으로써 사용자는 웹 페이지를 동적으로 업데이트하고 통신하여 컴포넌트 변경 사항을 시각화할 수 있습니다. 이 도구는 컴포넌트의 성능 메트릭도 제공하여 효율적인 로드 시간을 촉진합니다.

시작하려면 Chrome 웹 스토어에서 C-React DevTool을 설치하십시오. 그런 다음 C-React의 사용자 정의 렌더러로 렌더링된 React 애플리케이션을 엽니다. Chrome 개발자 도구를 열고 C-React 패널을 클릭하십시오. 웹 페이지를 탐색하는 동안 컴포넌트 트리가 동적으로 업데이트되어 변경 사항을 명확하게 시각적으로 나타냅니다. 트리 노드를 클릭하면 해당 요소가 웹 페이지에서 강조 표시됩니다.

C-React Dev Tool은 모든 웹 페이지와 호환되지만, C-React의 사용자 정의 렌더러로 페이지가 렌더링되지 않으면 특정 요소의 로딩 시간을 표시하지 않거나 트리 노드를 클릭할 때 해당 요소를 강조 표시하지 않습니다.