리액트 네이티브에서 네트워크 요청(디버깅)을 보려면 어떻게 해야 합니까?

리액트 네이티브에서 네트워크 요청(디버깅)을 보려면 어떻게 해야 합니까?

Ract Native에서 네트워크 요청을 확인하여 디버깅을 돕고 싶습니다. 이상적으로는 Chrome의 개발 도구의 '네트워크' 탭에서 확인할 수 있습니다.

GitHub(https://github.com/facebook/react-native/issues/4122 및 https://github.com/facebook/react-native/issues/934) 에서 이에 대한 몇 가지 비공개 문제가 있지만 완전히 이해하지는 못합니다.리액트 네이티브의 폴리필 중 일부를 실행 취소한 다음 추가 디버깅 플래그가 있는 명령을 실행하고 크롬 보안 설정을 수정해야 할 것 같습니다.이 작업에는 몇 가지 보안 문제가 포함되어 있어 끔찍한 아이디어가 될 수 있지만, 스레드와 관련된 사람은 아무도 그것들이 무엇인지 명시적으로 언급하지 않았습니다.

React Native(원본 대응)로 네트워크 탭을 작동하는 데 필요한 보안 문제에 대한 설명과 함께 단계별 가이드를 제공할 수 있습니까?

왜 지금까지 아무도 이 해결책을 지적하지 않았는지 잘 모르겠습니다.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 복사참조니다합을본▁x▁chrome다니▁dev.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을 사용합니다.

앱의 릴리스 버전에서 네트워크 요청을 디버그하려는 경우 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 />;

고지 사항:저는 패키지 작성자입니다.

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

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

이 코드는 주의하시기 바랍니다.

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

그것은 도움이 되고 훌륭하지만 업로드를 파괴합니다.업로드된 파일이 실제 파일이 아닌 [Object Object]를 보내는 이유를 파악하기 위해 이틀을 보냅니다.그 이유는 위의 코드 때문입니다.

다중 부품/폼 데이터 통화가 아닌 일반 통화에 사용

리액트 네이티브를 가져온 후 리액트 네이티브에서 제공하는 폴리필을 삭제하여 크롬에서 요청을 디버그할 수 있었습니다.

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

이것은 동일한 원산지 요청에 대해 저에게 효과가 있었습니다.크로스 오리진에서 작동하기 위해 Chrome에서 CORS를 비활성화해야 하는지 확실하지 않습니다.

만약 당신이 안드로이드 폰이나 에뮬레이터를 가지고 있다면,

• npx react-native start

그런 다음 Android Studio를 엽니다.

.androidAndroid Studio 프로젝트의 폴더입니다.

Android Profiler인 파란색 아이콘을 클릭

에는 Android Profiler 시작에후당, 근처의 회색 플러스 을 통해 할 수 .SESSIONS꼬리표를

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

네트워크 트래픽 검사에 대한 자세한 내용은 이 항목을 확인하십시오.

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

• 우체부에서 프록시 설정
• 컴퓨터의 IP 주소를 확인합니다($ ifconfig)
• WiFi 설정에서 모바일 장치에 HTTP 프록시 구성

요즘은 플리퍼가 유행입니다.
https://fbflipper.com/

여기서 이에 대한 공식 발표:
https://devnative.dev/dev/2020/03/26/version-0.62

Charles를 사용하여 네트워크 요청을 검사할 것을 제안합니다.이것은 정말 좋고 더 많은 가시성을 제공하고 고급 작업을 수행할 수 있게 해줍니다.

http://charlesproxy.com

1. Android Studio 열기 → App Inspection → → Network Inspector에 연결할 프로세스를 선택합니다.
2. 앱 사용 및 일부 요청 실행
3. Network Inspector 시각화 클릭
4. 요청 및 응답과 함께 연결 보기 및 개요의 새 패널을 관찰합니다.

GL

내가 대답할 때, 반응형 검사기에는 모든 요청을 볼 수 있는 네트워크 섹션이 있지만, 다른 반응형 디버거 클라이언트를 사용하는 것이 좋습니다. 왜냐하면 이 클라이언트는 작은 전화 화면에서 요청을 디버그하기에는 별로 좋지 않기 때문입니다. (전화기를 흔들거나 누르면 검사기를 열 수 있습니다.)Shift + d또는Ctrl + m"Toggle Inspector" 또는 "Show Inspector"를 누릅니다.

네트워크 탭을 연 상태에서 기본 검사자 대응

[edit] 쉽게 통합할 수 있습니다.flipper기본 애플리케이션을 사용하여 장치 로그, 기본 로그, 네트워크 검사기 등의 모든 로그를 가져옵니다.플러그인을 설치하여 중복 제거 작업을 모니터링할 수 있으며, 플리퍼에 사용할 수 있는 다른 플러그인도 몇 가지 있습니다.리액트 네이티브를 위해 이 매우 편리하고 사용하기 쉬운 개발 도구를 사용하십시오.https://fbflipper.com/docs/getting-started/react-native/ [2023년 1월 10일]

[오래된 답변] 반응 네이티브 자체와 함께 제공되는 반응 네이티브 디버거를 사용해 보셨습니까?를 눌러 활성화할 수 있습니다.ctrl + M그러면 열려 있는 항목을 선택할 수 있습니다.show inspector/toggle inspector

요청 또는 응답을 볼 수 있는 js에 디버거 추가

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