پنهان کردن درخواست های برنامه افزودنی به علاوه بهبودهای بیشتر در پانل شبکه

سیلویا ارمیا
یوانا فورفوتا

در Chrome DevTools ، پانل شبکه که اطلاعات ارزشمندی را در مورد فعالیت شبکه یک صفحه وب به شما ارائه می دهد، یکی از ابزارهای پر استفاده است.

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

با این ویژگی های جدید، پنل شبکه به توسعه دهندگان وب این توانایی را می دهد که:

  • فقط روی درخواست های شبکه مربوطه تمرکز کنید.
  • کدهای وضعیت HTTP را بدون نیاز به مراجع خارجی درک کنید.
  • به سرعت خطاهای درخواست را شناسایی و برطرف کنید.
  • پاسخ های زیرنوع JSON را درک کنید.

برای همه جزئیات به ادامه مطلب بروید!

فیلتر کردن درخواست های افزونه کروم

برنامه‌های افزودنی Chrome می‌توانند درخواست‌های شبکه خود را ایجاد کنند که در کنار درخواست‌های صفحه در پانل شبکه ظاهر می‌شوند. اگر به طور فعال برنامه افزودنی را توسعه نمی‌دهید، احتمالاً این درخواست‌ها به شما مربوط نمی‌شوند. پیش از این، تنها راه پنهان کردن آنها استفاده از فیلتر -scheme:chrome-extension یا اشکال زدایی در حالت ناشناس بود.

از Chrome 117 این کار آسان تر شده است. برای شل کردن پانل شبکه ، DevTools اکنون یک چک باکس برای حذف درخواست‌های افزونه Chrome ارائه می‌دهد.

بحث در مورد وضعیت پیش فرض این ویژگی ادامه دارد. در ابتدا، فعال کردن آن را به صورت پیش‌فرض در نظر گرفتیم، با این ایده که می‌تواند تجربه را برای اکثر کاربران افزایش دهد. با این حال، این رویکرد ممکن است برخی از کاربران را از اینکه URL های افزونه کروم می توانند درخواست ها را راه اندازی کنند، ناآگاه بگذارد. این همچنین می تواند چالش هایی را برای توسعه دهندگان برنامه های افزودنی ایجاد کند. بنابراین، حالت پیش فرض روی "غیرفعال" تنظیم شده است.

درخواست های شبکه به همراه درخواست های سایت در پنل نمایش داده می شوند.
قبل: درخواست‌های شبکه از برنامه‌های افزودنی Chrome قابل مشاهده است.
درخواست های شبکه پنهان هستند.
بعد: درخواست‌های شبکه از برنامه‌های افزودنی Chrome پنهان شد.

با روشن بودن این چک باکس، لیست درخواست‌های شما تمیزتر، حواس‌پرتی کمتر و تمرکز بیشتری روی درخواست‌هایی که بیشترین اهمیت را دارند، می‌شود، به طوری که می‌توانید تجربه رفع اشکال بسیار دلپذیرتری داشته باشید!

متن های وضعیت پاسخ HTTP

درک کدهای وضعیت HTTP برای اشکال زدایی موثر ضروری است. با این حال، جستجوی مداوم برای معانی آنها می تواند ناخوشایند باشد. DevTools یک پیشرفت مفید را معرفی کرده است: وقتی نشانگر را روی یک کد وضعیت در لیست درخواست نگه می‌دارید، یک راهنمای ابزار فوراً متن وضعیت خود را ارائه می‌کند – عنوانی توصیفی که معنای آن را روشن می‌کند.

نکته ابزاری که وقتی نشانگر روی کد وضعیت نگه داشته می شود، نمایش داده می شود.

متن وضعیت نیز در نمای هدر درست در کنار کد قابل مشاهده است. در حالی که قبلا فقط برای HTTP/1.1 در دسترس بود، این ویژگی ها اکنون به HTTP/2 و HTTP/3 گسترش یافته است. این تنظیمات به ظاهر کوچک تأثیر قابل توجهی دارند، در زمان شما صرفه جویی می کنند و به شما امکان می دهند به جای جستجوی معانی کد، روی اشکال زدایی تمرکز کنید.

متن وضعیت همانطور که با هدرها نشان داده شده است.

قابلیت مشاهده خطای پیشرفته

ما تشخیص سریع خطاها و رسیدگی به آنها را بدون حفاری عمیق در پانل آسانتر کرده ایم. برای رسیدن به این هدف، به‌جای برجسته کردن پیام‌های خطا با تغییر رنگ متن، آیکون‌های نشان‌دهنده‌ای را اضافه کردیم تا توجه را به خطاهای درخواست جلب کنیم، مانند خطاهای با کد وضعیت ۴۰۴. مسائل مهم را نادیده نگیرید

خطا با یک نماد و همچنین رنگ برجسته می شود.

زیرشاخه های JSON با چاپ زیبا

توسعه وب اغلب شامل بازرسی پاسخ‌های JSON است، اما خواندن JSONهای فرمت نشده خام بسیار ناخوشایند است. پرداختن به چنین پاسخ‌هایی، به‌ویژه انواع فرعی مانند ld+json ، hal+json ، یا sparql-results+json ، ممکن است خسته‌کننده باشد، به‌عنوان مثال زمانی که این پاسخ‌ها در یک خط نشان داده می‌شوند. برای آسان‌تر کردن کارها، DevTools ارائه‌ای کاربرپسندتر و جمع‌شدنی‌تر برای زیرشاخه‌های JSON معرفی کرده است. اکنون، این پاسخ‌ها قالب‌بندی شده‌اند و نیاز توسعه‌دهندگان را به تکیه بر ابزارهای خارجی از بین می‌برند. این طراحی مجدد یک نمایش ساده و بسیار خوانا ارائه می دهد.

JSON به عنوان یک رشته طولانی نمایش داده می شود که برای مشاهده نیاز به پیمایش دارد.
قبل: پاسخ LD+JSON زیبا چاپ نشده بود.
فرمت JSON برای آسان کردن خواندن.
بعد: پاسخ LD+JSON بسیار چاپ شده است.

بازخورد مثبت از جامعه

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

"اوه، خوب است! ChromeDevTools بازی خود را با نشان دادن کدهای وضعیت HTTP قابل خواندن برای انسان افزایش داده است، و دیدن مشکل در درخواست شبکه را بسیار آسان تر می کند."— TribalIdeas on X

"این اخیراً بسیار مفید بوده است. به خصوص در برخورد با فرم هایی با مسدود کننده های تبلیغات و پسوندهای دستور زبان."- MrAhmadAwais در X

برای کشف این ویژگی های جدید آماده اید؟ به Chrome DevTools بروید و پانل شبکه پیشرفته را برای خود تجربه کنید. اشکال زدایی مبارک!

کانال های پیش نمایش را دانلود کنید

استفاده از Chrome Canary ، Dev یا Beta را به عنوان مرورگر توسعه پیش‌فرض خود در نظر بگیرید. این کانال‌های پیش‌نمایش به شما امکان دسترسی به جدیدترین ویژگی‌های DevTools را می‌دهند، به شما اجازه می‌دهند APIهای پلتفرم وب پیشرفته را آزمایش کنید و به شما کمک می‌کنند تا قبل از کاربران، مشکلات سایت خود را پیدا کنید!

با تیم Chrome DevTools در تماس باشید

از گزینه‌های زیر برای بحث در مورد ویژگی‌های جدید، به‌روزرسانی‌ها یا هر چیز دیگری مربوط به DevTools استفاده کنید.