React Router Inspector 용 Google Chrome

React Router 및 Remix 데이터 흐름을 디코딩하는 DevTools 패널

React Router Inspector는 독립 개발자가 만든 Chrome DevTools 확장 프로그램으로, React Router v6/v7 및 Remix 애플리케이션을 디버깅하는 데 사용됩니다. 이 도구는 로더 및 액션 페이로드를 읽을 수 있는 값으로 디코딩하고, 네트워크 탭에서 놓치는 서버 측 가져오기를 표시합니다. 이 확장 프로그램은 디코딩된 요청 목록, 결합된 콘솔 로그 및 크기 조절 가능한 패널이 있는 전용 DevTools 패널을 추가합니다. 이는 개발 중에 라우트 수준 가시성과 더 명확한 서버-클라이언트 데이터 흐름이 필요한 웹 개발자를 대상으로 합니다.

React Router Inspector는 무엇에 사용됩니까?

이 확장은 라우트 로더와 액션이 실시간으로 어떻게 작동하는지를 보여주기 위해 만들어진 개발 전용 DevTools 패널입니다. Chrome DevTools에 연결되어 모든 데이터 요청을 헤더, 타이밍 및 디코딩된 본문과 함께 나열하여 개발자에게 원시 네트워크 페이로드 대신 라우트 범위의 가시성을 제공합니다. 이는 디코딩된 값(예: Dates, Maps 및 BigInts)을 검사해야 하는 React Router v6, v7 또는 Remix 프로젝트에서 작업하는 엔지니어에게 적합합니다.

서버 측 렌더링 활동을 어떻게 노출합니까?

이 도구는 표준 브라우저 도구가 드러내지 않는 SSR 가져오기를 표면화하여 서버 측 가져오기를 클라이언트 요청과 함께 보여줍니다. 개발자가 브라우저 및 서버/SSR 로그를 단일 통합된 보기에서 볼 수 있도록 패널에 서버 로그를 스트리밍하기 위해 동반 Vite 플러그인과 통합할 수 있습니다. 패널은 또한 소스 필터링과 탐색 간 데이터를 유지하기 위한 Preserve 토글을 제공하여 단계별 디버깅을 지원합니다.

복잡한 데이터 유형과 개발자 인체공학을 어떻게 처리합니까?

검사기는 터보 스트림 형식을 실제 값으로 디코딩하여 Dates, Maps 및 BigInts와 같은 복잡한 유형을 보존하며 불투명한 인코딩된 블롭을 남기지 않습니다. UI는 크기를 조절할 수 있는 패널과 오류 강조 표시로 개발자를 대상으로 하며, 네트워크 스타일 레이아웃에서 GraphQL 및 REST 작업을 나열합니다. 전체 서버 로그 통합을 위해 이 확장은 Vite 기반 프로젝트에서 vite-plugin-rr-inspector 동반자가 필요합니다.

명확한 절충안이 있는 경로 수준 디버깅을 위한 집중된 개발 도구

이 확장은 로더와 액션에 대한 디코딩된, 경로 범위의 가시성이 필요한 개발자와 개발 중 SSR 가져오기 가시성이 필요한 사람들을 위한 목표 옵션입니다. Chrome DevTools에 의존하며, 서버 로그의 경우 Vite 플러그인이 필요하므로 프로덕션 빌드나 Vite 개발 설정이 없는 프로젝트의 디버깅에는 적합하지 않습니다. 라우터 기반 데이터 흐름에 대한 직접적이고 읽기 쉬운 통찰력이 필요할 때 사용하세요.