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

Jecelyn Yeen

إعادة تشغيل الإطار أثناء تصحيح الأخطاء

عادت ميزة إعادة تشغيل الإطار. يمكنك إعادة تشغيل الرمز السابق عند إيقافه مؤقتًا في مكان ما في دالة. تم إيقاف هذه الميزة نهائيًا في الإصدار 92 من Chrome وإزالتها بسبب مشاكل في الثبات.

في هذا المثال، أوقف أداة تصحيح الأخطاء مؤقتًا في البداية عند نقطة التوقف (السطر 343) بالقرب من نهاية دالة toggleColorScheme. لإعادة بدء عملية تصحيح الأخطاء من بداية الدالة toggleColorScheme، وسِّع قسم تسلسل الاستدعاء في لوحة أداة تصحيح الأخطاء، وانقر بزر الماوس الأيمن على toggleColorScheme واختَر إعادة تشغيل الإطار.

إعادة تشغيل الإطار أثناء تصحيح الأخطاء

مشكلة Chromium: 1303521

خيارات إعادة التشغيل البطيء في لوحة "المسجّلة الذكية"

يمكنك الآن إعادة تشغيل مسارات المستخدِمين بسرعة أبطأ، أي بطيئة جدًا وببطء شديد. تتيح لك هذه الخيارات مراقبة كل خطوة تتم إعادة تشغيلها على الشاشة بشكل أفضل.

افتح لوحة المسجِّل وابدأ تسجيلًا جديدًا. بعد اكتمال التسجيل، انقر على الزر المنسدلة إعادة تشغيل. اختَر سرعة لبدء إعادة تشغيل.

خيارات إعادة التشغيل البطيء في لوحة "المسجّلة الذكية"

مشكلة Chromium: 1306756

إنشاء إضافة للوحة Recorder

يمكنك الآن إنشاء إضافة Chrome أو تثبيتها لتصدير نصوص إعادة التشغيل بالتنسيق المفضّل لديك. اطّلِع على مستندات Recorder extension API للتعرّف على كيفية إنشاء واحدة.

لتثبيت إضافة تجريبية، اتّبِع هذه الخطوات الموضّحة في المستندات.

إضافة مخصّصة للوحة "المسجّلة الذكية"

مشكلة Chromium: 1325751

تجميع الملفات حسب "المصدر الذي تم تأليفه" أو "المصدر الذي تم نشره" في لوحة "المصادر"

فعِّل الخيار الجديد تجميع الملفات حسب ما تم تأليفه / ما تم نشره لتنظيم ملفاتك في لوحة "المصادر". عند تطوير تطبيقات الويب باستخدام إطارات عمل (مثل React وAngular)، قد يكون من الصعب التنقّل في الملفات المصدر بسبب الملفات المُكثَّفة التي تنشئها أدوات الإنشاء (مثل Webpack وVite).

باستخدام مربّع الاختيار هذا، يمكنك تجميع الملفات في فئتين للبحث عن الملفات بشكل أسرع:

  • المؤلف: تشبه الملفات المصدر التي تطّلع عليها في بيئة تطوير البرامج المتكاملة. تنشئ أدوات المطوّرين هذه الملفات استنادًا إلى خرائط المصادر (التي تقدّمها أدوات الإنشاء).
  • تم النشر: الملفات الفعلية التي يقرأها المتصفّح وتكون هذه الملفات عادةً مصغّرة.

يمكنك تجربة ذلك بنفسك باستخدام الإصدار التجريبي من React.

تجميع الملفات حسب "المصدر الذي تم تأليفه" أو "المصدر الذي تم نشره" في لوحة "المصادر"

مشكلة Chromium: 960909

تتبُّع "مُدد تفاعل المستخدِمين" الجديدة في لوحة "إحصاءات الأداء"

يمكنك عرض علامات performance.measure() في تسجيلك باستخدام مسار مُدد المستخدمين الجديد في لوحة إحصاءات الأداء.

على سبيل المثال، تستخدِم هذه صفحة الويب طريقة performance.measure() لحساب الوقت المنقضي في تحميل النص.

عند بدء قياس وقت تحميل الصفحة، يظهر مقطع مُدد المستخدمين في التسجيل. انقر على عنصر التوقيتات لعرض تفاصيله في اللوحة الجانبية.

تتبُّع أوقات المستخدِمين في لوحة "إحصاءات الأداء"

مشكلة Chromium: 1322808

إظهار خانة العنصر المحدّدة

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

يحتوي هذا المثال على بطاقات تتضمّن بعض الفتحات المُسمّاة. راجِع خانة person-occupation في إحدى البطاقات، وانقر على شارة slot بجانبها للاطّلاع على خانتها المحدّدة.

