الميزات الجديدة في أدوات مطوّري البرامج (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

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

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

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

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

مشكلة Chromium: 1313382

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

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

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

مشكلة Chromium: 1318087

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

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

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

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

مشكلة Chromium: 1146146

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

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

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

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

مشكلة Chromium: 1245191

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

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

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

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

مشكلة Chromium: 1316340

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

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

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

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

مشكلة Chromium: 1321803

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

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

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

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

مشاكل Chromium: 1226363

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

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

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

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

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

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

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

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

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

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

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

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