স্থানীয় ওভাররাইডের সাহায্যে, আপনি ব্যাকএন্ড, তৃতীয়-পক্ষ বা API-এর জন্য অপেক্ষা না করে প্রোটোটাইপিং এবং পরিবর্তন ও সমাধান পরীক্ষা করে আপনার কর্মপ্রবাহকে আনব্লক করতে পারেন।
আপনার কাছে অ্যাক্সেস না থাকলেও দূরবর্তী সংস্থানগুলিকে উপহাস করতে স্থানীয় ওভাররাইডগুলি ব্যবহার করুন৷ আপনি অনুরোধ এবং বিভিন্ন ফাইলের প্রতিক্রিয়াগুলিকে উপহাস করতে পারেন, উদাহরণস্বরূপ, HTTP প্রতিক্রিয়া শিরোনাম এবং ওয়েব সামগ্রী , XHR এবং আনার অনুরোধগুলি সহ।
উদাহরণস্বরূপ, স্থানীয় ওভাররাইডগুলি নিম্নলিখিত ব্যবহারের ক্ষেত্রে সাহায্য করতে পারে:
- মক এপিআই এবং টেস্ট এপিআই ফিক্স করে তারা আসলে প্রোডাকশনে যাওয়ার আগে।
- নতুন UI ডিজাইন প্রোটোটাইপ করুন যদি আপনি ইতিমধ্যেই ব্যাকএন্ড ব্যবহার করতে যাচ্ছে এমন ডেটা স্ট্রাকচার জানেন।
- পরীক্ষার পারফরম্যান্স ফিক্স, উদাহরণস্বরূপ, সিএলএস বাদ দিন , আগে থেকে নিশ্চিত করুন যে সেগুলি উল্লেখযোগ্য।
স্থানীয় ওভাররাইডগুলি আপনাকে পৃষ্ঠা লোড জুড়ে DevTools-এ করা পরিবর্তনগুলি রাখতে দেয়।
এটা কিভাবে কাজ করে
- আপনি যখন DevTools-এ পরিবর্তন করেন, DevTools আপনার নির্দিষ্ট করা ফোল্ডারে পরিবর্তিত ফাইলের একটি কপি সংরক্ষণ করে।
- আপনি যখন পৃষ্ঠাটি পুনরায় লোড করেন, তখন DevTools নেটওয়ার্ক সংস্থানের পরিবর্তে স্থানীয়, পরিবর্তিত ফাইল পরিবেশন করে।
আপনি আপনার পরিবর্তনগুলি সরাসরি সোর্স ফাইলগুলিতে সংরক্ষণ করতে পারেন। ওয়ার্কস্পেসের সাথে ফাইলগুলি সম্পাদনা এবং সংরক্ষণ করুন দেখুন।
সীমাবদ্ধতা
স্থানীয় ওভাররাইডগুলি নেটওয়ার্ক প্রতিক্রিয়া শিরোনামগুলির জন্য এবং কয়েকটি ব্যতিক্রম সহ XHR এবং আনার অনুরোধ সহ বেশিরভাগ ফাইলের জন্য কাজ করে:
- স্থানীয় ওভাররাইড সক্রিয় করা হলে ক্যাশে অক্ষম করা হয়।
- DevTools এলিমেন্টস প্যানেলের DOM ট্রিতে করা পরিবর্তনগুলি সংরক্ষণ করে না।
- আপনি যদি শৈলী ফলকে CSS সম্পাদনা করেন এবং সেই CSS এর উৎস একটি HTML ফাইল হয়, তাহলে DevTools পরিবর্তনটি সংরক্ষণ করবে না।
পরিবর্তে, আপনি উৎস প্যানেলে HTML ফাইল সম্পাদনা করতে পারেন।
স্থানীয় ওভাররাইড সেট আপ করুন
আপনি এখনই নেটওয়ার্ক প্যানেলে ওয়েব সামগ্রী বা প্রতিক্রিয়া শিরোনাম ওভাররাইড করতে পারেন:
- DevTools খুলুন , নেটওয়ার্ক প্যানেলে নেভিগেট করুন, আপনি ওভাররাইড করতে চান এমন একটি অনুরোধে ডান-ক্লিক করুন, ড্রপ-ডাউন মেনু থেকে ওভাররাইড হেডার বা ওভাররাইড বিষয়বস্তু বেছে নিন।
- আপনি যদি এখনও স্থানীয় ওভাররাইড সেট-আপ না করে থাকেন, উপরের অ্যাকশন বারে, DevTools আপনাকে অনুরোধ করে:
- ওভাররাইড ফাইল সংরক্ষণ করতে একটি ফোল্ডার নির্বাচন করুন .
- DevTools এর অ্যাক্সেসের অধিকার মঞ্জুর করতে অনুমতি দিন ক্লিক করুন৷
- ওভাররাইড ফাইল সংরক্ষণ করতে একটি ফোল্ডার নির্বাচন করুন .
- আপনার যদি স্থানীয় ওভাররাইড সেট আপ করা থাকে কিন্তু অক্ষম থাকে, তাহলে DevTools স্বয়ংক্রিয়ভাবে সেগুলিকে সক্ষম করে।
একবার স্থানীয় ওভাররাইডগুলি সেট আপ এবং সক্ষম হয়ে গেলে, আপনি কি ওভাররাইড করতে চলেছেন তার উপর নির্ভর করে, DevTools আপনাকে এতে নিয়ে যায়:
- সোর্স প্যানেল যা আপনাকে ওয়েব সামগ্রীতে পরিবর্তন করতে দেয়।
- নেটওয়ার্ক > হেডার > রেসপন্স হেডারের এডিটর আপনাকে রেসপন্স হেডারে পরিবর্তন করতে দেয়।
অস্থায়ীভাবে স্থানীয় ওভাররাইডগুলি অক্ষম করতে বা সমস্ত ওভাররাইড ফাইল মুছে ফেলতে, উত্স > ওভাররাইডগুলিতে নেভিগেট করুন এবং স্থানীয় ওভাররাইড সক্ষম করুন চেকবক্সটি সাফ করুন বা যথাক্রমে সাফ করুন ক্লিক করুন৷
একটি ফোল্ডারে একটি একক ওভাররাইড ফাইল বা সমস্ত ওভাররাইড মুছে ফেলতে, উত্স > ওভাররাইডে ফাইল বা ফোল্ডারটিতে ডান-ক্লিক করুন, মুছুন নির্বাচন করুন, তারপর ডায়ালগে ঠিক আছে ক্লিক করুন। এই ক্রিয়াটি পূর্বাবস্থায় ফেরানো যাবে না এবং আপনাকে ম্যানুয়ালি মুছে ফেলা ওভাররাইডগুলি পুনরায় তৈরি করতে হবে৷
দ্রুত সমস্ত ওভাররাইড দেখতে, নেটওয়ার্ক প্যানেলে, একটি অনুরোধে ডান-ক্লিক করুন এবং সমস্ত ওভাররাইড দেখান নির্বাচন করুন। DevTools আপনাকে সোর্স > ওভাররাইডে নিয়ে যাবে।
ওয়েব কন্টেন্ট ওভাররাইড করুন
ওয়েব কন্টেন্ট ওভাররাইড করতে:
- স্থানীয় ওভাররাইড সেট আপ করুন ।
- ফাইলগুলিতে পরিবর্তন করুন এবং সেগুলি DevTools-এ সংরক্ষণ করুন।
উদাহরণস্বরূপ, আপনি এলিমেন্টস > শৈলীতে Sources বা CSS-এ ফাইল সম্পাদনা করতে পারেন, যদি না CSS HTML ফাইলে থাকে।
DevTools পরিবর্তিত ফাইলগুলি সংরক্ষণ করে, সেগুলিকে উত্স > ওভাররাইডে তালিকাভুক্ত করে এবং আপনাকে দেখায় 
প্রাসঙ্গিক প্যানেল এবং প্যানেলে ওভাররাইড করা ফাইলগুলির পাশে আইকন: উপাদান > শৈলী , নেটওয়ার্ক এবং উত্স > ওভাররাইড ।
অতিরিক্তভাবে, নেটওয়ার্ক প্যানেল ওভাররাইড করা ওয়েব সামগ্রী সহ একটি অনুরোধের প্রতিক্রিয়া ট্যাবের পাশে একটি টুলটিপ সহ একটি বেগুনি ডট আইকন দেখায়।
এক্সএইচআর ওভাররাইড করুন বা রিমোট রিসোর্সকে উপহাস করার অনুরোধ আনুন
স্থানীয় ওভাররাইডের সাথে, আপনার ব্যাকএন্ডে অ্যাক্সেসের প্রয়োজন নেই এবং আপনার পরিবর্তনগুলি সমর্থন করার জন্য এটির জন্য অপেক্ষা করতে হবে না। উপহাস এবং উড়ে পরীক্ষা:
- স্থানীয় ওভাররাইড সেট আপ করুন ।
- নেটওয়ার্কে , XHR/আনয়ন অনুরোধের জন্য ফিল্টার করুন , আপনার প্রয়োজনীয় একটি খুঁজুন, এটিতে ডান-ক্লিক করুন এবং ওভাররাইড সামগ্রী নির্বাচন করুন।
- আনা ডেটাতে আপনার পরিবর্তন করুন এবং ফাইলটি সংরক্ষণ করুন।
- পৃষ্ঠা রিফ্রেশ করুন এবং আপনার প্রয়োগ করা পরিবর্তনগুলি পর্যবেক্ষণ করুন।
এই কর্মপ্রবাহ শিখতে, নিম্নলিখিত ভিডিও দেখুন:
আপনার স্থানীয় পরিবর্তন ট্র্যাক করুন
আপনি ওয়েব বিষয়বস্তুতে করা সমস্ত পরিবর্তনের ট্র্যাক রাখতে পারেন এক জায়গায়— পরিবর্তন ড্রয়ার ট্যাব।
উপরন্তু, Sources > Overrides এ, আপনি সংরক্ষিত ফাইলটিতে ডান ক্লিক করতে পারেন এবং প্রসঙ্গ মেনু থেকে ফোল্ডারে খুলুন নির্বাচন করতে পারেন। এটি ওভাররাইড সেটআপের সময় আপনার নির্বাচিত ফোল্ডারটি খোলে। সেখানে, আপনি আপনার প্রিয় কোড সম্পাদকের সাথে ফাইলগুলি সংশোধন করতে পারেন।
HTTP প্রতিক্রিয়া শিরোনাম ওভাররাইড করুন
নেটওয়ার্ক প্যানেল থেকে, আপনি ওয়েব সার্ভারে অ্যাক্সেস ছাড়াই HTTP প্রতিক্রিয়া শিরোনামগুলি ওভাররাইড করতে পারেন।
রেসপন্স হেডার ওভাররাইডের সাথে, আপনি স্থানীয়ভাবে বিভিন্ন হেডারের জন্য প্রোটোটাইপ ফিক্স করতে পারেন, যার মধ্যে কিন্তু সীমাবদ্ধ নয়:
একটি প্রতিক্রিয়া শিরোনাম ওভাররাইড করতে:
- স্থানীয় ওভাররাইড সেট আপ করুন এবং পরিদর্শন করুন, উদাহরণস্বরূপ, এই ডেমো পৃষ্ঠা ।
- নেটওয়ার্কে যান, একটি অনুরোধ খুঁজুন, এটিতে ডান-ক্লিক করুন এবং ওভাররাইড হেডার নির্বাচন করুন। DevTools আপনাকে হেডার > রেসপন্স হেডার এডিটরে নিয়ে যায়।
একটি রেসপন্স হেডার মানের উপর হোভার করুন এবং সেখানে একটি কার্সার রাখুন।
বিকল্পভাবে, প্রতিক্রিয়া শিরোনাম সম্পাদক সক্ষম করতে, একটি প্রতিক্রিয়া শিরোনাম মানের উপর হোভার করুন এবং সম্পাদনা ক্লিক করুন।
পরিবর্তন বা একটি নতুন শিরোনাম যোগ করুন.
- একটি হেডার মান সম্পাদনা করতে, এটি ক্লিক করুন.
- একটি নতুন শিরোনাম যোগ করতে, শিরোনাম যোগ ক্লিক করুন।
- একটি হেডার ওভাররাইড সরাতে, এটির পাশে ক্লিক করুন। এটি আপনার যোগ করা শিরোনামগুলিকে সরিয়ে দেয় বা পরিবর্তিত মানগুলিকে মূল মানগুলিতে ফিরিয়ে দেয়৷
নেটওয়ার্ক প্যানেল সবুজ রঙে পরিবর্তিত শিরোনাম হাইলাইট করে এবং লাল ও ক্রস আউটে সরিয়ে দেওয়া ওভাররাইডগুলিকে হাইলাইট করে। অতিরিক্তভাবে, হেডার ট্যাবটি একটি টুলটিপ সহ একটি বেগুনি ডট আইকন দেখায় যাতে আপনাকে জানাতে পারে যে হেডারগুলি ওভাররাইড করা হয়েছে৷
পরিবর্তনগুলি প্রয়োগ করতে পৃষ্ঠাটি রিফ্রেশ করুন।
সমস্ত প্রতিক্রিয়া শিরোনাম ওভাররাইড সম্পাদনা করুন
এক জায়গায় সমস্ত হেডার ওভাররাইড সম্পাদনা করতে:
ক্লিক করুন
রেসপন্স হেডার বিভাগের পাশে .headers । 
DevTools আপনাকে উত্স > ওভাররাইডে সংশ্লিষ্ট
.headersফাইলে নিয়ে যায়।.headersফাইলটি সম্পাদনা করুন:
একটি নতুন ওভাররাইড নিয়ম যোগ করতে, ওভাররাইড নিয়ম যোগ করুন ক্লিক করুন। এখানে একটি নিয়ম হল হেডার এবং মানগুলির একটি সেট এবং সেগুলি প্রয়োগ করার জন্য একটি একক বা একাধিক অনুরোধ৷
একটি নিয়মে একটি শিরোনাম-মান জুড়ি যোগ করতে, অন্য জোড়ার উপর হোভার করুন এবং ক্লিক করুন।
একটি হেডার মান প্রত্যাবর্তন করতে, একটি যুক্ত শিরোনাম বা একটি নিয়ম সরান, এটির উপর হোভার করুন এবং ক্লিক করুন।
.headersফাইলটি Command / Control + S দিয়ে সেভ করুন।পরিবর্তনগুলি প্রয়োগ করতে পৃষ্ঠাটি রিফ্রেশ করুন।