ترفندهای پیشرفته برای Inspector مرورگر Chrome (قسمت 23) : آموزش بلاک کردن درخواست یا Block Request

همونطور که خاطرتون هست، در جلسه قبل در مورد تبدیل Inspector به یک ویرایشگر قدرتمند، اطلاعاتی رو در اختیارتون قرار دادیم و با مثالها و تصاویری که قرار دادیم، شما رو بصورت کامل با اون و ویژگی هاش آشنا کردیم.

در این جلسه میخوایم در مورد بلاک کردن درخواستهایی خاص صحبت کنیم و مبحث Block Request در Inspector رو بصورت کامل یاد بگیریم.

همونطور که میدونین با استفاده از تب Network میتونیم همه درخواستها و Request هایی که مرورگر از سرور میکنه و اونا رو دریافت میکنه رو با اطلاعات کامل مشاهده کنیم.

بلاک کردن یک Requst

برای مثال سایت سون لرن رو میاریم و به تب Network رفته و صفحه رو رفرش میکنیم. خروجی همانند تصویر خواهد بود:

همونطور که میبینید تمامی درخواستهای مربوط به سایت سون لرن قرار گرفته است. خب حالا فرض کنیم به هر دلیلی بخوایم یک یا چند عدد از این درخواستها رو بلاک کنیم و دیگه مرورگر اونا رو از سرور درخواست نکنه.

برای اینکار ابتدا بر روی فایل یا درخواست مورد نظر کلیک راست کنید:

میبینید که دو گزینه در این زمینه وجود داره:

1. با کلیک بر روی Block request URL، آدرس مربوط به این فایل بلاک میشه و دفعات بعدی که سایت رو لود میکنید، دیگه این فایل از سرور درخواست نمیشه
2. با کلیک بر روی Block request Domain، آدرس دامین مربوط به این فایل بلاک میشه و هر فایلی که با این دامین شروع بشه بصورت کلی بلاک میشن.

بر روی گزینه Block request URL کلیک کنید. با اینکار وارد تب Request Blocking میشیم و در اینجا میتونیم مدیریت کاملی بر روی درخواستهای بلاک شده داشته باشیم:

همونطور که میبینید آدرس همون فایلی که بلاک کردیم در اینجا قرار داده شده و در جلوی اون تعداد دفعاتی که این فایل درخواست شده ولی بلاک شده است رو قرار میده که در این حالت ما، چون تازه اون رو بلاک کردیم 0 هست.

اگر صفحه رو در این حالت یکبار رفرش کنیم، این عدد به 1 تبدیل میشه و در تب Network جلوی این فایل و در قسمت Status عبارت (blocked:devtools) قرار میگیره. بصورت زیر:

جزئیات تب Request Blocking

در تب Request Blocking گزینه ها بصورت زیر هستند:

1. با برداشتن این تیک، همه بلاکها غیرفعال میشن.
2. میتونین بصورت تکی هم بلاکها رو غیرفعال کنید
3. میتونین یک الگو یا Pattern جدید برای بلاک کردن رو با + به وجود بیارید
4.  با کلیک بر روی این آیکون نیز همه الگوهای بلاک شدن، حذف خواهند شد.

بر روی هر الگو که هاور کنیم، دو آیکون نمایش داده میشه:

با کلیک بر روی 1 میتونین این الگو رو ویرایش کنید. با کلیک بر روی 2 میتونین این الگو رو حذف نمایید.

فرض کنید که بخوایم کاری کنیم که سایت سون لرن بدون استایل نمایش داده بشه. برای اینکار بر روی + کلیک میکنیم و الگوی زیر رو قرار میدیم و بر روی Add کلیک میکنیم:

حالا اگر صفحه رو رفرش کنیم میبینیم که سایت دیگه استایلی براش لود نشده. در این حالت اگر تبهای Console و Network رو ببینید بصورت زیر خواهند بود:

میبینید که تب Network یک علامت warning زرد قرار گرفته و در Console نیز بیان شده که فایل مورد نظر توسط DevTools بلاک شده است. امیدوارم این امکان و قابلیت بدردتون بخوره و بتونین ازش استفاده کنید.

امیدوارم از این مطلب خوشتون اومده باشه.

موفق باشید

یا علی