في أدوات مطوري البرامج في Chrome، تعدّ لوحة الشبكة التي تقدّم لك إحصاءات قيّمة عن نشاط الشبكة لموقع إلكتروني من أكثر الأدوات استخدامًا.
تشارك هذه المقالة مجموعة من التحسينات المطلوبة بشدة على لوحة الشبكة التي أجرتها "إيوانا فورفوتا" و"سيلفيا إريميا" خلال فترة تدريبهما في STEP. لقد طال انتظار هذه التحسينات، وتم اختيارها بعناية من قائمة المهام المتراكمة في أداة تتبُّع المشاكل في Chromium، ما يجعل اللوحة أكثر سهولة وسلاسة وغنية بالمعلومات.
من خلال هذه الميزات الجديدة، تمنح لوحة الشبكة لمطوّري الويب إمكانية تنفيذ ما يلي:
- التركيز فقط على طلبات الشبكة ذات الصلة
- فهم رموز حالة HTTP بدون الحاجة إلى مراجع خارجية
- تحديد أخطاء الطلبات ومعالجتها بسرعة
- فهم استجابات أنواع JSON الفرعية
اطّلِع على كل التفاصيل أدناه.
فلترة طلبات إضافات Chrome
يمكن لإضافات Chrome إرسال طلبات خاصة بها إلى الشبكة، والتي تظهر بجانب طلبات الصفحة في لوحة الشبكة. إذا لم تكن بصدد تطوير إضافة، من المحتمل ألا تكون هذه الطلبات ذات صلة بك. في السابق، كانت الطريقة الوحيدة لإخفائها هي استخدام فلتر -scheme:chrome-extension أو تصحيح الأخطاء في وضع التصفّح المتخفي.
أصبح هذا الإجراء أسهل في الإصدار 117 من Chrome. لتقليل عدد العناصر في لوحة الشبكة، تقدّم "أدوات مطوّري البرامج في Chrome" الآن مربّع اختيار لاستبعاد طلبات إضافات Chrome.
كانت هناك مناقشات جارية بشأن الحالة التلقائية لهذه الميزة. في البداية، فكّرنا في تفعيل هذه الميزة تلقائيًا، على اعتبار أنّها قد تحسّن تجربة غالبية المستخدمين. ومع ذلك، قد يؤدي هذا النهج إلى عدم معرفة بعض المستخدمين بأنّ عناوين URL لإضافات Chrome يمكن أن تؤدي إلى ظهور طلبات. وقد يشكّل ذلك أيضًا تحديات لمطوّري الإضافات. لذلك، يتم ضبط الحالة التلقائية على "متوقف".
عند تفعيل مربّع الاختيار هذا، ستصبح قائمة الطلبات أكثر وضوحًا وأقل تشتيتًا للانتباه، وستتركز أكثر على الطلبات الأكثر أهمية، ما يتيح لك تجربة تصحيح أخطاء أكثر سهولة.
نصوص حالة استجابة HTTP
إنّ فهم رموز حالة HTTP أمرٌ ضروري لإزالة الأخطاء بفعالية. ومع ذلك، قد يكون البحث باستمرار عن معانيها غير ملائم. لقد قدّمت "أدوات المطوّرين" تحسينًا مفيدًا: عند تثبيت المؤشر فوق رمز حالة في قائمة الطلبات، سيعرض التلميح النصي على الفور حالة الرمز، وهو عنوان وصفي يوضّح معناه.
يظهر نص الحالة أيضًا في عرض العناوين بجانب الرمز مباشرةً. في السابق، كانت هذه الميزات متاحة فقط لبروتوكول HTTP/1.1، ولكن تم الآن توسيع نطاقها ليشمل بروتوكول HTTP/2 وHTTP/3. لهذه التعديلات الصغيرة على ما يبدو تأثير كبير، ما يوفر عليك الوقت ويسمح لك بالتركيز على تصحيح الأخطاء بدلاً من البحث عن معاني الرموز البرمجية.
إمكانية رؤية الأخطاء المحسّنة
لقد سهّلنا عليك اكتشاف الأخطاء ومعالجتها بسرعة بدون الحاجة إلى الاطّلاع على تفاصيل اللوحة. لتحقيق ذلك، بدلاً من مجرد تمييز رسائل الخطأ من خلال تغيير لون النص، أضفنا رموزًا إرشادية للفت الانتباه إلى أخطاء الطلبات، مثل تلك التي تحمل رمز الحالة 404. ستجعل هذه المؤشرات الدقيقة والمفيدة الأخطاء أكثر وضوحًا، ما يضمن عدم تجاهل المشاكل المهمة.
الطباعة الجميلة لأنواع JSON الفرعية
يتضمن تطوير الويب غالبًا فحص استجابات JSON، ولكن قراءة ملفات JSON الأولية غير المنسَّقة أمر غير ملائم على الإطلاق. قد تكون التعامل مع هذه الردود، خاصةً الأنواع الفرعية مثل ld+json أو hal+json أو sparql-results+json، محبطة، على سبيل المثال عندما تظهر في سطر واحد. لتسهيل الأمور، قدّمت أدوات المطوّرين عرضًا قابلاً للطيّ وأكثر سهولة للاستخدام لأنواع JSON الفرعية. والآن، يتم تنسيق هذه الردود، ما يغني المطوّرين عن الاعتماد على أدوات خارجية. تقدّم هذه الإعادة التصميم تمثيلاً بسيطًا وسهل القراءة.
ملاحظات إيجابية من المنتدى
على الرغم من أنّ هذه الميزات لا تزال في مراحلها الأولى، تلقّينا ملاحظات إيجابية بشكل كبير من المنتدى. وقد أدى تنفيذ هذه التحسينات بنجاح إلى سعادة العديد من المستخدمين، ما حسّن تجربتهم بشكل كبير. يمكنك الاطّلاع على بعض الردود على X:
"رائع. "لقد حسّنت أدوات مطوّري البرامج في Chrome من أدائها من خلال عرض رموز حالة HTTP القابلة للقراءة، ما يسهّل معرفة الخطأ الذي حدث في طلب الشبكة". —TribalIdeas على X
"لقد كان ذلك مفيدًا للغاية في الآونة الأخيرة. خاصةً التعامل مع النماذج التي تتضمّن أدوات حظر الإعلانات وإضافات القواعد النحوية".-MrAhmadAwais على X
هل أنت مستعد لاستكشاف هذه الميزات الجديدة؟ انتقِل إلى "أدوات مطوّري البرامج في Chrome" واختبر لوحة الشبكة المحسّنة بنفسك. مع أطيب التحيّات،
تنزيل قنوات المعاينة
ننصحك باستخدام إصدار Canary أو Dev أو الإصدار التجريبي من Chrome كمتصفّح التطوير التلقائي. تتيح لك قنوات المعاينة هذه الوصول إلى أحدث ميزات DevTools، وتتيح لك اختبار واجهات برمجة تطبيقات منصات الويب المتطوّرة، وتساعدك في العثور على المشاكل في موقعك الإلكتروني قبل أن يعثر عليها المستخدمون.
التواصل مع فريق "أدوات مطوّري البرامج في Chrome"
استخدِم الخيارات التالية لمناقشة الميزات الجديدة أو التحديثات أو أي شيء آخر مرتبط بـ "أدوات مطوّري البرامج".
- يمكنك إرسال الملاحظات وطلبات الميزات إلينا على crbug.com.
- يمكنك الإبلاغ عن مشكلة في "أدوات مطوّري البرامج" باستخدام رمز خيارات إضافية > مساعدة > الإبلاغ عن مشكلة في "أدوات مطوّري البرامج" في "أدوات مطوّري البرامج".
- يمكنك نشر تغريدة على Twitter على @ChromeDevTools.
- يمكنك إضافة تعليقات على فيديوهات YouTube حول الميزات الجديدة في "أدوات مطوّري البرامج" أو فيديوهات YouTube حول نصائح حول "أدوات مطوّري البرامج".