6 개의 원시를 디버깅하기위한 도구

키 테이크 아웃

디버깅은 소프트웨어 개발의 중요한 부분으로, 문제가 생산되기 전에 문제를 식별하고 해결하는 데 도움이됩니다. React Native World에는 디버깅에 사용할 수있는 몇 가지 도구가 있으며 각각 다른 환경과 문제에 적합합니다. 가장 일반적으로 사용되는 도구에는 개발자 메뉴, 옐로우 박스 및 레드 박스, Chrome의 DevTools, React Developer Tools, React Native Debugger 및 React Native CLI가 포함됩니다. 각 도구는 오류 및 경고 표시, 라이브 재 장전 활성화, UI 요소 검사 등과 같은 고유 한 기능을 제공합니다. React Native Debugger는 React Native 앱에서 Redux를 사용하는 사람들에게 특히 유용한 도구입니다. Redux의 DevTools와 React의 개발자 도구를 한 곳에 통합하여 디버깅 프로세스를보다 효율적으로 만드는 독립형 데스크탑 앱입니다. React Native CLI는 디버깅에도 사용될 수 있으므로 앱의 로그를 표시하고 앱에서 사용중인 라이브러리 및 종속성에 대한 관련 정보를 얻을 수 있습니다. 이는 버전 불일치로 인한 버그를 고치는 데 특히 도움이 될 수 있습니다.

디버깅은 소프트웨어 개발의 필수 부분입니다. 우리가 무엇이 잘못되었는지, 무엇이 옳은지, 작동하는 것과 그렇지 않은 것을 알고 있다는 것은 디버깅을 통해입니다. 디버깅은 코드를 평가하고 문제가 생산을 추진하기 전에 문제를 해결할 수있는 기회를 제공합니다.

