الميزات الجديدة في أدوات مطوّري البرامج (Chrome 74)

Kayce Basques

تسرّنا عودتك. إليك الميزات الجديدة.

نسخة الفيديو من هذه الصفحة

تمييز جميع العقد المتأثّرة بخاصية CSS

مرِّر مؤشّر الماوس فوق خاصيّة CSS التي تؤثّر في نموذج مربّع العقدة، مثل padding أو margin، لتمييز جميع العقد المتأثّرة بهذا البيان.

يؤدي تمرير مؤشر الماوس فوق سمة هامش إلى تمييز جميع العقد المتأثرة بهذا البيان.

الشكل 1: يؤدّي تمرير مؤشّر الماوس فوق سمة margin إلى تمييز الهوامش لجميع العقد المتأثرة بهذه العبارة.

الإصدار 4 من Lighthouse في لوحة "عمليات التدقيق"

تتحقّق عملية التدقيق الجديدة لم يتم تحديد حجم أهداف النقر بشكل مناسب من أنّ العناصر التفاعلية، مثل buttons والروابط، كبيرة بما يكفي ومتباعدة بشكل مناسب على الأجهزة الجوّالة.

تستخدم فئة التطبيقات المتوافقة مع الأجهزة الجوّالة (PWA) في التقرير الآن نظامًا لتسجيل النقاط.

نظام النقاط الجديد للشارة في فئة تطبيقات الويب التقدّمية

الشكل 3 نظام النقاط الجديد للشارة في فئة تطبيقات الويب التقدّمية

عارض الرسائل الثنائية في WebSocket

لعرض محتوى رسالة WebSocket ثنائية:

  1. افتح لوحة الشبكة. اطّلِع على فحص نشاط الشبكة للتعرّف على أساسيات تحليل نشاط الشبكة.

    لوحة "الشبكة"

    الشكل 4 لوحة "الشبكة"

  2. انقر على WS لفلترة جميع الموارد التي لا تشكّل عمليات اتصال عبر WebSocket.

    بعد النقر على WS، يتم عرض عمليات اتصال WebSockety فقط.

    الشكل 5 بعد النقر على WS، يتم عرض عمليات اتصال WebSockety فقط.

  3. انقر على الاسم لاتصال WebSocket لفحصه.

    فحص اتصال WebSocket

    الشكل 6 فحص اتصال WebSocket

  4. انقر على علامة التبويب الرسائل.

    علامة التبويب "الرسائل"

    الشكل 7 علامة التبويب "الرسائل"

  5. انقر على أحد إدخالات الرسالة الثنائية لفحصه.

    فحص رسالة ثنائية

    الشكل 8 فحص رسالة ثنائية

استخدِم القائمة المنسدلة في أسفل المشغّل لتحويل الرسالة إلى Base64 أو UTF-8. انقر على رمز النسخ إلى الحافظة نسخ إلى الحافظة لنسخ الرسالة الثنائية إلى الحافظة.

عرض رسالة ثنائية بترميز Base64

الشكل 9 عرض رسالة ثنائية بترميز Base64

التقاط لقطة شاشة للمنطقة المحدّدة في قائمة الأوامر

تتيح لك لقطات الشاشة للمنطقة التقاط لقطة شاشة لجزء من مساحة العرض. لقد كانت هذه الميزة متوفرة منذ فترة، ولكن كان من الصعب العثور على خطوات استخدامها. أصبحت لقطات الشاشة للمنطقة متوفرة الآن من قائمة الأوامر.

  1. ركِّز على DevTools ثم اضغط على Control+Shift+P أو Command+Shift+P (في نظام التشغيل Mac) لفتح قائمة الأوامر.

    قائمة الأوامر

    الشكل 10 قائمة الأوامر

  2. ابدأ بكتابة area، ثم اختَر التقاط لقطات شاشة للمنطقة، ثم اضغط على Enter.

  3. اسحب مؤشر الماوس فوق قسم مساحة العرض الذي تريد أخذ لقطة شاشة له.

    اختيار جزء من مساحة العرض لالتقاط لقطة شاشة

    الشكل 11 اختيار جزء من مساحة العرض لالتقاط لقطة شاشة

فلاتر مهام الخدمة في لوحة "الشبكة"

اكتب is:service-worker-initiated أو is:service-worker-intercepted في مربّع نص فلتر "لوحة أمان الشبكة" لعرض الطلبات التي تسبّب فيها عامل الخدمة (initiated) أو ربما عدّلها (intercepted).

الفلترة حسب is:service-worker-initiated

الشكل 12 الفلترة حسب is:service-worker-initiated

الفلترة حسب is:service-worker-intercepted

الشكل 13 الفلترة حسب is:service-worker-intercepted

اطّلِع على مراجع الفلترة للحصول على مزيد من المعلومات عن فلترة سجلات الشبكة.

تعديلات على لوحة الأداء

تُحدِّد الآن تسجيلات الأداء المهام الطويلة وFirst Paint.

اطّلِع على تقليل عمل سلسلة المهام الرئيسية للحصول على مثال لاستخدام لوحة "الأداء" لتحليل أداء تحميل الصفحة.

المهام الطويلة في تسجيلات الأداء

تعرض الآن تسجيلات الأداء المهام الطويلة.

تمرير مؤشر الماوس فوق مهمة طويلة في تسجيل الأداء

الشكل 14 تمرير مؤشر الماوس فوق مهمة طويلة في تسجيل الأداء

سرعة عرض أوّل محتوى مفيد على الصفحة في قسم "المُدد الزمنية"

يحدِّد الآن قسم "المواعيد الزمنية" في تسجيل الأداء مقياس "سرعة عرض المحتوى على الصفحة".

سرعة عرض أوّل محتوى مفيد على الصفحة في قسم "المُدد الزمنية"

الشكل 15 سرعة عرض أوّل محتوى مفيد على الصفحة في قسم "المُدد الزمنية"

دليل توجيهي جديد حول DOM

اطّلِع على مقالة البدء في عرض نموذج DOM وتغييره للحصول على جولة عملية حول ميزات المرتبطة بنموذج DOM.

تنزيل قنوات المعاينة

ننصحك باستخدام إصدار Canary أو Dev أو الإصدار التجريبي من Chrome كمتصفّح التطوير التلقائي. تتيح لك قنوات المعاينة هذه الوصول إلى أحدث ميزات DevTools، وتتيح لك اختبار واجهات برمجة تطبيقات منصات الويب المتطوّرة، وتساعدك في العثور على المشاكل في موقعك الإلكتروني قبل أن يعثر عليها المستخدمون.

التواصل مع فريق "أدوات مطوّري البرامج في Chrome"

استخدِم الخيارات التالية لمناقشة الميزات الجديدة أو التحديثات أو أي شيء آخر مرتبط بـ "أدوات مطوّري البرامج".

الميزات الجديدة في "أدوات المطوّرين"

قائمة بكل ما تم تناوله في سلسلة الميزات الجديدة في أدوات مطوّري البرامج