স্থানীয় ওভাররাইডের সাহায্যে, আপনি ব্যাকএন্ড, তৃতীয় পক্ষ বা API-এর সমর্থনের জন্য অপেক্ষা না করেই পরিবর্তন এবং সংশোধনগুলি প্রোটোটাইপ এবং পরীক্ষা করে আপনার কর্মপ্রবাহকে আনব্লক করতে পারেন।
আপনার কাছে রিমোট রিসোর্সগুলিতে অ্যাক্সেস না থাকলেও স্থানীয় ওভাররাইড ব্যবহার করে সেগুলোকে নকল করুন। আপনি অনুরোধ এবং বিভিন্ন ফাইলের প্রতিক্রিয়াগুলিকে নকল করতে পারেন, উদাহরণস্বরূপ, HTTP প্রতিক্রিয়া শিরোনাম এবং ওয়েব সামগ্রী , যার মধ্যে XHR এবং ফেচ অনুরোধ অন্তর্ভুক্ত রয়েছে।
উদাহরণস্বরূপ, স্থানীয় ওভাররাইডগুলি নিম্নলিখিত ব্যবহারের ক্ষেত্রে সাহায্য করতে পারে:
- উৎপাদনে যাওয়ার আগে API সংশোধনের নকল করুন এবং API সংশোধন পরীক্ষা করুন।
- ব্যাকএন্ড যে ডেটা স্ট্রাকচার ব্যবহার করবে তা যদি আপনার ইতিমধ্যেই জানা থাকে, তাহলে নতুন UI ডিজাইনের প্রোটোটাইপ তৈরি করুন।
- উদাহরণস্বরূপ, পরীক্ষার কর্মক্ষমতা সংশোধনগুলি CLS বাদ দেয় , যাতে আগে থেকেই নিশ্চিত করা যায় যে সেগুলি উল্লেখযোগ্য।
লোকাল ওভাররাইডের মাধ্যমে আপনি DevTools-এ করা পরিবর্তনগুলি পৃষ্ঠা লোডের সময়ও রাখতে পারবেন।
কিভাবে এটা কাজ করে
- যখন আপনি DevTools-এ পরিবর্তন করেন, তখন DevTools আপনার নির্দিষ্ট করা ফোল্ডারে পরিবর্তিত ফাইলের একটি কপি সংরক্ষণ করে।
- যখন আপনি পৃষ্ঠাটি পুনরায় লোড করেন, তখন DevTools নেটওয়ার্ক রিসোর্সের পরিবর্তে স্থানীয়, পরিবর্তিত ফাইলটি পরিবেশন করে।
আপনি আপনার পরিবর্তনগুলি সরাসরি সোর্স ফাইলগুলিতে সংরক্ষণ করতে পারেন। Workspaces দিয়ে ফাইলগুলি সম্পাদনা এবং সংরক্ষণ করুন দেখুন।
সীমাবদ্ধতা
স্থানীয় ওভাররাইডগুলি নেটওয়ার্ক রেসপন্স হেডার এবং XHR এবং ফেচ রিকোয়েস্ট সহ বেশিরভাগ ফাইল প্রকারের জন্য কাজ করে, কয়েকটি ব্যতিক্রম ছাড়া:
- স্থানীয় ওভাররাইড সক্রিয় থাকলে ক্যাশে অক্ষম থাকে।
- DevTools এলিমেন্টস প্যানেলের DOM ট্রিতে করা পরিবর্তনগুলি সংরক্ষণ করে না।
- যদি আপনি Styles প্যানে CSS সম্পাদনা করেন, এবং সেই CSS এর উৎস একটি HTML ফাইল হয়, তাহলে DevTools পরিবর্তনটি সংরক্ষণ করবে না।
পরিবর্তে, আপনি সোর্স প্যানেলে HTML ফাইলগুলি সম্পাদনা করতে পারেন।
স্থানীয় ওভাররাইড সেট আপ করুন
আপনি নেটওয়ার্ক প্যানেলে সরাসরি ওয়েব কন্টেন্ট বা প্রতিক্রিয়া শিরোনাম ওভাররাইড করতে পারেন:
- DevTools খুলুন , Network প্যানেলে যান, আপনি যে অনুরোধটি ওভাররাইড করতে চান তাতে ডান-ক্লিক করুন, ড্রপ-ডাউন মেনু থেকে ওভাররাইড হেডার বা ওভাররাইড কন্টেন্ট বেছে নিন।
- যদি আপনি এখনও স্থানীয় ওভাররাইড সেট আপ না করে থাকেন, তাহলে উপরের অ্যাকশন বারে, DevTools আপনাকে নিম্নলিখিতগুলি করতে অনুরোধ করবে:
- ওভাররাইড ফাইলগুলি সংরক্ষণ করার জন্য একটি ফোল্ডার নির্বাচন করুন ।
- DevTools-কে অ্যাক্সেসের অধিকার দিতে Allow- এ ক্লিক করুন।
- ওভাররাইড ফাইলগুলি সংরক্ষণ করার জন্য একটি ফোল্ডার নির্বাচন করুন ।
- যদি আপনার স্থানীয় ওভাররাইড সেট আপ করা থাকে কিন্তু অক্ষম থাকে, তাহলে DevTools স্বয়ংক্রিয়ভাবে সেগুলি সক্ষম করে।
একবার স্থানীয় ওভাররাইড সেট আপ এবং সক্ষম হয়ে গেলে, আপনি কী ওভাররাইড করতে চলেছেন তার উপর নির্ভর করে, DevTools আপনাকে এখানে নিয়ে যাবে:
- সোর্স প্যানেল যা আপনাকে ওয়েব কন্টেন্টে পরিবর্তন করতে সাহায্য করবে।
- নেটওয়ার্ক > হেডার > রেসপন্স হেডারের এডিটর যা আপনাকে রেসপন্স হেডারে পরিবর্তন করতে সাহায্য করবে।
স্থানীয় ওভাররাইডগুলি সাময়িকভাবে অক্ষম করতে বা সমস্ত ওভাররাইড ফাইল মুছে ফেলতে, Sources > Overrides- এ নেভিগেট করুন এবং Enable Local Overrides চেকবক্সটি সাফ করুন অথবা যথাক্রমে Clear এ ক্লিক করুন।
একটি ফোল্ডারে একটি একক ওভাররাইড ফাইল বা সমস্ত ওভাররাইড মুছে ফেলতে, Sources > Overrides এ ফাইল বা ফোল্ডারে ডান-ক্লিক করুন, Delete নির্বাচন করুন, তারপর ডায়ালগে OK ক্লিক করুন। এই ক্রিয়াটি পূর্বাবস্থায় ফেরানো যাবে না এবং আপনাকে মুছে ফেলা ওভাররাইডগুলি ম্যানুয়ালি পুনরায় তৈরি করতে হবে।
দ্রুত সমস্ত ওভাররাইড দেখতে, নেটওয়ার্ক প্যানেলে, একটি অনুরোধে ডান-ক্লিক করুন এবং সমস্ত ওভাররাইড দেখান নির্বাচন করুন। DevTools আপনাকে Sources > Overrides এ নিয়ে যাবে।
ওয়েব কন্টেন্ট ওভাররাইড করুন
ওয়েব কন্টেন্ট ওভাররাইড করতে:
- স্থানীয় ওভাররাইড সেট আপ করুন ।
- ফাইলগুলিতে পরিবর্তন করুন এবং DevTools-এ সেভ করুন।
উদাহরণস্বরূপ, আপনি Sources এ ফাইল সম্পাদনা করতে পারেন অথবা Elements > Styles এ CSS এ ফাইল সম্পাদনা করতে পারেন, যদি না CSS HTML ফাইলে থাকে।
DevTools পরিবর্তিত ফাইলগুলি সংরক্ষণ করে, Sources > Overrides এ তালিকাভুক্ত করে এবং আপনাকে দেখায় 
প্রাসঙ্গিক প্যানেল এবং প্যানে ওভাররাইড করা ফাইলের পাশে আইকন: এলিমেন্টস > স্টাইলস , নেটওয়ার্ক এবং সোর্স > ওভাররাইডস ।
অতিরিক্তভাবে, নেটওয়ার্ক প্যানেলে ওভাররাইড করা ওয়েব কন্টেন্ট সহ একটি অনুরোধের রেসপন্স ট্যাবের পাশে একটি টুলটিপ সহ একটি বেগুনি বিন্দু আইকন দেখানো হয়।
XHR ওভাররাইড করুন অথবা রিমোট রিসোর্সগুলিকে নকল করার জন্য অনুরোধগুলি আনুন
লোকাল ওভাররাইডের মাধ্যমে, আপনার ব্যাকএন্ডে অ্যাক্সেসের প্রয়োজন হবে না এবং আপনার পরিবর্তনগুলি সমর্থন করার জন্য এটির জন্য অপেক্ষা করতে হবে না। তাৎক্ষণিকভাবে নকল করুন এবং পরীক্ষা করুন:
- স্থানীয় ওভাররাইড সেট আপ করুন ।
- নেটওয়ার্কে , XHR/fetch অনুরোধগুলির জন্য ফিল্টার করুন , আপনার প্রয়োজনীয় একটি খুঁজুন, এটিতে ডান-ক্লিক করুন এবং Override content নির্বাচন করুন।
- আনা তথ্যে আপনার পরিবর্তনগুলি করুন এবং ফাইলটি সংরক্ষণ করুন।
- পৃষ্ঠাটি রিফ্রেশ করুন এবং আপনার প্রয়োগ করা পরিবর্তনগুলি পর্যবেক্ষণ করুন।
এই কর্মপ্রণালীটি শিখতে, নিম্নলিখিত ভিডিওটি দেখুন:
আপনার স্থানীয় পরিবর্তনগুলি ট্র্যাক করুন
আপনি ওয়েব কন্টেন্টে করা সমস্ত পরিবর্তনের উপর নজর রাখতে পারেন এক জায়গায়— চেঞ্জেস ড্রয়ার ট্যাবে।
অতিরিক্তভাবে, Sources > Overrides এ, আপনি সংরক্ষিত ফাইলটিতে ডান-ক্লিক করতে পারেন এবং প্রসঙ্গ মেনু থেকে Open in containing folder নির্বাচন করতে পারেন। এটি overrides সেটআপের সময় আপনার নির্বাচিত ফোল্ডারটি খুলবে। সেখানে, আপনি আপনার পছন্দের কোড এডিটর দিয়ে ফাইলগুলি পরিবর্তন করতে পারবেন।
HTTP প্রতিক্রিয়া হেডারগুলিকে ওভাররাইড করুন
নেটওয়ার্ক প্যানেল থেকে, আপনি ওয়েব সার্ভারে অ্যাক্সেস ছাড়াই HTTP প্রতিক্রিয়া শিরোনামগুলিকে ওভাররাইড করতে পারেন।
রেসপন্স হেডার ওভাররাইডের সাহায্যে, আপনি স্থানীয়ভাবে বিভিন্ন হেডারের জন্য প্রোটোটাইপ সংশোধন করতে পারেন, যার মধ্যে রয়েছে কিন্তু সীমাবদ্ধ নয়:
একটি প্রতিক্রিয়া শিরোনাম ওভাররাইড করতে:
- স্থানীয় ওভাররাইড সেট আপ করুন এবং আপনি যে পৃষ্ঠাটি ডিবাগ করতে চান তা খুলুন।
- Network এ যান, একটি অনুরোধ খুঁজুন, তাতে ডান-ক্লিক করুন এবং Override headers নির্বাচন করুন। DevTools আপনাকে Headers > Response Headers সম্পাদকে নিয়ে যাবে।
একটি রেসপন্স হেডার মানের উপর কার্সার রাখুন এবং সেখানে একটি কার্সার রাখুন।
বিকল্পভাবে, রেসপন্স হেডার এডিটর সক্ষম করতে, একটি রেসপন্স হেডার মানের উপর কার্সার রাখুন এবং সম্পাদনা ক্লিক করুন।
একটি নতুন হেডার পরিবর্তন করুন বা যোগ করুন।
- একটি হেডার মান সম্পাদনা করতে, এটিতে ক্লিক করুন।
- একটি নতুন হেডার যোগ করতে, হেডার যোগ করুন এ করুন।
- হেডার ওভাররাইড অপসারণ করতে, এর পাশে থাকা ক্লিক করুন। এটি আপনার যোগ করা হেডারগুলি সরিয়ে দেয় অথবা পরিবর্তিত মানগুলিকে মূল মানগুলিতে ফিরিয়ে আনে।
নেটওয়ার্ক প্যানেল পরিবর্তিত হেডারগুলিকে সবুজ রঙে হাইলাইট করে এবং সরানো ওভাররাইডগুলিকে লাল রঙে এবং ক্রস আউট করে । এছাড়াও, হেডার ট্যাবে একটি বেগুনি ডট আইকন দেখানো হয় যার একটি টুলটিপ থাকে যা আপনাকে জানাবে যে হেডারগুলি ওভাররাইড করা হয়েছে।
পরিবর্তনগুলি প্রয়োগ করতে পৃষ্ঠাটি রিফ্রেশ করুন।
সমস্ত প্রতিক্রিয়া শিরোনাম ওভাররাইড সম্পাদনা করুন
সমস্ত হেডার ওভাররাইড এক জায়গায় সম্পাদনা করতে:
ক্লিক করুন
রেসপন্স হেডার বিভাগের পাশে .headers । 
DevTools আপনাকে Sources > Overrides এ সংশ্লিষ্ট
.headersফাইলে নিয়ে যাবে।.headersফাইলটি সম্পাদনা করুন:
একটি নতুন ওভাররাইড নিয়ম যোগ করতে, "অ্যাড ওভাররাইড নিয়ম" এ ক্লিক করুন। এখানে একটি নিয়ম হল হেডার এবং মানগুলির একটি সেট এবং সেগুলি প্রয়োগ করার জন্য একটি একক বা একাধিক অনুরোধ।
একটি নিয়মে একটি হেডার-মান জোড়া যোগ করতে, অন্য একটি জোড়ার উপর কার্সার রাখুন এবং ক্লিক করুন।
একটি হেডার মান পূর্বাবস্থায় ফেরাতে, একটি যোগ করা হেডার বা একটি নিয়ম সরান, তার উপর কার্সার রাখুন এবং ক্লিক করুন।
Command / Control + S দিয়ে
.headersফাইলটি সংরক্ষণ করুন।পরিবর্তনগুলি প্রয়োগ করতে পৃষ্ঠাটি রিফ্রেশ করুন।