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

Kayce Basques

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

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

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

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

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

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

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

تستخدم فئة تطبيقات الويب التقدّمية في التقرير الآن نظامًا لتسجيل النقاط باستخدام شارات.

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

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

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

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

   

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

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

   

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

3. انقر على اسم عملية ربط WebSocket لفحصها.

   

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

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

   

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

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

   

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

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

الشكل 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) بواسطة أحد عاملي الخدمة.

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

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

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

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

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

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

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

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

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

"سرعة عرض أوّل محتوى" في قسم "التوقيتات"

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

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

دليل توجيهي جديد حول نموذج المستند (DOM)

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

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

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

التواصل مع فريق Chrome DevTools

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

• يمكنك إرسال الملاحظات وطلبات الميزات إلينا على crbug.com.
• يمكنك الإبلاغ عن مشكلة في "أدوات مطوّري البرامج" باستخدام more_vert المزيد من الخيارات > مساعدة > الإبلاغ عن مشكلة في "أدوات مطوّري البرامج" في "أدوات مطوّري البرامج".
• يمكنك نشر تغريدة على ‎@ChromeDevTools.
• يمكنك إضافة تعليقات على فيديوهات "الميزات الجديدة في أدوات مطوّري البرامج" على YouTube أو فيديوهات "نصائح حول أدوات مطوّري البرامج" على YouTube.

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

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