Làm cách nào để xem các yêu cầu mạng (để gỡ lỗi) trong React Native?

Tôi muốn xem các yêu cầu mạng của mình trong React Native để giúp tôi gỡ lỗi - lý tưởng là trong tab 'Mạng' của các công cụ phát triển của Chrome.

Có một số vấn đề đã đóng về vấn đề này trên GitHub ( https://github.com/facebook/react-native/issues/4122 và https://github.com/facebook/react-native/issues/934 ) nhưng tôi không ' t hoàn toàn hiểu chúng. Có vẻ như tôi cần hoàn tác một số polyfills của React Native và sau đó chạy một số lệnh với cờ gỡ lỗi bổ sung và có thể sửa đổi một số cài đặt bảo mật của Chrome? Và rõ ràng có một số vấn đề bảo mật liên quan đến việc thực hiện điều này có thể khiến nó trở thành một ý tưởng khủng khiếp, nhưng không ai liên quan đến chuỗi này đã tuyên bố rõ ràng chúng là gì.

Ai đó có thể cung cấp hướng dẫn từng bước để làm cho tab Mạng hoạt động với React Native, cũng như giải thích về các vấn đề bảo mật liên quan đến việc làm như vậy không?

Đây là những gì tôi đang sử dụng trong điểm nhập của ứng dụng của mình

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

XMLHttpRequest = _XHR

CHỈNH SỬA: frevib được liên kết với cú pháp ngắn gọn hơn bên dưới. Cảm ơn frevib!

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

Giải trình:

GLOBAL.originalXMLHttpRequestđề cập đến bản sao XHR của Chrome Dev Tools. Nó được cung cấp bởi RN như một lối thoát hiểm. Giải pháp của Shvetusya sẽ chỉ hoạt động nếu các công cụ dành cho nhà phát triển được mở và do đó cung cấp XMLHttpRequest.

CHỈNH SỬA: Bạn sẽ cần cho phép các yêu cầu gốc chéo khi ở chế độ gỡ lỗi. Với chrome, bạn có thể sử dụng plugin tiện dụng này .

CHỈNH SỬA: Đọc về vấn đề github RN dẫn tôi đến giải pháp này

Tôi không rõ tại sao cho đến nay vẫn chưa có ai chỉ ra giải pháp này. Sử dụng React Native Debugger - https://github.com/jhen0409/react-native-debugger ! Theo ý kiến ​​của tôi, đây là công cụ gỡ lỗi tốt nhất cho React Native và nó cho phép Kiểm tra Mạng.

Hãy xem những ảnh chụp màn hình này.

Nhấp chuột phải và chọn 'Bật kiểm tra mạng'

Nhấp chuột phải và chọn 'Bật kiểm tra mạng'

Gỡ lỗi!

Tôi sử dụng phần sau trong ứng dụng của mình (Thêm phần này vào tệp điểm nhập app.js chính của bạn):

// 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;
  });
};

Điều tuyệt vời nhất là nó cũng hiển thị nhật ký tìm nạp trong bảng điều khiển cũng được định dạng tốt.

Ảnh chụp màn hình:

Trên tab mạng:

Tôi sử dụng Reactotron để theo dõi yêu cầu mạng.

Tôi biết đây là một câu hỏi cũ, nhưng có một cách an toàn hơn nhiều để làm điều này bây giờ mà không yêu cầu tắt CORS hoặc thay đổi mã nguồn React Native. Bạn có thể sử dụng thư viện bên thứ ba có tên là Reactotron không chỉ theo dõi các lệnh gọi API (sử dụng plugin mạng) mà còn có thể theo dõi cửa hàng Redux của bạn và Sagas với thiết lập bổ sung:

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

Tôi đã có thể gỡ lỗi các yêu cầu của mình trong Chrome bằng cách xóa polyfill mà React Native cung cấp sau khi nhập React Native.

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

Điều này làm việc cho tôi cho các yêu cầu xuất xứ tương tự. Không chắc bạn có cần tắt CORS trong Chrome để làm cho nó hoạt động với nguồn gốc chéo hay không.

Trước đây, tôi đã sử dụng GLOBAL.XMLHttpRequesthack để theo dõi các yêu cầu API của mình nhưng đôi khi nó rất chậm và không hoạt động đối với các yêu cầu nội dung. Tôi đã quyết định sử dụng Postman’s proxytính năng để kiểm tra giao tiếp HTTP từ điện thoại. Để biết chi tiết, hãy xem tài liệu chính thức , nhưng về cơ bản, có ba bước đơn giản:

• Thiết lập proxy trong Postman
• Kiểm tra địa chỉ IP máy tính của bạn ( $ ifconfig)
• Định cấu hình proxy HTTP trên thiết bị di động của bạn trong cài đặt Wi-Fi

Hãy cẩn thận với mã này.

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

Nó hữu ích và nó tuyệt vời nhưng nó phá hủy tải lên. Tôi dành 2 ngày để tìm hiểu lý do tại sao các tệp đã tải lên đang gửi [đối tượng Object] thay vì tệp thực. Lý do là một đoạn mã ở trên.

Sử dụng nó cho các cuộc gọi thông thường không nhưng cho các cuộc gọi đa phần / biểu mẫu-dữ liệu

Tôi khuyên bạn nên sử dụng Charles để kiểm tra các yêu cầu mạng của bạn. Nó thực sự tốt và cung cấp khả năng hiển thị nhiều hơn và cho phép bạn làm những thứ nâng cao.

http://charlesproxy.com

Nếu bạn đang tìm cách gỡ lỗi các yêu cầu mạng trên phiên bản phát hành của ứng dụng, bạn có thể sử dụng thư viện react-native-network-logger . Nó cho phép bạn theo dõi và xem các yêu cầu mạng trong ứng dụng từ màn hình gỡ lỗi tùy chỉnh.

Sau đó, bạn có thể đặt điều này sau cờ xây dựng hoặc cờ mạng để vô hiệu hóa nó cho người dùng trong ứng dụng sản xuất.

Chỉ cần cài đặt nó với yarn add react-native-network-loggersau đó thêm nó vào điểm nhập của ứng dụng của bạn:

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

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

Và điều này trên màn hình gỡ lỗi:

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

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

Tuyên bố từ chối trách nhiệm: Tôi là tác giả của gói.

Nếu bạn có điện thoại hoặc trình giả lập Android,

• npx react-native start

Sau đó, mở Android Studio .

Mở androidthư mục dự án của bạn dưới dạng Dự án Android Studio.

Nhấp vào biểu tượng màu xanh lam đó là Android Profiler

Sau khi khởi động Hồ sơ Android, bạn có thể thêm ứng dụng của mình qua biểu tượng dấu cộng màu xám gần SESSIONSnhãn

Bây giờ bạn có thể kiểm tra mạng thông qua công cụ này. Bạn có thể thấy các hình tam giác hiển thị hoạt động mạng của mình.

Vui lòng kiểm tra điều này để biết thêm thông tin về việc kiểm tra lưu lượng mạng .

Thêm Trình gỡ lỗi trong js nơi bạn có thể thấy yêu cầu hoặc phản hồi