با استفاده از overrideهای محلی، میتوانید با نمونهسازی اولیه و آزمایش تغییرات و اصلاحات، بدون انتظار برای پشتیبانی backend، اشخاص ثالث یا APIها، گردش کار خود را از حالت انسداد خارج کنید.
از override های محلی برای شبیهسازی منابع راه دور استفاده کنید، حتی اگر به آنها دسترسی ندارید. میتوانید پاسخها به درخواستها و فایلهای مختلف، مانند هدرهای پاسخ HTTP و محتوای وب ، از جمله درخواستهای XHR و fetch را شبیهسازی کنید.
برای مثال، override های محلی میتوانند در موارد استفاده زیر مفید باشند:
- API را شبیهسازی کنید و اصلاحات API را قبل از اینکه واقعاً به مرحله تولید برسند، آزمایش کنید.
- اگر از قبل ساختارهای دادهای را که قرار است بکاند از آنها استفاده کند میشناسید، طرحهای رابط کاربری جدید را نمونهسازی کنید.
- برای مثال، اصلاحات عملکرد آزمایشی، CLS را حذف میکنند تا از قبل مطمئن شوند که قابل توجه هستند.
لغوهای محلی همچنین به شما امکان میدهند تغییراتی را که در DevTools ایجاد میکنید، در طول بارگذاری صفحات حفظ کنید.
چگونه کار میکند؟
- وقتی در DevTools تغییراتی ایجاد میکنید، DevTools یک کپی از فایل تغییر یافته را در پوشهای که شما مشخص میکنید ذخیره میکند.
- وقتی صفحه را دوباره بارگذاری میکنید، DevTools به جای منبع شبکه، فایل محلی و اصلاحشده را ارائه میدهد.
همچنین میتوانید تغییرات خود را مستقیماً در فایلهای منبع ذخیره کنید. به بخش ویرایش و ذخیره فایلها با فضاهای کاری مراجعه کنید.
محدودیتها
لغوهای محلی برای هدرهای پاسخ شبکه و برای اکثر انواع فایلها، از جمله درخواستهای XHR و واکشی، با چند استثنا کار میکنند:
- وقتی لغوهای محلی فعال باشند، حافظه پنهان غیرفعال است.
- DevTools تغییرات ایجاد شده در درخت DOM پنل Elements را ذخیره نمیکند.
- اگر CSS را در پنل Styles ویرایش کنید و منبع آن CSS یک فایل HTML باشد، DevTools تغییر را ذخیره نمیکند.
در عوض، میتوانید فایلهای HTML را در پنل منابع ویرایش کنید.
تنظیم لغوهای محلی
شما میتوانید محتوای وب یا هدرهای پاسخ را مستقیماً در پنل شبکه لغو کنید:
- DevTools را باز کنید ، به پنل Network بروید، روی درخواستی که میخواهید لغو کنید کلیک راست کنید، از منوی کشویی گزینهی Override headers یا Override content را انتخاب کنید.
- اگر هنوز لغوهای محلی را تنظیم نکردهاید، در نوار عملیات بالا، DevTools از شما میخواهد که:
- پوشهای را برای ذخیره فایلهای بازنویسیشده انتخاب کنید .
- برای اعطای حق دسترسی به DevTools، روی Allow کلیک کنید.
- پوشهای را برای ذخیره فایلهای بازنویسیشده انتخاب کنید .
- اگر لغوهای محلی را تنظیم کرده باشید اما غیرفعال باشند، DevTools بهطور خودکار آنها را فعال میکند.
پس از تنظیم و فعالسازی لغوهای محلی، بسته به آنچه که میخواهید لغو کنید، DevTools شما را به موارد زیر هدایت میکند:
- پنل منابع (Sources) برای ایجاد تغییرات در محتوای وب .
- ویرایشگر موجود در Network > Headers > Response Headers به شما امکان میدهد تا در هدرهای پاسخ تغییراتی ایجاد کنید.
برای غیرفعال کردن موقت لغوهای محلی یا حذف همه فایلهای لغو، به منابع > لغوها بروید و کادر انتخاب را پاک کنید یا به ترتیب Clear کلیک کنید.
برای حذف یک فایل یا تمام فایلهای جایگزین در یک پوشه، روی فایل یا پوشه در مسیر Sources > Overrides کلیک راست کنید، گزینه Delete را انتخاب کنید، سپس در پنجره باز شده روی OK کلیک کنید. این عمل قابل بازگشت نیست و شما باید فایلهای جایگزین حذف شده را به صورت دستی دوباره ایجاد کنید.
برای مشاهده سریع همه لغوها، در پنل شبکه ، روی یک درخواست کلیک راست کرده و نمایش همه لغوها را انتخاب کنید. DevTools شما را به منابع > لغوها هدایت میکند.
محتوای وب را نادیده بگیرید
برای لغو محتوای وب:
- تنظیمات لغو محلی را تنظیم کنید .
- ایجاد تغییرات در فایلها و ذخیره آنها در DevTools.
برای مثال، میتوانید فایلها را در Sources یا CSS را در Elements > Styles ویرایش کنید، مگر اینکه CSS در فایلهای HTML قرار داشته باشد.
DevTools فایلهای اصلاحشده را ذخیره میکند، آنها را در Sources > Overrides فهرست میکند و به شما نشان میدهد 
آیکون کنار فایلهای لغو شده در پنلها و بخشهای مربوطه: عناصر > سبکها ، شبکه و منابع > لغوها .
علاوه بر این، پنل شبکه یک آیکون نقطه بنفش با یک راهنمای ابزار در کنار تب پاسخ (Response) مربوط به درخواستی با محتوای وب لغو شده (override) نشان میدهد.
نادیده گرفتن XHR یا واکشی درخواستها برای شبیهسازی منابع از راه دور
با override های محلی، نیازی به دسترسی به backend ندارید و لازم نیست منتظر بمانید تا از تغییرات شما پشتیبانی کند. به صورت آزمایشی و درجا آزمایش کنید:
- تنظیمات لغو محلی را تنظیم کنید .
- در بخش Network ، درخواستهای XHR/fetch را فیلتر کنید ، درخواست مورد نظر خود را پیدا کنید، روی آن کلیک راست کرده و گزینه Override content را انتخاب کنید.
- تغییرات مورد نظر خود را در دادههای واکشی شده اعمال کنید و فایل را ذخیره کنید.
- صفحه را رفرش و تغییرات اعمال شده را مشاهده کنید.
برای یادگیری این روش کار، ویدیوی زیر را تماشا کنید:
تغییرات محلی خود را پیگیری کنید
شما میتوانید تمام تغییراتی که در محتوای وب ایجاد میکنید را در یک مکان - برگه کشوی تغییرات - پیگیری کنید.
علاوه بر این، در مسیر Sources > Overrides ، میتوانید روی فایل ذخیره شده کلیک راست کرده و از منوی زمینه، گزینه Open in containing folder را انتخاب کنید. این کار پوشهای را که هنگام تنظیم overrides انتخاب کردهاید، باز میکند. در آنجا میتوانید فایلها را با ویرایشگر کد مورد علاقه خود تغییر دهید.
هدرهای پاسخ HTTP را نادیده بگیرید
از پنل شبکه ، میتوانید هدرهای پاسخ HTTP را بدون دسترسی به وب سرور، لغو کنید.
با لغو هدر پاسخ، میتوانید به صورت محلی اصلاحاتی را برای هدرهای مختلف، از جمله موارد زیر (اما نه محدود به آنها) انجام دهید:
برای لغو کردن هدر پاسخ:
- تنظیمات محلی را تنظیم کنید و صفحهای را که میخواهید اشکالزدایی کنید، باز کنید.
- به Network بروید، یک درخواست پیدا کنید، روی آن کلیک راست کنید و Override headers را انتخاب کنید. DevTools شما را به ویرایشگر Headers > Response Headers میبرد.
ماوس را روی مقدار هدر پاسخ نگه دارید و مکاننما را آنجا قرار دهید.
روش دیگر، برای فعال کردن ویرایشگر Response Headers ، نشانگر ماوس را روی مقدار هدر پاسخ نگه دارید و روی کلیک کنید.
عنوان را تغییر دهید یا یک عنوان جدید اضافه کنید.
- برای ویرایش مقدار هدر، روی آن کلیک کنید.
- برای افزودن یک سربرگ جدید، افزودن سربرگ کلیک کنید.
- برای حذف یک هدر اضافی، روی کنار آن کلیک کنید. این کار هدرهایی را که اضافه کردهاید حذف میکند یا مقادیر اصلاحشده را به مقادیر اصلی برمیگرداند.
پنل شبکه ، هدرهای اصلاحشده را با رنگ سبز و هدرهای حذفشده را با رنگ قرمز و خطخورده مشخص میکند. علاوه بر این، تب هدرها یک آیکون نقطه بنفش با یک راهنما نشان میدهد تا به شما اطلاع دهد که هدرها لغو شدهاند.
برای اعمال تغییرات، صفحه را رفرش کنید.
ویرایش تمام لغوهای هدر پاسخ
برای ویرایش همه لغوهای هدر در یک مکان:
کلیک
.headers در کنار بخش Response Headers . 
DevTools شما را به فایل
.headersمربوطه در Sources > Overrides میبرد.فایل
.headersرا ویرایش کنید:
برای افزودن یک قانون لغو جدید، روی «افزودن قانون لغو» کلیک کنید. یک قانون در اینجا مجموعهای از هدرها و مقادیر و یک یا چند درخواست برای اعمال آنها است.
برای افزودن یک جفت مقدار-سرآیند به یک قانون، نشانگر ماوس را روی جفت دیگری قرار دهید و روی کلیک کنید.
برای برگرداندن مقدار یک سربرگ، یک سربرگ یا یک قانون اضافه شده را حذف کنید، ماوس را روی آن ببرید و روی کلیک کنید.
فایل
.headersرا با استفاده از Command / Control + S ذخیره کنید.برای اعمال تغییرات، صفحه را رفرش کنید.