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

Jecelyn Yeen

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

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

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

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

  • التصدير كملف JSON نزِّل التسجيل كملف JSON.
  • التصدير كنص برمجي @puppeteer/replay نزِّل التسجيل كنص برمجي لإعادة تشغيل Puppeteer.
  • التصدير كنص برمجي من مكتبة 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

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

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

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

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

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

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