v19.2Latest

React 개발자 도구

React 개발자 도구를 사용하여 React컴포넌트를 검사하고,props와 state를 편집하며, 성능 문제를 식별하세요.

브라우저 확장 프로그램

React로 빌드된 웹사이트를 디버깅하는 가장 쉬운 방법은 React 개발자 도구 브라우저 확장 프로그램을 설치하는 것입니다. 여러 인기 브라우저에서 사용할 수 있습니다:

이제 React로 빌드된 웹사이트를 방문하면Components와 Profiler패널을 볼 수 있습니다.

다른 브라우저(예: Safari)의 경우,react-devtoolsnpm 패키지를 설치하세요:

다음으로 터미널에서 개발자 도구를 엽니다:

그런 다음 웹사이트의 <script> 태그를 웹사이트 <head>의 시작 부분에 추가하여 연결하세요:

이제 브라우저에서 웹사이트를 새로 고쳐 개발자 도구에서 확인하세요.

React Native로 빌드된 앱을 검사하려면 React 개발자 도구와 깊게 통합된 내장 디버거인React Native DevTools를 사용할 수 있습니다. 네이티브 요소 하이라이트 및 선택을 포함한 모든 기능이 브라우저 확장 프로그램과 동일하게 작동합니다.

React Native 버전 0.76 이전의 경우, 위의 Safari 및 기타 브라우저가이드를 따라 독립형 React DevTools 빌드를 사용하세요.