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

Jecelyn Yeen

Chrome 100

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

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

عرض قواعد ‎ @supports at وتعديلها في لوحة "الأنماط"

يمكنك الآن عرض قواعد CSS @supports at-rules وتعديلها في جزء الأنماط. تسهّل هذه التغييرات تجربة قواعد @ في الوقت الفعلي. افتح صفحة العرض التوضيحي هذه، ثم افحص العنصر <div class=”box”>، واطّلِع على قواعد @supports at-rules في اللوحة الأنماط. انقر على تعريف القاعدة لتعديلها.

عرض قواعد ‎ @supports وتعديلها

مشكلتان في Chromium: 1222574 و1222573

تحسينات على لوحة Recorder

تفعيل أدوات الاختيار الشائعة تلقائيًا

عند تحديد أداة اختيار فريدة أثناء التسجيل، تفضّل لوحة المسجّل الآن تلقائيًا العناصر التي تتضمّن السمات التالية:

  • data-testid
  • data-test
  • data-qa
  • data-cy
  • data-test-id
  • data-qa-id
  • data-testing

السمات أعلاه هي أدوات اختيار شائعة تُستخدَم في التشغيل الآلي للاختبار.

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

بما أنّ عنصر البريد الإلكتروني يتضمّن السمة data-testid، يتم استخدامه كأداة اختيار تلقائيًا بدلاً من السمتَين id أو class.

تفعيل أدوات الاختيار الشائعة تلقائيًا

تخصيص أداة الاختيار المُستخدَمة أثناء التسجيل

يمكنك تخصيص أداة اختيار التسجيل إذا كنت لا تستخدم أدوات الاختيار الشائعة.

على سبيل المثال، تستخدم صفحة العرض التوضيحي هذه السمة data-automate كأداة اختيار. ابدأ تسجيلًا جديدًا وأدخِل data-automate كسمة أداة الاختيار. املأ عنوان بريد إلكتروني ولاحظ قيمة أداة الاختيار ([data-automate=email-address]).

تخصيص أداة الاختيار المُستخدَمة أثناء التسجيل

نتيجة اختيار أداة الاختيار المخصّصة

إعادة تسمية تسجيل

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

إعادة تسمية تسجيل

معاينة خصائص الفئة/الدالة عند التمرير

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

معاينة خصائص الفئة/الدالة عند التمرير

مشكلة في Chromium: 1049947

الإطارات المعروضة جزئيًا في لوحة "الأداء"

تعرض ميزة "تسجيل الأداء" الآن فئة لقطات جديدة باسم "اللقطات المعروضة جزئيًا" في المخطط الزمني للقطات.

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

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

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

الإطارات المعروضة جزئيًا في لوحة &quot;الأداء&quot;

مشكلة في Chromium: 1261130

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

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

  • تم تعديل سلاسل وكيل المستخدم الخاصة بهواتف iPhone من أجل الأجهزة المحاكية. تحتوي جميع إصدارات iPhone بعد الإصدار 5 على سلسلة وكيل مستخدم تتضمّن iPhone OS 13_2_3. (1289553)
  • يمكنك الآن حفظ المقتطف كملف JavaScript مباشرةً. في السابق، كان عليك إضافة لاحقة الملف .js يدويًا. (1137218)
  • تعرض لوحة المصادر الآن أسماء متغيرات النطاق بشكل صحيح عند تصحيح الأخطاء باستخدام خريطة المصدر. في السابق، كانت لوحة المصادر تعرض أسماء متغيّرات النطاق المصغَّرة على الرغم من توفير خريطة المصدر. (1294682)
  • تعمل لوحة المصادر الآن على استعادة موضع التمرير بشكل صحيح عند تحميل الصفحة. في السابق، لم يكن يتم استعادة الموضع بشكل صحيح، ما كان يسبب إزعاجًا أثناء تصحيح الأخطاء. (1294422)

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

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

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

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

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

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