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

Jecelyn Yeen

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

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

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

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

مشكلة Chromium: 1303521

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

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

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

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

مشكلة Chromium: 1306756

إنشاء إضافة للوحة "المسجّلة الذكية"

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

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

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

مشكلة Chromium: 1325751

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

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

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

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

جرِّب ذلك بنفسك من خلال هذا العرض التوضيحي لتفاعلات الجمهور.

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

مشكلة Chromium: 960909

مسار جديد لأوقات المستخدم في لوحة "إحصاءات الأداء"

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

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

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

مسار "أوقات المستخدم" في لوحة "إحصاءات الأداء"

مشكلة Chromium: 1322808

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

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

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

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

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

مشكلة Chromium: 1018906

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

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

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

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

مشكلة Chromium: 1297439

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

عند الإكمال التلقائي لمتغيّرات CSS، تملأ أدوات مطوّري البرامج الآن المتغيّر غير بالألوان بقيمة مفيدة لتتمكّن من معاينة نوع التغيير الذي ستتضمّنه القيمة في العقدة.

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

مشكلة Chromium: 1285091

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

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

تحديد إطارات الحظر في جزء &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)

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

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

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

يمكنك استخدام الخيارات التالية لمناقشة الميزات والتغييرات الجديدة في المشاركة أو مناقشة أي معلومات أخرى متعلّقة بأدوات مطوري البرامج.

  • يمكنك إرسال اقتراح أو ملاحظات إلينا عبر crbug.com.
  • الإبلاغ عن مشكلة في "أدوات مطوري البرامج" باستخدام خيارات إضافية   المزيد > مساعدة > الإبلاغ عن مشاكل في "أدوات مطوري البرامج" في "أدوات مطوري البرامج"
  • يمكنك نشر تغريدة على @ChromeDevTools.
  • شارِك في التعليقات على الميزات الجديدة في فيديوهات YouTube أو نصائح حول أدوات مطوّري البرامج فيديوهات YouTube.

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

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