تعرَّف على كيفية استخدام عنصرَي <template> و<slot> لإنشاء نموذج مرن يمكن استخدامه بعد ذلك لتعبئة shadow DOM لمكوّن ويب.

إظهار خانة العنصر المحدّدة

مشكلة Chromium: 1018906

محاكاة مستوى التزامن في الجهاز لتسجيلات الأداء

يتيح الإعداد الجديد التوافق مع الأجهزة في لوحة الأداء للمطوّرين ضبط القيمة التي يُبلغ عنها navigator.hardwareConcurrency.

تستخدم بعض التطبيقات navigator.hardwareConcurrency للتحكّم في درجة التوازي لتطبيقها، على سبيل المثال، للتحكّم في حجم مجموعة pthread في Emscripten. باستخدام هذه الميزة، يمكن للمطوّرين اختبار أداء تطبيقاتهم بعدد نوى مختلف.

محاكاة مستوى التزامن في الجهاز لتسجيلات الأداء

مشكلة Chromium: 1297439

معاينة قيمة غير اللون عند إكمال متغيّرات CSS تلقائيًا

عند إكمال متغيّرات CSS تلقائيًا، تملأ أدوات المطوّر الآن المتغيّر غير المرتبط بالألوان بقيمة ذات مغزى حتى تتمكّن من معاينة نوع التغيير الذي ستُحدثه القيمة في العقدة.

معاينة قيمة غير لون عند إكمال متغيّرات CSS تلقائيًا

مشكلة Chromium: 1285091

تحديد الإطارات المحظورة في لوحة "التخزين المؤقت للصفحات"

تحتوي لوحة التخزين المؤقت للرجوع/الانتقال إلى الأمام في لوحة التطبيق على قسم الإطارات الجديد لمساعدتك في تحديد الإطارات المحظورة التي قد تمنع الصفحة من أن تكون مؤهلة لاستخدام ميزة bfcache.

تحديد الإطارات المحظورة في لوحة &quot;التخزين المؤقت للصفحات&quot;

مشكلة Chromium: 1288158

اقتراحات محسّنة للإكمال التلقائي لكائنات JavaScript

يتم الآن عرض ميزة الإكمال التلقائي لسمات كائنات JavaScript استنادًا إلى هذا الترتيب:

  1. أن يكون لها سمات قابلة للعد
  2. امتلاك خصائص غير قابلة للتعداد
  3. السمات القابلة للعدّ المُكتسَبة
  4. السمات غير القابلة للعدّ المُكتسَبة

في السابق، كان من الصعب على المطوّرين العثور على المواقع ذات الصلة لأنّ الاقتراح كان يفضّل المواقع الخاصة على المواقع المُكتسَبة، وكانت تُعطى جميع المواقع المُكتسَبة الأولوية نفسها.

اقتراحات محسّنة للإكمال التلقائي لكائنات JavaScript

مشكلة Chromium: 1299241

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

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

  • تعمل نقاط التوقف الآن في <script> مضمّنة مع التعليقات التوضيحية sourceURL.
  • يحلّ محلل الأخطاء الآن المتغيّرات على مستوى الكتلة في عرض النطاق باستخدام خرائط المصدر. حلّ المتغيّرات على مستوى الكتلة
  • يحلّ محلل الأخطاء الآن المتغيّرات في الدوالّ السهمية في عرض النطاق باستخدام خرائط المصدر. حلّ المتغيّرات في الدوالّ السهمية

مشاكل Chromium: 1329113 و1322115

لحظات مميّزة متنوعة

في ما يلي بعض الإصلاحات البارزة في هذا الإصدار:

  • تم إصلاح إعداد الإكمال التلقائي في لوحة المصادر. في السابق، كان الإكمال التلقائي مفعّلاً دائمًا حتى إذا كان الإعداد غير مفعّل. (1323286)
  • تم تعديل علامة التبويب البيان في لوحة التطبيق لتحليل أحدث تنسيقات المخططات اللونية. (1318305)
  • تم تحسين الاقتراحات المتعلّقة <script async> بمشاكل حظر العرض في لوحة إحصاءات الأداء. في السابق، كانت أدوات مطوري البرامج تقترح add async attribute to the script tag على الرغم من أنّ النص البرمجي تم وضع علامة عليه بأنّه غير متزامن. (1334096)
  • ترصد لوحة إحصاءات الأداء الآن إطارات iframe كسبب محتمل لتغيّرات التصميم. يمكنك الاطّلاع على تفاصيل إطار iframe في لوحة التفاصيل. (1328873)
  • عند فتح ملف في قائمة الأوامر، يتم الآن ترتيب الملفات التي تم إنشاؤها (الملفات التي تم إنشاؤها بواسطة خرائط المصدر) بشكلٍ أعلى حتى تظهر فوق النصوص البرمجية المنشورة التي تحمل أسماء مشابهة. (1312929)

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

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

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

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

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

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