في أدوات مطوري البرامج في Chrome، تُعدّ لوحة الشبكة التي تقدّم لك إحصاءات قيّمة حول نشاط الشبكة في صفحة الويب واحدة من أكثر الأدوات استخدامًا.
تعرض هذه المقالة مجموعة من التحسينات المطلوبة جدًا على لوحة الشبكة التي أجرتها "إيوانا فورفوتا" و"سيلفيا إريميا" خلال فترة تدريبهما في برنامج STEP. لقد تم انتظار هذه التحسينات بعناية وتم اختيارها بعناية من بين قائمة المهام الشاملة في أداة تتبّع مشاكل Chromium لتسهيل الوصول إلى اللوحة وتسهيلها وتزويدها بالمعلومات.
باستخدام هذه الميزات الجديدة، تتيح لوحة الشبكة لمطوّري الويب إمكانية:
- ركّز فقط على طلبات الشبكة ذات الصلة.
- فهم رموز حالة HTTP بدون الحاجة إلى مراجع خارجية.
- تحديد أخطاء الطلبات ومعالجتها بسرعة
- فهم استجابات نوع JSON الفرعي
يُرجى مواصلة القراءة للاطّلاع على كلّ التفاصيل.
فلترة طلبات إضافات Chrome
يمكن لإضافات Chrome إنشاء طلبات الشبكة الخاصة بها، والتي تظهر بجانب طلبات الصفحة في لوحة الشبكة. إذا لم تكن تعمل على تطوير إضافة بشكل نشط، من المحتمل ألا تكون هذه الطلبات ذات صلة بك. وكانت الطريقة الوحيدة لإخفائها سابقًا هي استخدام فلتر -scheme:chrome-extension أو تصحيح الأخطاء في وضع التصفُّح المتخفي.
وقد أصبح ذلك أسهل من الإصدار 117 من 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:
"أوه، هذا أنيق! تمكّنت "أدوات ChromeDevTools" من تحسين أداءها من خلال عرض رموز حالة HTTP التي يمكن للإنسان فهمها، ما يسهّل على المستخدم معرفة المشكلة التي تحدث في طلب شبكة."—TribalIdeas on X
"لقد كان مفيدًا للغاية مؤخرًا. سنتعامل بشكل خاص مع النماذج التي تحتوي على أدوات حظر الإعلانات والإضافات النحوية". قناة MrAhmadAwais على X
هل أنت مستعد لاستكشاف هذه الميزات الجديدة؟ انتقِل إلى "أدوات مطوري البرامج في Chrome" وجرِّب لوحة الشبكة المحسَّنة بنفسك. نتمنى لك وقتًا ممتعًا في تصحيح الأخطاء.
تنزيل قنوات المعاينة
يمكنك استخدام إصدار Canary أو إصدار مطوّري البرامج أو الإصدار التجريبي من Chrome كمتصفّح تلقائي للتطوير. تتيح لك قنوات المعاينة هذه الوصول إلى أحدث ميزات "أدوات مطوري البرامج" واختبار واجهات برمجة التطبيقات المتطورة للأنظمة الأساسية على الويب والعثور على المشاكل في موقعك الإلكتروني قبل المستخدمين.
التواصل مع فريق "أدوات مطوري البرامج في Chrome"
يُرجى استخدام الخيارات التالية لمناقشة الميزات والتغييرات الجديدة في المشاركة أو أي موضوع آخر ذي صلة بـ "أدوات مطوري البرامج".
- يمكنك إرسال اقتراحات أو ملاحظات إلينا عبر crbug.com.
- يمكنك الإبلاغ عن مشكلة في "أدوات مطوري البرامج" باستخدام خيارات إضافية
> مساعدة > الإبلاغ عن مشاكل في "أدوات مطوري البرامج" في "أدوات مطوري البرامج". - يمكنك نشر تغريدة على @ChromeDevTool.
- يمكنك إضافة تعليقات على الميزات الجديدة في فيديوهات YouTube أو نصائح حول أدوات مطوّري البرامج في فيديوهات YouTube حول الميزات الجديدة.