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

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

---

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

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

---

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

이 스크린 샷을보세요.

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

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

디버그하세요!

---

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

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

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

---

In the past I used GLOBAL.XMLHttpRequest hack to track my API requests but sometimes it is very slow and didn't work for assets requests. I decided to use Postman’s proxy feature to inspect HTTP communication going out from phone. For details look at the official documentation, but basically, there are three easy steps:

• Set up the proxy in Postman
• Check your computer’s IP address($ ifconfig)
• Configure HTTP proxy on your mobile device in wifi settings

---

Please be careful with this code.

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

It helps and it's great but it destroys upload. I spend 2 days trying to figure out why uploaded files are sending [object Object] instead of the real file. The reason is a code above.

Use it for regular calls not but for multipart/form-data calls

---

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

http://charlesproxy.com

---

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

참고 URL : https://stackoverflow.com/questions/33997443/how-can-i-view-network-requests-for-debugging-in-react-native