• React Native World에서는 React Native가 다른 환경 (iOS 및 Android)으로 구성되어 있기 때문에 디버깅은 다양한 방식으로 다른 도구로 수행 될 수 있습니다. 즉, 디버깅에 필요한 다양한 문제와 다양한 도구가 있음을 의미합니다. . React Native Ecosystem의 많은 기여자 덕분에 많은 디버깅 도구를 사용할 수 있습니다. 이 간단한 가이드에서는 개발자 메뉴로 시작하여 가장 일반적으로 사용되는 것을 탐색 할 것입니다.
디버깅은 처음에 코드를 작성하는 것보다 두 배나 어렵습니다. 따라서 가능한 한 영리하게 코드를 작성하면 정의상 디버깅 할만 큼 똑똑하지 않습니다. - Brian W. Kernighan
개발자 메뉴
인앱 개발자 메뉴는 React Native 디버깅을위한 첫 번째 게이트이며, 다른 일을하는 데 사용할 수있는 많은 옵션이 있습니다. 각 옵션을 분해합시다.
• Reload : 앱 를 다시로드합니다 디버그 JS 원격 : 채널을 JavaScript 디버거로 엽니 다 라이브 재 장전 활성화 : 저장을 클릭 할 때 앱을 자동으로 다시로드합니다. hot Reloading 활성화 : 변경된 파일에서 발생하는 변경 사항 토글 검사관 : 검사관 인터페이스를 전환하여 화면 및 속성의 UI 요소를 검사 할 수 있으며 네트워킹과 같은 다른 탭이있는 선물 및 인터페이스, HTTP 호출 및 성능 탭을 보여줍니다.
  옐로우 박스 및 레드 박스
  레드 박스는 오류를 표시하는 데 사용됩니다. 앱이 오류를 던질 때마다 빨간 박스와 오류에 대한 설명이 표시됩니다. Console.error를 작성하여 언제든지 표시 할 수 있습니다. 그러나 생산에서는 작동하지 않으므로 해당 환경에서 오류가 발생하면 앱이 충돌하여 실행 중지됩니다. 레드 박스는 당신의 친구입니다. 유용한 점 중 하나는 오류를 표시하고 콘솔에서 찾을 수없는 오류를 고치는 방법에 대한 제안을 제공한다는 것입니다. 예를 들어, React Native가 지원하지 않는 스타일 속성 또는 특정 요소에 사용되는 속성 (뷰 요소에 대한 역 제어를 설정하는 것)을 자주 작성합니다. Redbox에는 오류가 발생하지만보기에 적용 할 수있는 지원되는 스타일 속성 목록도 표시됩니다.
  옐로우 박스는 경고를 표시하는 데 사용됩니다. 앱의 루트 디렉토리에 아래에 표시된 코드 라인을 추가하여 비활성화 할 수 있습니다. 그러나 옐로우 박스는 매우 유용하기 때문에 권장되지 않습니다. 그들은 성능 문제 및 더 이상 사용되지 않은 코드와 같은 것에 대해 경고합니다. React-Native의 Yellowbox 요소를 사용하여 특정 경고를 표시 할 수 있습니다.
  대부분의 옐로우 박스 경고는 코드의 나쁜 관행과 관련이 있습니다. 예를 들어, 구성 요소가 마운트를 해제 할 때 제거하지 않는 EventListener가 있거나 이와 같은 기능과 종속성이 더 이상 사용되지 않는다는 경고를받을 수 있습니다.
  이러한 문제를 해결하면 많은 버그를 방지하고 코드의 품질을 향상시킬 수 있습니다. 공식 문서의 디버깅 React Native에 대해 항상 더 배울 수 있습니다. 크롬의 데트 툴 크롬은 아마도 React Native 디버깅에 대한 첫 번째 도구 일 것입니다. Chrome의 DevTools를 사용하여 웹 앱을 디버그하는 것이 일반적이지만 JavaScript로 구동되는 원시를 디버깅하는 데 사용할 수도 있습니다. Chrome의 DevTools를 React Native와 함께 사용하려면 먼저 동일한 Wi-Fi에 연결되어 있는지 확인한 다음 MacOS를 사용하는 경우 명령 를 누르십시오. Windows/Linux에서 🎜> ctrl m . 개발자 메뉴가 나타나면 디버그 JS를 원격으로 선택하십시오. 기본 JS 디버거가 열립니다. 그런 다음이 주소 http : // localhost : 8081/debugger-ui/in Chrome을 확인하십시오. 이 페이지를 볼 수 있습니다 : 안드로이드에서 문제 해결을해야 할 수도 있습니다

  이 문제를 해결하려면이 문제를 해결하려면 컴퓨터와 장치가 동일한 Wi-Fi에 연결되어 있는지 확인한 다음 Android/app/src/main/androidmanifest.xml에 Android를 추가하십시오. 이것이 효과가 없다면 다른 솔루션에 대해서는 링크를 확인하십시오. 스택 오버플로 github

  크롬에 성공적으로 연결 한 후에는 크롬 검사관을 간단히 전환 할 수 있습니다.

  그런 다음 React Native 앱의 로그를 살펴보십시오. 또한 Chrome의 DevTools가 제공하는 다른 기능을 살펴보고 웹 앱과 마찬가지로 React Native와 함께 사용하십시오. Chrome의 DevTools를 React Native와 함께 사용하는 한계 중 하나는 스타일을 디버깅하고 웹 앱을 디버깅 할 때와 같이 스타일 속성을 편집 할 수 없다는 것입니다. React의 구성 요소 계층을 검사 할 때 React의 DevTools와 비교할 때 제한적입니다. 반응 개발자 도구 REACT의 개발자 도구를 사용하여 기본 반응을 디버그하려면 데스크탑 앱을 사용해야합니다. 다음 명령을 실행하여 프로젝트에 전 세계 또는 로컬로 설치할 수 있습니다. 또는 npm :

  그런 다음 원사 React-Devtools를 실행하여 앱을 시작하여 앱을 시작합니다.

  React의 개발자 도구는 다음 두 가지 이유로 React Native 디버깅에 가장 적합한 도구 일 수 있습니다. 는 디버깅 반응 구성 요소를 허용합니다 는 React Native (이 개발자 도구에서 내가 가장 좋아하는 기능!)에서 스타일을 디버그 할 수 있습니다. 새 버전에는 개발자 메뉴의 Inspector 와도 작동하는이 기능이 함께 제공됩니다. 이전에는 스타일을 작성하고 앱이 변경 사항을 다시로드 할 때까지 기다려야합니다. 이제 우리는 앱을 다시로드하지 않고 스타일 속성을 디버깅하고 구현하고 변경의 효과를 즉시 볼 수 있습니다.

  React의 개발자 도구 앱 사용에 대해 자세히 알아볼 수 있습니다. 반응 네이티브 디버거
  React Native 앱에서 Redux를 사용하는 경우 React Native Debugger가 아마도 올바른 디버거 일 것입니다. MacOS, Windows 및 Linux에서 작동하는 독립형 데스크탑 앱입니다. Redux의 DevTools와 React의 개발자 도구를 하나의 앱에 통합하므로 디버깅을 위해 두 개의 별도 앱으로 작업 할 필요가 없습니다. React Native Debugger는 제가 가장 좋아하는 디버거이며 React Native와 함께 작업하는 데 일반적으로 사용하는 디버거입니다. Redux 로그와 동작을 볼 수있는 Redux의 DevTools에 대한 인터페이스와 React 요소를 검사하고 디버그 할 수있는 React 개발자 도구를위한 인터페이스가 있습니다. 여기에서 설치 지침을 찾을 수 있습니다. Chrome의 검사관을 여는 것과 같은 방식 으로이 디버거와 연결할 수 있습니다.

  Chrome의 DevTools를 통해 React Native Debugger를 사용하면 몇 가지 장점이 있습니다. 예를 들어, Dev 메뉴에서 검사관을 전환하여 Chrome의 DevTools에서 사용할 수없는 React Native Elements 및 편집 스타일을 검사 할 수 있습니다. 반응 네이티브 클리 당신은 React Native CLI를 사용하여 디버깅을 수행 할 수 있습니다. 앱의 로그를 표시하는 데 사용할 수 있습니다. 반응-네이티브 로그 안드로이드를 치는 데 Android에서 DB Logcat의 로그를 표시하고 iOS의 로그를 볼 수 있으려면 React Native Log-Ios를 실행할 수 있으며 Console.log를 사용하면 터미널에 로그를 발송할 수 있습니다. >

  그런 다음 터미널의 로그를 봐야합니다
  반응 원시 CLI를 사용하여 터미널에서 React Native 정보를 실행하여 라이브러리 및 앱에서 사용중인 종속성에 대한 관련 정보를 얻을 수 있습니다. 사용중인 도구에 대한 유용한 정보를 보여줍니다. 예를 들어, 다음은 반응성 정보를 실행할 때 출력의 예입니다.
  이 정보를 사용하여 프로젝트에서 사용중인 도구의 버전 불일치로 인한 버그를 수정할 수 있으므로이 명령을 사용하여 환경 정보를 확인하는 것이 좋습니다.

  요약 우리가 여기에서 본 것 외에도 React Native를 디버깅하기위한 많은 도구가 있습니다. 실제로 프로젝트의 특정 요구에 달려 있습니다. 나는 Redux와 종종 작업하기 때문에 주로 React Native Debugger 데스크탑을 사용하며, 하나의 앱에서 다양한 도구를 결합하고 시간을 절약 할 수 있습니다. React Native를 디버그하는 도구에 대해 더 많이 이야기하고 일반적으로 React Native에 대해 더 많이 이야기하고 싶다면 트위터에서 나를 때려주세요. 나는 당신의 의견을 듣고 싶습니다!

  React Native의 디버깅에 대한 자주 묻는 질문 (FAQ) React Native에서 디버깅을위한 가장 좋은 도구는 무엇입니까?
  React Native에서 디버깅 할 수있는 몇 가지 도구가 있습니다. 가장 인기있는 것 중 일부에는 React Native Debugger, Reactotron 및 Flipper가 포함됩니다. React Native Debugger는 React DevTools와 Redux DevTools를 결합한 독립형 앱입니다. React 구성 요소 계층, Redux Store 및 Dispatch 동작을 검사 할 수 있습니다. 반면에 Reactotron은 Redux 또는 Mobx-State-Tree 응용 프로그램 상태를 검사 할 수있는 데스크탑 응용 프로그램입니다. Flipper는 모바일 앱을 디버깅하는 플랫폼입니다. 앱의 여러 부분을 디버깅하는 데 도움이되는 플러그인을 설치할 수있는 시장이 있습니다.

  React Native에서 네트워크 요청을 디버그하려면 어떻게해야합니까?

  네트워크 요청은 React Native에서 디버깅 될 수 있습니다. 플리퍼 또는 원자로와 같은 도구를 사용합니다. 이 도구를 사용하면 앱에서 만든 모든 네트워크 요청을보고 세부 사항을 검사하며 응답을 수정할 수 있습니다. React Native Debugger에서 내장 네트워크 검사관을 사용할 수도 있습니다.

  React Native의 레이아웃 문제를 어떻게 디버그 할 수 있습니까? React Native의 레이아웃 문제는 Inspector Tool을 사용하여 디버깅 할 수 있습니다. 기본 디버거를 반응합니다. 이 도구를 사용하면 화면에서 구성 요소를 선택하고 레이아웃, 스타일 및 소품을 검사 할 수 있습니다. Flipper에서 레이아웃 검사관을 사용할 수도 있습니다. 이는 비슷한 기능을 제공합니다.
  React Native의 성능 문제를 어떻게 디버그 할 수 있습니까?
  React Native의 성능 문제는 성능 모니터를 사용하여 디버깅 할 수 있습니다. React Native에 내장되었습니다. 이 도구는 FPS (초당 프레임), RAM 사용 및 CPU 사용과 같은 앱의 성능에 대한 실시간 통계를 제공합니다. React DevTools의 프로파일 러를 사용하여 React 구성 요소가 얼마나 자주 렌더링하고 렌더링하는 원인을 측정 할 수 있습니다.

  REACT Native에서 Redux 상태를 어떻게 디버그 할 수 있습니까?

  redux 상태 Redux DevTools를 사용하여 React Native를 디버깅 할 수 있습니다. 이 도구를 사용하면 모든 상태 및 액션 페이로드를 검사 할 수 있으며 "취소"작업을 통해 시간을 거슬러 올라갈 수 있습니다. Redux DevTools를 독립형 앱으로 사용하거나 React Native Debugger 또는 Reactotron에 통합 할 수 있습니다.

  React Native의 기본 코드를 어떻게 디버그 할 수 있습니까?
  React Native Can의 기본 코드 플랫폼 별 도구를 사용하여 디버깅해야합니다. Android의 경우 Android Studio의 내장 디버거를 사용할 수 있습니다. iOS의 경우 Xcode의 내장 디버거를 사용할 수 있습니다. 이 도구는 브레이크 포인트를 설정하고, 코드를 진행하고, 변수를 검사 할 수 있습니다.

  React Native에서 메모리 누출을 어떻게 디버그 할 수 있습니까?

  메모리의 메모리 누출은 메모리 프로파일 러를 사용하여 디버깅 될 수 있습니다. 플리퍼 또는 원시 디버거에서. 이 도구는 앱의 메모리 사용에 대한 정보를 제공하며 제대로 정리되지 않은 구성 요소를 식별하는 데 도움이 될 수 있습니다. React Native에서 비동기 코드를 디버깅 할 수있는 방법은 무엇입니까?

  React Native의 비동기 코드는 비동기 스토리지를 사용하여 디버깅 할 수 있습니다. 이를 통해 앱의 일련의 동작 및 상태 변경 사항을 볼 수 있으므로 상황이 잘못되는 위치를 식별하는 데 도움이됩니다. Async Storage 추적을위한 기능을 제공하는 Reactotron과 같은 도구를 사용할 수 있습니다.

  React Native에서 애니메이션을 디버그하는 방법은 무엇입니까?

  React Native의 애니메이션은 React의 애니메이션 검사관을 사용하여 디버깅 할 수 있습니다. 기본 디버거. 이 도구를 사용하면 시간이 지남에 따라 변화 할 때 애니메이션 속성의 값을 볼 수 있습니다. 성능 모니터를 사용하여 애니메이션의 FPS를 확인할 수도 있습니다.

  React Native의 충돌을 어떻게 디버그 할 수 있습니까?
  React Native의 충돌은 Sentry 또는 Sentry 또는 Sentry 또는 Crash보고 도구를 사용하여 디버깅 할 수 있습니다. Crashlytics. 이 도구는 사용자로부터 실시간으로 충돌 보고서를 수집하여 충돌로 이어지는 일을 정확하게 볼 수 있습니다. 자세한 스택 추적, 장치 정보 및 사용자 작업을 제공합니다.

위 내용은 6 개의 원시를 디버깅하기위한 도구의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!