ترفندهای پیشرفته برای Inspector مرورگر Chrome (قسمت 31) : تعدادی نکته کاربردی Network

- visibility ۰ mode_comment

همونطور که اطلاع دارید در جلسه قبل توضیحات مربوط به ابزار Lighthouse رو به پایان رسوندیم و شما رو بصورت کامل با اون آشنا کردیم. در این جلسه میخوایم تعدادی نکته کاربردی در مورد Network رو بهتون آموزش بدیم.

در این جلسه 2 ترفند کاربردی مرتبط با Network رو به شما آموزش میدیم که بیشتر وقتا میتونه بهتون کمک کنه.

مخفی کردن ارورهای مربوط به Network در Console

همونطور که میدونین بیشتر اوقات ارورهای مربوط به 404، بلاک شدن اسکریپت ها توسط افزونه ها و دیگر ارورهای مربوط به Network، باعث حواس پرتی میشن و نمیتونین به خوبی و با دقت زیاد بر روی ارور اصلی کار کنید. در این مواقع میتونین ارورهای مربوط به Network رو مخفی کرده و توجه خودتون رو بر روی ارورهای اصلی بگذارید.

مثلا من سایت Google رو باز میکنم و وارد تب Console میشم. برای من بصورت زیر خواهد بود:

همونطور که میبینید 2 ارور در Console نمایش داده شده است که یکی مربوط به کدها و دیگری مربوط به Network می باشد.

میبینید که دلیل ارور رو net::ERR_BLOCKED_BY_CLIENT رو قرار داده است. یعنی این آدرس توسط کلاینت بلاک شده است و اونم به دلیل افزونه ای هست که من بر روی مرورگر خودم نصب کردم که از نمایش تبلیغات جلوگیری میکنه.

من وقتی میخوام بر روی سایت کار کنم و مشکل اصلی رو حل کنم، با دیدن مشکلات دیگه اذیت میشم و تمرکزم رو از دست میدم.

در این مواقع میتونین به راحتی ارورهای مربوط به Network رو مخفی کرده و محیط Console رو تروتمیز کنید.

برای اینکار بر روی چرخ دنده موجود در راست و بالا کلیک کنید:

میبینید که گزینه های زیادی نمایش داده میشه.

با فعال کردن گزینه Hide network، ارورهای مربوط به شبکه یا Network مخفی میشن. هر کدام از گزینه های دیگه هم کار خاصی رو انجام میدن که خارج از بحث این جلسه هستند. مثلا میتونین با استفاده از اونا درخواستهای Ajax و زمان هر ارور رو نیز در Console ببینید.

سفارشی کردن ستونها در تب Network

فرض کنید که شما همیشه با یک هدر مربوط به Response کار داشته باشید و بخواید سریع مقدار اون رو متوجه بشید. در این مواقع میتونین اون هدر رو درون ستونهای تب Network قرار بدین و همیشه مقابل هر درخواست، مقدار مربوط به اون رو مشاهده کنید.

برای اینکار تب Network رو باز میکنیم و بر روی سر ستون ها کلیک راست کرده و به مسیر زیر می رویم:

میبینید که در زیر منوی Response Headers تعدادی گزینه پیش فرض وجود داره.

اگر هدر مورد نظر شما وجود دارد که میتونین با کلیک بر روی اون، این ستون رو به ستونهای قبلی اضافه کنید.

اگر وجود ندارد با کلیک بر روی Manage Header Columns میتونین یک هدر سفارشی رو به وجود بیارید:

بر روی Add custom header کلیک کرده و هدر مورد نظرتون رو وارد کرده و دکمه Add رو بزنید. با اینکار ستون با مقداری که برای هدر وارد کرده بودید، اضافه خواهد شد.

میبینید که ستون expires اضافه شده است و دیگه لازم نیست که برای هر درخواست بر روی اون کلیک کرده و جزئیات اون رو ببینید.

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

موفق باشید

یا علی

comment دیدگاه کاربران
ارسال نظرات

کاربر گرامی، امکان ارسال نظر و پشتیبانی برای دوره های مجازی فقط برای دانشجویان این دوره امکان پذیر می باشد.