الميزات الجديدة في أدوات مطوّري البرامج (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 (Options) لتحديد عناصر متعددة في لوحة المصادر (1304070)

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

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

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

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

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

مشكلة في Chromium: 772558

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

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

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

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

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

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