React Native에서 네트워크 요청 (디버깅 용)을 어떻게 볼 수 있습니까?

디버그를 돕기 위해 React Native에서 내 네트워크 요청을보고 싶습니다. 이상적으로는 Chrome devtools의 '네트워크'탭에 있습니다.

GitHub ( https://github.com/facebook/react-native/issues/4122 및 https://github.com/facebook/react-native/issues/934 ) 에 이에 대한 몇 가지 닫힌 문제가 있지만 저는 그렇지 않습니다. t 완전히 이해합니다. React Native의 폴리 필 중 일부를 실행 취소 한 다음 추가 디버깅 플래그로 일부 명령을 실행하고 일부 Chrome 보안 설정을 수정해야하는 것 같습니다. 그리고 분명히 끔찍한 아이디어가 될 수있는 보안 문제가 몇 가지 있지만 스레드에 관련된 사람은 그게 무엇인지 명시 적으로 언급하지 않았습니다.

누군가가 React Native와 함께 작동하는 네트워크 탭을 얻는 방법에 대한 단계별 가이드와 그렇게하는 데 관련된 보안 문제에 대한 설명을 제공 할 수 있습니까?

지금까지 아무도이 솔루션을 지적하지 않은 이유를 잘 모르겠습니다. 사용은 기본 디버거 반응 - https://github.com/jhen0409/react-native-debugger ! 제 생각에는 React Native에 대한 최고의 디버깅 도구이며 네트워크 검사를 즉시 제공합니다.

이 스크린 샷을보세요.

마우스 오른쪽 버튼을 클릭하고 '네트워크 검사 활성화'를 선택합니다.

마우스 오른쪽 버튼을 클릭하고 '네트워크 검사 활성화'를 선택합니다.

디버그하세요!

이것은 내 앱의 진입 점에서 사용하고있는 것입니다.

const _XHR = GLOBAL.originalXMLHttpRequest ?  
    GLOBAL.originalXMLHttpRequest :           
    GLOBAL.XMLHttpRequest                     

XMLHttpRequest = _XHR

편집 : frevib은 아래의 더 간결한 구문에 연결되었습니다. 감사합니다 frevib!

GLOBAL.XMLHttpRequest = GLOBAL.originalXMLHttpRequest || GLOBAL.XMLHttpRequest;

설명:

GLOBAL.originalXMLHttpRequestXHR의 Chrome Dev Tools 사본을 나타냅니다. RN에서 탈출구로 제공합니다. Shvetusya의 솔루션은 개발 도구가 열려 있고 XMLHttpRequest.

편집 : 디버거 모드에서 원본 간 요청을 허용해야합니다. 크롬을 사용 하면이 편리한 플러그인을 사용할 수 있습니다 .

편집 : 이 솔루션으로 이끄는 RN github 문제에 대해 읽으십시오 .

내 앱에서 다음을 사용합니다 (주 app.js 진입 점 파일에 추가).

// To see all the requests in the chrome Dev tools in the network tab.
XMLHttpRequest = GLOBAL.originalXMLHttpRequest ?
    GLOBAL.originalXMLHttpRequest :
    GLOBAL.XMLHttpRequest;

  // fetch logger
global._fetch = fetch;
global.fetch = function (uri, options, ...args) {
  return global._fetch(uri, options, ...args).then((response) => {
    console.log('Fetch', { request: { uri, options, ...args }, response });
    return response;
  });
};

가장 좋은 점은 잘 형식화 된 가져 오기 로그도 콘솔에 표시한다는 것입니다.

스크린 샷 :

네트워크 탭에서 :

네트워크 요청을 추적 하기 위해 Reactotron 을 사용 합니다.

이것은 오래된 질문이라는 것을 알고 있지만 CORS를 비활성화하거나 React Native 소스 코드를 변경할 필요가없는 훨씬 더 안전한 방법이 있습니다. API 호출 (네트워크 플러그인 사용)을 추적 할뿐만 아니라 추가 설정으로 Redux 스토어 및 Sagas를 추적 할 수있는 Reactotron이라는 타사 라이브러리를 사용할 수 있습니다.

https://github.com/infinitered/reactotron https://github.com/infinitered/reactotron/blob/master/docs/plugin-networking.md

React Native를 가져온 후 React Native가 제공하는 polyfill을 삭제하여 Chrome에서 요청을 디버깅 할 수있었습니다.

var React = require('react-native');
delete GLOBAL.XMLHttpRequest;

이것은 동일한 출처 요청에 대해 저에게 효과적이었습니다. 교차 출처에서 작동하도록 Chrome에서 CORS를 비활성화해야하는지 확실하지 않습니다.

과거에는 GLOBAL.XMLHttpRequestAPI 요청을 추적하기 위해 해킹을 사용 했지만 때로는 매우 느리고 자산 요청에 대해 작동하지 않았습니다. Postman’s proxy전화에서 나가는 HTTP 통신을 검사 하는 기능 을 사용하기로 결정했습니다 . 자세한 내용은 공식 문서 를 참조하십시오 .하지만 기본적으로 세 가지 간단한 단계가 있습니다.

• Postman에서 프록시 설정
• 컴퓨터의 IP 주소 ( $ ifconfig) 확인
• Wi-Fi 설정에서 모바일 장치에 HTTP 프록시 구성

이 코드에주의하십시오.

XMLHttpRequest = GLOBAL.originalXMLHttpRequest ?
   GLOBAL.originalXMLHttpRequest : GLOBAL.XMLHttpRequest;

도움이되고 훌륭하지만 업로드를 파괴합니다. 업로드 된 파일이 실제 파일 대신 [object Object]를 보내는 이유를 파악하기 위해 이틀을 보냈습니다. 그 이유는 위의 코드입니다.

일반 호출에는 사용하지 말고 multipart / form-data 호출에 사용하십시오.

Charles를 사용하여 네트워크 요청을 검사하는 것이 좋습니다. 정말 훌륭하고 더 많은 가시성을 제공하며 고급 작업을 수행 할 수 있습니다.

http://charlesproxy.com

앱의 릴리스 버전에서 네트워크 요청을 디버그하려는 경우 react-native-network-logger 라이브러리를 사용할 수 있습니다 . 사용자 지정 디버그 화면에서 앱 내의 네트워크 요청을 모니터링하고 볼 수 있습니다.

그런 다음이를 빌드 플래그 또는 네트워크 플래그 뒤에 배치하여 프로덕션 앱의 사용자에 대해 비활성화 할 수 있습니다.

로 설치 yarn add react-native-network-logger한 다음 앱의 진입 점에 다음을 추가하십시오.

import { startNetworkLogging } from 'react-native-network-logger';

startNetworkLogging();
AppRegistry.registerComponent('App', () => App);

그리고 이것은 디버그 화면에서 :

import NetworkLogger from 'react-native-network-logger';

const MyScreen = () => <NetworkLogger />;

면책 조항 : 저는 패키지 작성자입니다.

안드로이드 폰이나 에뮬레이터가 있다면

• npx react-native start

그런 다음 Android Studio를 엽니 다 .

android프로젝트 의 폴더를 Android Studio 프로젝트로 엽니 다 .

Android Profiler 인 파란색 아이콘을 클릭하십시오.

Android 프로파일 러가 시작된 후 SESSIONS레이블 근처에있는 회색 더하기 아이콘을 통해 앱을 추가 할 수 있습니다.

이제이 도구를 통해 네트워킹을 검사 할 수 있습니다. 네트워크 활동을 보여주는 삼각형을 볼 수 있습니다.

네트워크 트래픽 검사에 대한 자세한 내용은 여기를 확인하십시오 .

요청 또는 응답을 볼 수있는 js에 디버거를 추가하십시오.