الميزات الجديدة في أدوات مطوّري البرامج (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 كمتصفّح التطوير التلقائي. تتيح لك قنوات المعاينة هذه الوصول إلى أحدث ميزات "أدوات مطوري البرامج"، واختبار واجهات برمجة التطبيقات الأكثر تطوّرًا للأنظمة الأساسية للويب، كما تساعدك في العثور على المشاكل على موقعك الإلكتروني قبل أن يكتشفها المستخدمون.

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

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

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

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