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

Question 1

디버그를 돕기 위해 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와 함께 작동하는 네트워크 탭을 얻는 방법에 대한 단계별 가이드와 그렇게하는 데 관련된 보안 문제에 대한 설명을 제공 할 수 있습니까?

Question 2

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

이 스크린 샷을보세요.

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

디버그하세요!

Question 3

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

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 문제에 대해 읽으십시오 .

Question 4

내 앱에서 다음을 사용합니다 (주 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;
  });
};

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

스크린 샷 :

네트워크 탭에서 :

Question 5

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

Question 6

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

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

Question 7

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

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

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

Question 8

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

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

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

답변

답변

답변

답변

답변

답변

답변