আমি কীভাবে প্রতিক্রিয়া নেটিভে নেটওয়ার্ক অনুরোধগুলি (ডিবাগিংয়ের জন্য) দেখতে পারি?

Question 1

আমাকে ডিবাগ করতে সহায়তা করতে আমি আমার নেটওয়ার্ক অনুরোধগুলি দেখতে চাই - আদর্শভাবে ক্রোমের দেবতুলগুলির 'নেটওয়ার্ক' ট্যাবে।

গিটিহাব ( https://github.com/facebook/react-native/issues/4122 এবং https://github.com/facebook/react-native/issues/934 ) এ সম্পর্কে কিছু বন্ধ সমস্যা আছে তবে আমি ' পুরোপুরি এগুলি বুঝতে পারবেন না। দেখে মনে হচ্ছে যে আমাকে নেটিভের নেটিভের কিছু পলিফিলগুলি পূর্বাবস্থায় ফিরিয়ে আনতে হবে এবং তারপরে অতিরিক্ত ডিবাগিং পতাকাগুলি সহ কয়েকটি কমান্ড চালানো উচিত এবং সম্ভবত কিছু ক্রোম সুরক্ষা সেটিংস সংশোধন করতে হবে? এবং স্পষ্টতই এটি করার সাথে সাথে কিছু সুরক্ষিত সমস্যা জড়িত রয়েছে যা এটি একটি ভয়াবহ ধারণা তৈরি করতে পারে তবে থ্রেডের সাথে জড়িত কেউই সেগুলি কী তা স্পষ্ট করে বলেননি।

নেটওয়ার্ক ট্যাবটি রিয়েক্ট নেটিভের সাথে কাজ করার জন্য, পাশাপাশি এটির সাথে জড়িত সুরক্ষা সম্পর্কিত সমস্যার ব্যাখ্যা দেওয়ার জন্য কি কেউ ধাপে ধাপে গাইড সরবরাহ করতে পারে?

Question 2

আমি এখনও নিশ্চিত নই যে কেন এখনও পর্যন্ত কেউ এই সমাধানটি দেখায়নি। নেটিভ ডিবাগারটি প্রতিক্রিয়া ব্যবহার করুন - https://github.com/jhen0409/react-native-debugger ! এটি আমার মতে প্রতিক্রিয়া নেটিভের জন্য সেরা ডিবাগিং সরঞ্জাম এবং এটি নেটওয়ার্ক পরিদর্শনটিকে বাক্সের বাইরে দেয়।

এই স্ক্রিনশটগুলি একবার দেখুন।

ডান ক্লিক করুন এবং 'নেটওয়ার্ক পরিদর্শন সক্ষম করুন' নির্বাচন করুন

ডিবাগ দূরে!

Question 3

এটি আমার অ্যাপের এন্ট্রি পয়েন্টে ব্যবহার করছি

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

XMLHttpRequest = _XHR

সম্পাদনা: ফ্রেভিব নীচে আরও সংক্ষিপ্ত সিনট্যাক্সের সাথে যুক্ত। ধন্যবাদ ফ্রভিব!

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

ব্যাখ্যা:

GLOBAL.originalXMLHttpRequestএক্সএইচআর এর ক্রোম দেব সরঞ্জাম অনুলিপি উল্লেখ করে। এটি একটি পালানোর হ্যাচ হিসাবে আরএন সরবরাহ করেছে। শ্বেতুস্যা এর সমাধান কেবল তখনই কাজ করবে যদি ডেভ সরঞ্জামগুলি খোলা থাকে এবং এইভাবে সরবরাহ করা হয় XMLHttpRequest।

সম্পাদনা: ডিবাগার মোডে থাকা অবস্থায় আপনাকে ক্রস অরিজিন অনুরোধগুলি মঞ্জুরি করতে হবে। ক্রোমের সাহায্যে আপনি এই হ্যান্ডি প্লাগইনটি ব্যবহার করতে পারেন ।

সম্পাদনা: আরএন গিতুব ইস্যু সম্পর্কে পড়ুন যা আমাকে এই সমাধানে নিয়ে যায়

Question 4

আমি আমার অ্যাপে নিম্নলিখিতটি ব্যবহার করি (এটি আপনার মূল অ্যাপ্লিকেশন.জেএস এন্ট্রি পয়েন্ট ফাইলটিতে যুক্ত করুন):

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

সর্বোত্তম বিষয়টি এটি কনসোলে আনার লগগুলিও ভাল ফর্ম্যাট করে shows

স্ক্রিনশট:

নেটওয়ার্ক ট্যাবে:

Question 5

ট্র্যাকিং নেটওয়ার্কের অনুরোধের জন্য আমি রিঅ্যাক্ট্রন ব্যবহার করি ।

Question 6

আমি জানি এটি একটি পুরানো প্রশ্ন, তবে এখনই এটি করার আরও অনেক নিরাপদ উপায় রয়েছে যার জন্য সিওআরএস অক্ষম করা বা প্রতিক্রিয়াগত নেটিভ সোর্স কোড পরিবর্তন করতে হবে না। আপনি রিয়্যাকট্রন নামে একটি তৃতীয় পক্ষের লাইব্রেরি ব্যবহার করতে পারেন যা কেবলমাত্র API কলগুলি (নেটওয়ার্ক প্লাগইন ব্যবহার করে) ট্র্যাক করে না, পাশাপাশি আপনার রেডাক্স স্টোর এবং সাগাসকে অতিরিক্ত সেটআপ সহ ট্র্যাক করতে পারে:

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

Question 7

রিএ্যাক্ট নেটিভ আমদানির পরে রিয়েল রিটিভ নেটিভ সরবরাহ করে এমন পলিফিল মুছে ফেলে আমি ক্রোমে আমার অনুরোধগুলি ডিবাগ করতে সক্ষম হয়েছি।

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

এটি একই উত্স অনুরোধের জন্য আমার জন্য কাজ করেছে। ক্রস অরিজিনের জন্য কাজ করার জন্য আপনাকে ক্রোমে সিওআরএস অক্ষম করতে হবে কিনা তা নিশ্চিত নয়।

Question 8

এই কোডটি সম্পর্কে সতর্কতা অবলম্বন করুন।

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

এটি সহায়তা করে এবং এটি দুর্দান্ত তবে এটি আপলোডকে ধ্বংস করে। আসল ফাইলের পরিবর্তে আপলোড করা ফাইলগুলি কেন [অবজেক্ট অবজেক্ট] প্রেরণ করা হচ্ছে তা জানার চেষ্টা করে আমি 2 দিন ব্যয় করি। কারণটি উপরে একটি কোড।

এটি নিয়মিত কলগুলির জন্য নয়, মাল্টিপার্ট / ফর্ম-ডেটা কলগুলির জন্য ব্যবহার করুন

Question 9

অতীতে আমি GLOBAL.XMLHttpRequestআমার এপিআই অনুরোধগুলি ট্র্যাক করতে হ্যাক ব্যবহার করতাম তবে কখনও কখনও এটি খুব ধীর হয় এবং সম্পদের অনুরোধগুলির জন্য কাজ করে না। Postman’s proxyফোন থেকে বেরিয়ে আসা এইচটিটিপি যোগাযোগের বিষয়টি পরীক্ষা করার জন্য আমি বৈশিষ্ট্যটি ব্যবহার করার সিদ্ধান্ত নিয়েছি । বিশদের জন্য অফিসিয়াল ডকুমেন্টেশনটি দেখুন তবে মূলত তিনটি সহজ পদক্ষেপ রয়েছে:

পোস্টম্যানে প্রক্সি সেট আপ করুন
আপনার কম্পিউটারের আইপি ঠিকানাটি পরীক্ষা করুন ( $ ifconfig)
আপনার মোবাইল ডিভাইসে ওয়াইফাই সেটিংসে HTTP প্রক্সি কনফিগার করুন

Question 10

আপনি যদি আপনার অ্যাপ্লিকেশনটির একটি প্রকাশ সংস্করণে নেটওয়ার্কের অনুরোধগুলি ডিবাগ করতে চান তবে আপনি লাইব্রেরিটি স্থানীয়-নেটওয়ার্ক-লগার প্রতিক্রিয়া ব্যবহার করতে পারেন । এটি আপনাকে কাস্টম ডিবাগ স্ক্রিন থেকে অ্যাপের মধ্যে নেটওয়ার্ক অনুরোধগুলি নিরীক্ষণ এবং দেখতে দেয়।

তারপরে আপনি এটিকে একটি বিল্ড ফ্ল্যাগ বা একটি জাতীয় পতাকার পিছনে উত্পাদন অ্যাপ্লিকেশনটির ব্যবহারকারীদের জন্য এটি অক্ষম রাখতে পারেন।

কেবল এটির সাথে ইনস্টল 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 />;

দাবি অস্বীকার: আমি প্যাকেজ লেখক।

Question 11

আমি আপনার নেটওয়ার্ক অনুরোধগুলি পরিদর্শন করতে চার্লস ব্যবহার করার পরামর্শ দিচ্ছি। এটি সত্যই ভাল এবং আরও দৃশ্যমানতা সরবরাহ করে এবং আপনাকে উন্নত জিনিসগুলি করার অনুমতি দেয়।

http://charlesproxy.com