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

Jecelyn Yeen

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

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

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

مشكلة في Chromium: 1303521

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

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

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

مشكلة في Chromium: 1306756

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

يمكنك الآن إنشاء إضافة 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 للتحكّم في درجة التوازي في تطبيقاتها، مثلاً للتحكّم في حجم مجموعة سلاسل Emscripten. باستخدام هذه الميزة، يمكن للمطوّرين اختبار أداء تطبيقاتهم بعدد مختلف من النوى.

مشكلة في Chromium: 1297439

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

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

مشكلة في Chromium: 1285091

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

يتضمّن جزء ذاكرة التخزين المؤقت للصفحات السابقة/التالية في لوحة التطبيق قسم الإطارات الجديد لمساعدتك في تحديد الإطارات التي تحظر إمكانية الاستفادة من ميزة "التخزين المؤقت للصفحات السابقة/التالية".

مشكلة في Chromium: 1288158

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

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

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

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

مشكلة في Chromium: 1299241

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

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

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

مشاكل Chromium: 1329113 و1322115

لمحات متنوّعة

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

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

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

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

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

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

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

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

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