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

Jecelyn Yeen

تسجيل أحداث النقر المزدوج والنقر بزر الماوس الأيمن في لوحة "المسجّل"

يمكن للوحة المسجّل الآن تسجيل الأحداث الناتجة عن النقر المزدوج والنقر بزر الماوس الأيمن.

تسجيل أحداث النقر المزدوج والنقر بزر الماوس الأيمن في لوحة "المسجّل"

في هذا المثال، ابدأ تسجيلاً وحاوِل تنفيذ الخطوات التالية:

  • انقر مرّتين على البطاقة لتكبيرها
  • انقر بزر الماوس الأيمن على البطاقة واختَر إجراءً من قائمة السياق.

لمعرفة كيف سجّلت أداة المسجّل هذه الأحداث، وسِّع الخطوات:

  • يتم تسجيل النقر مرّتين على أنّه type: doubleClick.
  • يتم تسجيل حدث النقر بزر الماوس الأيمن كحدث type: click ولكن يتم ضبط السمة button على القيمة secondary. قيمة button للنقرة العادية بالماوس هي primary.

مشاكل Chromium: 1300839 و1322879 و1299701 و1323688

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

يمكنك الآن استخدام Lighthouse لقياس أداء موقعك الإلكتروني بما يتجاوز تحميل الصفحة.

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

تتيح لوحة Lighthouse الآن 3 أوضاع لقياس تدفق المستخدمين:

  • تحلّل تقارير التنقّل أداء تحميل صفحة واحدة. التنقّل هو نوع التقارير الأكثر شيوعًا. جميع تقارير Lighthouse قبل الإصدار الحالي هي تقارير تنقّل.
  • تحلّل تقارير الفترات الزمنية أداء صفحة خلال فترة زمنية عشوائية، وعادةً ما تتضمّن تفاعلات المستخدم.
  • تُجري تقارير اللقطات تحليلاً للصفحة في حالة مُحدَّدة، عادةً ما بعد تفاعل المستخدم معها.

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

وضع الإطار الزمني

يمكنك الاطّلاع على مسارات المستخدمين في Lighthouse للتعرّف على حالات الاستخدام الفريدة ومزايا وقيود كل وضع.

مشكلة في Chromium: 1291284

تعديلات على "إحصاءات الأداء"

تحسين عناصر التحكّم في التكبير/التصغير في لوحة "إحصاءات الأداء"

ستكبّر "أدوات مطوّري Chrome" الآن استنادًا إلى مؤشر الماوس بدلاً من موضع رأس التشغيل.باستخدام ميزة التكبير أو التصغير المستندة إلى المؤشر الأخيرة، يمكنك تحريك الماوس إلى أي مكان في المقطع، ثم تكبير المنطقة المطلوبة على الفور.

اطّلِع على إحصاءات الأداء لمعرفة كيفية الحصول على إحصاءات قابلة للاستخدام وتحسين أداء موقعك الإلكتروني باستخدام اللوحة.

مشكلة في Chromium: 1313382

تأكيد حذف تسجيل أداء

تعرض "أدوات مطوّري Chrome" الآن مربّع حوار تأكيد قبل حذف تسجيل للأداء.

تأكيد حذف تسجيل أداء

مشكلة في Chromium: 1318087

إعادة ترتيب اللوحات في لوحة "العناصر"

يمكنك الآن إعادة ترتيب اللوحات في لوحة العناصر استنادًا إلى إعداداتك المفضّلة.

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

إعادة ترتيب اللوحات في لوحة "العناصر"

مشكلة في Chromium: 1146146

اختيار لون خارج المتصفّح

تتيح "أدوات مطوّري البرامج" الآن اختيار لون خارج المتصفّح. في السابق، كان بإمكانك اختيار لون من داخل المتصفّح فقط.

في لوحة الأنماط، انقر على أي معاينة للألوان لفتح أداة اختيار الألوان. استخدِم أداة اختيار الألوان لاختيار لون من أي مكان.

اختيار لون خارج المتصفّح

مشكلة في Chromium: 1245191

تحسين معاينة القيم المضمّنة أثناء تصحيح الأخطاء

يعرض مصحّح الأخطاء الآن معاينة القيم المضمّنة بشكل صحيح.

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

تحسين معاينة القيم المضمّنة أثناء تصحيح الأخطاء

مشكلة في Chromium: 1316340

إتاحة تخزين الكائنات الثنائية الكبيرة (blob) لبرامج المصادقة الافتراضية

تحتوي علامة التبويب WebAuthn الآن على مربّع الاختيار الجديد إتاحة تخزين الكائنات الثنائية الكبيرة (blob) لأجهزة المصادقة الافتراضية.

يكون مربّع الاختيار هذا غير مفعّل تلقائيًا. يمكنك تفعيلها فقط لأدوات المصادقة التي تستخدم بروتوكول ctap2 المتوافق مع المفاتيح المخزّنة على الجهاز.

إتاحة تخزين الكائنات الثنائية الكبيرة (blob) لبرامج المصادقة الافتراضية

مشكلة في Chromium: 1321803

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

يتوفّر الآن اختصاران جديدان للوحة المفاتيح في لوحة المصادر:

  • تبديل الشريط الجانبي للتنقّل (على اليمين) باستخدام Control / Command + Shift + Y
  • تبديل الشريط الجانبي لمصحّح الأخطاء (على اليسار) باستخدام Control / Command + Shift + H

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

مشاكل Chromium: 1226363

تحسينات على خرائط المصادر

في السابق، كان المطوّرون يواجهون حالات تعذُّر عشوائية أثناء:

  • تصحيح الأخطاء باستخدام مثال Codepen
  • تحديد الموقع الجغرافي المصدر لمشاكل الأداء في مثال Codepen
  • علامة التبويب المكوّن غير متوفّرة عند تفعيل React DevTools

في ما يلي بعض الإصلاحات على خرائط المصدر لتحسين تجربة تصحيح الأخطاء بشكل عام:

  • تصحيح عملية الربط بين الموقع الجغرافي والإزاحة للنصوص البرمجية المضمّنة والموقع الجغرافي المصدر
  • استخدام معلومات احتياطية لموقع النص في الإطار
  • حلّ عناوين URL النسبية بشكل صحيح باستخدام عنوان URL الخاص بالإطار

مشاكل Chromium: 1319828 و1318635 و1305475

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

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

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

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

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

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