Bagaimana cara melihat permintaan jaringan (untuk debugging) di React Native?

Saya ingin melihat permintaan jaringan saya di React Native untuk membantu saya men-debug - idealnya di tab 'Jaringan' dari devtools Chrome.

Ada beberapa masalah tertutup tentang ini di GitHub ( https://github.com/facebook/react-native/issues/4122 dan https://github.com/facebook/react-native/issues/934 ) tetapi saya tidak ' t sepenuhnya memahami mereka. Sepertinya saya perlu membatalkan beberapa polyfill React Native dan kemudian menjalankan beberapa perintah dengan flag debugging tambahan, dan mungkin mengubah beberapa pengaturan keamanan Chrome? Dan tampaknya ada beberapa masalah keamanan yang terlibat dalam melakukan ini yang mungkin menjadikannya ide yang buruk, tetapi tidak ada yang terlibat dalam utas ini yang secara eksplisit menyatakan apa itu.

Dapatkah seseorang memberikan panduan langkah demi langkah untuk membuat tab Jaringan bekerja dengan React Native, serta penjelasan tentang masalah keamanan yang terlibat dalam melakukannya?

Saya tidak yakin mengapa tidak ada yang menunjukkan solusi ini sejauh ini. Gunakan React Native Debugger - https://github.com/jhen0409/react-native-debugger ! Ini adalah alat debugging terbaik untuk React Native menurut saya dan memberikan Inspeksi Jaringan di luar kotak.

Lihatlah tangkapan layar ini.

Klik kanan dan pilih 'Enable Network Inspect'

Klik kanan dan pilih 'Enable Network Inspect'

Debug pergi!

Inilah yang telah saya gunakan di titik masuk aplikasi saya

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

XMLHttpRequest = _XHR

EDIT: frevib ditautkan ke sintaks yang lebih ringkas di bawah ini. Terima kasih frevib!

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

Penjelasan:

GLOBAL.originalXMLHttpRequestmerujuk salinan XHR Alat Dev Chrome. Ini disediakan oleh RN sebagai pintu keluar masuk. Solusi Shvetusya hanya akan berfungsi jika alat pengembang terbuka dan dengan demikian menyediakan XMLHttpRequest.

EDIT: Anda harus mengizinkan permintaan lintas sumber saat dalam mode debugger. Dengan chrome Anda dapat menggunakan plugin praktis ini .

EDIT: Baca tentang masalah github RN yang mengarahkan saya ke solusi ini

Saya menggunakan yang berikut ini di aplikasi saya (Tambahkan ini di file titik masuk app.js utama Anda):

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

Hal terbaiknya adalah ini juga menampilkan log pengambilan di konsol juga yang diformat dengan baik.

Tangkapan layar:

Di tab jaringan:

Saya menggunakan Reactotron untuk melacak permintaan jaringan.

Saya tahu ini adalah pertanyaan lama, tetapi ada cara yang jauh lebih aman untuk melakukan ini sekarang yang tidak memerlukan penonaktifan CORS atau mengubah kode sumber React Native. Anda dapat menggunakan pustaka pihak ketiga yang disebut Reactotron yang tidak hanya melacak panggilan API (menggunakan plugin jaringan), tetapi juga dapat melacak penyimpanan Redux Anda, dan Sagas dengan penyiapan tambahan:

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

Saya dapat men-debug permintaan saya di Chrome dengan menghapus polyfill yang disediakan React Native setelah mengimpor React Native.

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

Ini berhasil untuk saya untuk permintaan asal yang sama. Tidak yakin apakah Anda perlu menonaktifkan CORS di Chrome untuk membuatnya berfungsi untuk lintas sumber.

Di masa lalu saya menggunakan GLOBAL.XMLHttpRequestretas untuk melacak permintaan API saya, tetapi terkadang sangat lambat dan tidak berfungsi untuk permintaan aset. Saya memutuskan untuk menggunakan Postman’s proxyfitur untuk memeriksa komunikasi HTTP keluar dari telepon. Untuk detailnya lihat dokumentasi resminya , tetapi pada dasarnya, ada tiga langkah mudah:

• Siapkan proxy di Postman
• Periksa alamat IP komputer Anda ( $ ifconfig)
• Konfigurasikan proxy HTTP di perangkat seluler Anda dalam pengaturan wifi

Harap berhati-hati dengan kode ini.

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

Ini membantu dan bagus, tetapi merusak unggahan. Saya menghabiskan 2 hari mencoba untuk mencari tahu mengapa file yang diunggah mengirim [Objek Objek] daripada file yang sebenarnya. Alasannya adalah kode di atas.

Gunakan ini untuk panggilan biasa tidak tetapi untuk panggilan data multi bagian / formulir

Saya sarankan menggunakan Charles untuk memeriksa permintaan jaringan Anda. Ini sangat bagus dan memberikan lebih banyak visibilitas dan memungkinkan Anda melakukan hal-hal tingkat lanjut.

http://charlesproxy.com

Jika Anda ingin men-debug permintaan jaringan pada versi rilis aplikasi Anda, Anda dapat menggunakan library react-native-network-logger . Ini memungkinkan Anda memantau dan melihat permintaan jaringan dalam aplikasi dari layar debug khusus.

Anda kemudian dapat meletakkan ini di belakang bendera build atau bendera jaringan untuk menonaktifkannya bagi pengguna di aplikasi produksi.

Instal saja dengan yarn add react-native-network-loggerlalu tambahkan ini di titik masuk aplikasi Anda:

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

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

Dan ini di layar debug:

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

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

Penafian: Saya pembuat paket.

Jika Anda memiliki ponsel atau emulator android,

• npx react-native start

Kemudian buka Android Studio .

Buka androidfolder proyek Anda sebagai Proyek Android Studio.

Klik ikon biru itu yang merupakan Android Profiler

Setelah Android Profiler dimulai, Anda dapat menambahkan aplikasi Anda melalui ikon plus abu-abu di dekat SESSIONSlabel

Sekarang Anda dapat memeriksa jaringan melalui alat ini. Anda dapat melihat segitiga yang menunjukkan aktivitas jaringan Anda.

Silakan periksa ini untuk info lebih lanjut tentang memeriksa lalu lintas jaringan .

Tambahkan Debugger di js tempat Anda dapat melihat req atau respons