در Chrome DevTools ، پانل شبکه که اطلاعات ارزشمندی را در مورد فعالیت شبکه یک صفحه وب به شما ارائه می دهد، یکی از ابزارهای پر استفاده است.
این مقاله مجموعه ای از پیشرفت های بسیار مطلوب را در پنل شبکه که یوانا فورفوتا و سیلویا ارمیا در دوره کارآموزی STEP خود انجام دادند، به اشتراک می گذارد. این پیشرفت‌ها مشتاقانه منتظر بوده‌اند و به دقت از میان ردیاب مشکلات Chromium انتخاب شده‌اند و پانل را در دسترس‌تر، شهودی‌تر و آموزنده‌تر می‌کنند.
با این ویژگی های جدید، پنل شبکه به توسعه دهندگان وب این توانایی را می دهد که:
- فقط روی درخواست های شبکه مربوطه تمرکز کنید.
- کدهای وضعیت HTTP را بدون نیاز به مراجع خارجی درک کنید.
- به سرعت خطاهای درخواست را شناسایی و برطرف کنید.
- پاسخ های زیرنوع JSON را درک کنید.
خوانده شده در برای تمام جزئیات!
فیلتر کردن درخواست های افزونه کروم
برنامه‌های افزودنی Chrome می‌توانند درخواست‌های شبکه خود را ایجاد کنند که در کنار درخواست‌های صفحه در پانل شبکه ظاهر می‌شوند. اگر به طور فعال برنامه افزودنی را توسعه نمی‌دهید، احتمالاً این درخواست‌ها به شما مربوط نمی‌شوند. پیش از این، تنها راه پنهان کردن آنها استفاده از فیلتر -scheme:chrome-extension یا اشکال زدایی در حالت ناشناس بود.
از Chrome 117 این کار آسان تر شده است. برای شل کردن پانل شبکه ، DevTools اکنون یک چک باکس برای حذف درخواست‌های افزونه Chrome ارائه می‌دهد.
بحث در مورد وضعیت پیش فرض این ویژگی ادامه دارد. در ابتدا، فعال کردن آن را به صورت پیش‌فرض در نظر گرفتیم، با این ایده که می‌تواند تجربه را برای اکثر کاربران افزایش دهد. با این حال، این رویکرد ممکن است برخی از کاربران را از اینکه URL های افزونه کروم می توانند درخواست ها را راه اندازی کنند، ناآگاه بگذارد. این همچنین می تواند چالش هایی را برای توسعه دهندگان برنامه های افزودنی ایجاد کند. بنابراین، حالت پیش فرض روی "غیرفعال" تنظیم شده است.
با روشن بودن این چک باکس، فهرست درخواست‌های شما تمیزتر، حواس‌پرتی کمتر و تمرکز بیشتری روی درخواست‌هایی که بیشترین اهمیت را دارند، می‌شود، به طوری که می‌توانید تجربه رفع اشکال بسیار دلپذیرتری داشته باشید!
متن های وضعیت پاسخ HTTP
درک کدهای وضعیت HTTP برای اشکال زدایی موثر ضروری است. با این حال، جستجوی مداوم برای معانی آنها می تواند ناخوشایند باشد. DevTools یک پیشرفت مفید را معرفی کرده است: وقتی نشانگر را روی یک کد وضعیت در لیست درخواست نگه می‌دارید، یک راهنمای ابزار فوراً متن وضعیت خود را ارائه می‌کند – عنوانی توصیفی که معنای آن را روشن می‌کند.
متن وضعیت نیز در نمای هدر درست در کنار کد قابل مشاهده است. در حالی که قبلا فقط برای HTTP/1.1 در دسترس بود، این ویژگی ها اکنون به HTTP/2 و HTTP/3 گسترش یافته است. این تنظیمات به ظاهر کوچک تأثیر قابل توجهی دارند، در زمان شما صرفه جویی می کنند و به شما امکان می دهند به جای جستجوی معانی کد، روی اشکال زدایی تمرکز کنید.
قابلیت مشاهده خطای پیشرفته
ما تشخیص سریع خطاها و رسیدگی به آنها را بدون حفاری عمیق در پانل آسانتر کرده ایم. برای رسیدن به این هدف، به‌جای برجسته کردن پیام‌های خطا با تغییر رنگ متن، آیکون‌های نشان‌دهنده‌ای را اضافه کردیم تا توجه را به خطاهای درخواست جلب کنیم، مانند خطاهای با کد وضعیت ۴۰۴. مسائل مهم را نادیده نگیرید
زیرشاخه های JSON با چاپ زیبا
توسعه وب اغلب شامل بازرسی پاسخ‌های JSON است، اما خواندن JSONهای فرمت نشده خام بسیار ناخوشایند است. پرداختن به چنین پاسخ‌هایی، به‌ویژه انواع فرعی مانند ld+json ، hal+json ، یا sparql-results+json ، ممکن است خسته‌کننده باشد، به‌عنوان مثال زمانی که این پاسخ‌ها در یک خط نشان داده می‌شوند. برای آسانتر کردن کارها، DevTools ارائه‌ای کاربرپسندتر و جمع‌شدنی‌تر برای زیرشاخه‌های JSON معرفی کرده است. اکنون، این پاسخ‌ها قالب‌بندی شده‌اند و نیاز توسعه‌دهندگان را به تکیه بر ابزارهای خارجی از بین می‌برند. این طراحی مجدد یک نمایش ساده و بسیار خوانا ارائه می دهد.
بازخورد مثبت از جامعه
حتی اگر این ویژگی ها فقط در مراحل اولیه پذیرش هستند، پاسخ جامعه بازخورد بسیار مثبتی است. اجرای موفقیت آمیز آنها باعث شده است که بسیاری از کاربران از پیشرفت ها خوشحال شوند و تجربه آنها را به طور قابل توجهی افزایش دهد. می توانید برخی از پاسخ ها را در X بخوانید:
"اوه، خوب است! ChromeDevTools بازی خود را با نشان دادن کدهای وضعیت HTTP قابل خواندن برای انسان افزایش داده است، و دیدن مشکل در درخواست شبکه را بسیار آسان تر می کند."— TribalIdeas on X
"این اخیراً بسیار مفید بوده است. به خصوص در برخورد با فرم هایی با مسدود کننده های تبلیغات و پسوندهای دستور زبان."- MrAhmadAwais در X
برای کشف این ویژگی های جدید آماده اید؟ به Chrome DevTools بروید و پانل شبکه پیشرفته را برای خود تجربه کنید. اشکال زدایی مبارک!
کانال های پیش نمایش را دانلود کنید
استفاده از Chrome Canary ، Dev یا Beta را به عنوان مرورگر توسعه پیش‌فرض خود در نظر بگیرید. این کانال‌های پیش‌نمایش به شما امکان می‌دهند به جدیدترین ویژگی‌های DevTools دسترسی داشته باشید، APIهای پلت‌فرم وب پیشرفته را آزمایش کنید و قبل از اینکه کاربرانتان این کار را انجام دهند، مشکلات موجود در سایت خود را پیدا کنید!
تماس با تیم Chrome DevTools
از گزینه های زیر برای بحث در مورد ویژگی ها و تغییرات جدید در پست یا هر چیز دیگری مربوط به DevTools استفاده کنید.
- پیشنهاد یا بازخورد خود را از طریق crbug.com برای ما ارسال کنید.
- با استفاده از گزینه های بیشتر ، مشکل DevTools را گزارش کنید
> راهنما > گزارش مشکلات DevTools در DevTools. - توییت در @ChromeDevTools .
- نظرات خود را در مورد ویدیوهای YouTube DevTools یا نکات DevTools در YouTube ما بنویسید.