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

Jecelyn Yeen

استيراد وتصدير مهام سير المستخدم المسجَّلة كملف JSON

تتيح لوحة المسجّل الآن استيراد تسجيلات مسار المستخدم وتصديرها كملف JSON. تسهّل هذه الإضافة مشاركة تدفّقات المستخدمين ويمكن أن تكون مفيدة للإبلاغ عن الأخطاء.

على سبيل المثال، نزِّل ملف JSON هذا. يمكنك استيراده باستخدام زر الاستيراد وإعادة تشغيل مسار المستخدم.

بالإضافة إلى ذلك، يمكنك تصدير التسجيل أيضًا. بعد تسجيل مسار مستخدم، انقر على زر التصدير. تتوفّر 3 خيارات للتصدير:

  • تصدير كملف JSON نزِّل التسجيل كملف JSON.
  • تصدير البيانات كنص برمجي بتنسيق ‎ @puppeteer/replay نزِّل التسجيل كنص برمجي بتنسيق Puppeteer Replay.
  • تصدير النص البرمجي بتنسيق Puppeteer نزِّل التسجيل كنص برمجي بتنسيق Puppeteer.

راجِع الوثائق لمعرفة المزيد حول الاختلافات بين هذه الخيارات.

خيارات التصدير في لوحة "مسجّلة الشاشة"

مشكلة في Chromium: 1257499

عرض الطبقات المتتالية في جزء "الأنماط"

تتيح لك الطبقات المتتالية التحكّم بشكل أكثر وضوحًا في ملفات CSS لمنع تعارضات تحديد الأنماط. ويُعدّ ذلك مفيدًا بشكل خاص لقواعد الرموز البرمجية الكبيرة وأنظمة التصميم وعند إدارة الأنماط التابعة لجهات خارجية في التطبيقات.

في هذا المثال، تم تحديد 3 طبقات متتالية: page وcomponent وbase. في لوحة الأنماط، يمكنك عرض كل طبقة وأنماطها.

انقر على اسم الطبقة لعرض ترتيب الطبقات. تتمتّع طبقة page بأعلى مستوى من التحديد، لذا تكون خلفية box خضراء.

عرض الطبقات المتتالية في جزء "الأنماط"

مشكلة في Chromium: 1240596

التوافق مع دالة الألوان hwb()

يمكنك الآن عرض تنسيق ألوان HWB وتعديله في "أدوات مطوّري البرامج".

في لوحة الأنماط، اضغط باستمرار على مفتاح Shift وانقر على أي معاينة للون لتغيير تنسيق اللون. تمت إضافة تنسيق ألوان HWB.

بدلاً من ذلك، يمكنك تغيير تنسيق اللون إلى HWB في أداة اختيار الألوان.

دالة الألوان hwb()

تحسين عرض المواقع الخاصة

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

السمات الخاصة في Console

مشاكل Chromium: 1296855 وhttps://crbug.com/1303407

لمحات متنوّعة

في ما يلي بعض الإصلاحات الجديرة بالذكر في هذا الإصدار:

  • تعرض ذاكرة التخزين المؤقت للصفحات الآن رقم تعريف الإضافة التي حظرت bfcache في حال توفّره.( 1284548)
  • تم إصلاح ميزة الإكمال التلقائي للعناصر الشبيهة بالمصفوفات وأسماء فئات CSS وعلامتَي map.get وHTML. (1297101، 1297491، 1293807، 1296983)
  • تم إصلاح التمييز غير الصحيح عند النقر مرّتين على الكلمات والتراجع عن الإكمال التلقائي. (1298437، 1298667)
  • تم إصلاح اختصار لوحة المفاتيح الخاص بالتعليقات في لوحة المصادر. (1296535)
  • إعادة تفعيل إمكانية استخدام مفتاح Alt (الخيارات) لتحديد عناصر متعددة في لوحة المصادر (1304070)

[تجريبي] وضعا الفترة الزمنية واللقطة الجديدان في لوحة Lighthouse

بالإضافة إلى وضع التنقّل الحالي، تتيح لوحة Lighthouse الآن وضعَين إضافيَين لقياس مسارات المستخدمين، وهما الفترة الزمنية واللقطة.

على سبيل المثال، يمكنك استخدام تقارير الفترات الزمنية لتحليل تفاعلات المستخدمين. افتح صفحة العرض التوضيحي هذه. اختَر وضع المدّة الزمنية وانقر على بدء المدّة الزمنية. في الصفحة، انقر على قهوة وأنهِ الفترة الزمنية. اقرأ التقرير لمعرفة إجمالي وقت الحظر وتغيير التصميم التراكمي اللذين تسبّب فيهما التفاعل.

لكل وضع حالات استخدام ومزايا وقيود فريدة. يُرجى الرجوع إلى مستندات Lighthouse للحصول على مزيد من المعلومات.

وضع الفترة الزمنية ووضع اللقطة في لوحة Lighthouse

مشكلة في Chromium: 772558

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

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

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

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

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

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