ฉันจะดูคำขอเครือข่าย (สำหรับการดีบัก) ใน React Native ได้อย่างไร

ฉันต้องการดูคำขอเครือข่ายของฉันใน React Native เพื่อช่วยฉันในการดีบัก - ควรอยู่ในแท็บ 'เครือข่าย' ของเครื่องมือพัฒนาของ Chrome

มีปัญหาปิดเกี่ยวกับเรื่องนี้ใน GitHub ( https://github.com/facebook/react-native/issues/4122และhttps://github.com/facebook/react-native/issues/934 ) แต่ฉันไม่ t เข้าใจพวกเขาทั้งหมด ดูเหมือนว่าฉันจำเป็นต้องเลิกทำ polyfills ของ React Native จากนั้นเรียกใช้คำสั่งบางอย่างด้วยแฟล็กการดีบักพิเศษและอาจแก้ไขการตั้งค่าความปลอดภัยของ Chrome และเห็นได้ชัดว่ามีปัญหาด้านความปลอดภัยบางอย่างที่เกี่ยวข้องกับการทำสิ่งนี้ซึ่งอาจทำให้เป็นความคิดที่แย่มาก แต่ไม่มีใครเกี่ยวข้องกับเธรดได้ระบุอย่างชัดเจนว่าพวกเขาคืออะไร

ใครช่วยให้คำแนะนำทีละขั้นตอนในการทำให้แท็บเครือข่ายทำงานร่วมกับ React Native ตลอดจนคำอธิบายเกี่ยวกับปัญหาด้านความปลอดภัยที่เกี่ยวข้องในการดำเนินการดังกล่าว

ฉันไม่แน่ใจว่าทำไมยังไม่มีใครชี้ให้เห็นวิธีแก้ปัญหานี้ ใช้ React Native Debugger - https://github.com/jhen0409/react-native-debugger ! เป็นเครื่องมือดีบักที่ดีที่สุดสำหรับ React Native ในความคิดของฉันและให้การตรวจสอบเครือข่ายนอกกรอบ

ดูภาพหน้าจอเหล่านี้

คลิกขวาและเลือก 'Enable Network Inspect'

คลิกขวาและเลือก 'Enable Network Inspect'

แก้จุดบกพร่อง!

นี่คือสิ่งที่ฉันใช้ในจุดเริ่มต้นของแอพของฉัน

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

XMLHttpRequest = _XHR

แก้ไข: frevib เชื่อมโยงกับไวยากรณ์ที่กระชับมากขึ้นด้านล่าง ขอบคุณ frevib!

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

คำอธิบาย:

GLOBAL.originalXMLHttpRequestหมายถึงสำเนา Chrome Dev Tools ของ XHR RN จัดทำโดย RN เป็นช่องทางหนีภัย วิธีการแก้ปัญหาของ Shvetusya จะทำงานหากเครื่องมือ dev XMLHttpRequestที่มีการเปิดและจึงให้

แก้ไข: คุณจะต้องอนุญาตคำขอข้ามแหล่งที่มาเมื่ออยู่ในโหมดดีบักเกอร์ ด้วย Chrome คุณสามารถใช้ปลั๊กอินที่มีประโยชน์นี้ได้

แก้ไข: อ่านเกี่ยวกับปัญหา 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 คุณสามารถใช้ไลบรารีของบุคคลที่สามที่เรียกว่า Reactotron ซึ่งไม่เพียง แต่ติดตามการเรียก API (โดยใช้ปลั๊กอินเครือข่าย) แต่ยังสามารถติดตามร้านค้า Redux ของคุณและ Sagas ด้วยการตั้งค่าเพิ่มเติม:

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

ฉันสามารถแก้ไขข้อบกพร่องคำขอของฉันใน Chrome ได้โดยการลบ polyfill ที่ React Native มีให้หลังจากนำเข้า React Native

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

สิ่งนี้ใช้ได้ผลสำหรับฉันสำหรับคำขอต้นทางเดียวกัน ไม่แน่ใจว่าคุณจำเป็นต้องปิดการใช้งาน CORS ใน Chrome หรือไม่เพื่อให้สามารถใช้งานข้ามแหล่งกำเนิดได้

โปรดระวังรหัสนี้

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

มันช่วยและดีมาก แต่มันทำลายการอัปโหลด ฉันใช้เวลา 2 วันในการพยายามหาสาเหตุว่าทำไมไฟล์ที่อัปโหลดจึงส่ง [object Object] แทนที่จะเป็นไฟล์จริง เหตุผลคือรหัสด้านบน

ใช้สำหรับการโทรปกติไม่ใช่ แต่สำหรับการโทรแบบหลายส่วน / แบบฟอร์มข้อมูล

ในอดีตฉันใช้GLOBAL.XMLHttpRequestแฮ็กเพื่อติดตามคำขอ API ของฉัน แต่บางครั้งก็ช้ามากและไม่ได้ผลกับคำขอเนื้อหา ฉันตัดสินใจใช้Postman’s proxyคุณสมบัติตรวจสอบการสื่อสาร HTTP ที่ออกจากโทรศัพท์ สำหรับรายละเอียดโปรดดูเอกสารอย่างเป็นทางการแต่โดยพื้นฐานแล้วมีสามขั้นตอนง่ายๆ:

• ตั้งค่าพร็อกซีในบุรุษไปรษณีย์
• ตรวจสอบที่อยู่ IP ของคอมพิวเตอร์ของคุณ ( $ ifconfig)
• กำหนดค่าพร็อกซี HTTP บนอุปกรณ์มือถือของคุณในการตั้งค่า wifi

หากคุณกำลังมองหาการร้องขอของเครือข่ายการแก้ปัญหาในรุ่นที่วางจำหน่ายแอปของคุณคุณสามารถใช้ห้องสมุดตอบสนองพื้นเมืองเครือข่ายคนตัดไม้ ช่วยให้คุณตรวจสอบและดูคำขอเครือข่ายภายในแอพจากหน้าจอดีบักที่กำหนดเอง

จากนั้นคุณสามารถวางสิ่งนี้ไว้หลังแฟล็กบิลด์หรือแฟล็กเครือข่ายเพื่อปิดใช้งานสำหรับผู้ใช้ในแอปที่ใช้งานจริง

เพียงแค่ติดตั้ง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 />;

คำเตือน: ฉันเป็นผู้เขียนแพ็คเกจ

ฉันขอแนะนำให้ใช้ Charles เพื่อตรวจสอบคำขอเครือข่ายของคุณ มันดีมากและให้การมองเห็นมากขึ้นและช่วยให้คุณทำสิ่งขั้นสูงได้

http://charlesproxy.com

หากคุณมีโทรศัพท์ Android หรือโปรแกรมจำลอง

• npx react-native start

จากนั้นเปิดAndroid Studioสตูดิโอ

เปิดandroidโฟลเดอร์ของโครงการของคุณเป็นโครงการ Android Studio

คลิกไอคอนสีน้ำเงินที่เป็นไอคอน Android Profiler

หลังจากที่ Android Profiler เริ่มต้นคุณสามารถเพิ่มแอปของคุณผ่านไอคอนSESSIONSเครื่องหมายบวกสีเทาใกล้ป้ายกำกับ

ตอนนี้คุณสามารถตรวจสอบระบบเครือข่ายผ่านเครื่องมือนี้ คุณสามารถดูรูปสามเหลี่ยมที่แสดงกิจกรรมเครือข่ายของคุณ

กรุณาตรวจสอบนี้สำหรับข้อมูลเพิ่มเติมเกี่ยวกับการตรวจสอบเครือข่ายการจราจร

เพิ่ม Debugger ใน js ที่คุณสามารถดู req หรือ response