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

Jecelyn Yeen

أدوات جديدة لتصحيح أخطاء المربّعات المرنة في CSS

تتضمّن أدوات المطوّرين الآن أدوات مخصّصة لتصحيح أخطاء CSS flexbox.

أدوات تصحيح أخطاء CSS flexbox

عندما يتم تطبيق display: flex أو display: inline-flex على عنصر HTML في صفحتك، يمكنك رؤية شارة flex بجانبه في لوحة "العناصر". انقر على الشارة لتبديل عرض ملف شخصي ملفّق على الصفحة.

في لوحة الأنماط، يمكنك النقر على الرمز الجديد بجانب display: flex أو display: inline-flex لفتح محرِّر Flexbox. يوفّر محرِّر Flexbox طريقة سريعة لتعديل خصائص Flexbox. جرِّب ذلك بنفسك.

بالإضافة إلى ذلك، تحتوي لوحة التنسيق على قسم Flexbox يعرض جميع عناصر Flexbox في الصفحة. يمكنك تبديل التراكب لكل عنصر.

قسم Flexbox في لوحة "التنسيق"

مشاكل Chromium: 1166710 و1175699

طبقة جديدة من "مؤشرات أداء الويب الأساسية"

يمكنك عرض أداء صفحتك وقياسه بشكل أفضل باستخدام العنصر المركّب الجديد لـ "مؤشرات أداء الويب الأساسية".

مؤشرات أداء الويب الأساسية هي مبادرة أطلقتها Google تهدف إلى توفير إرشادات موحّدة حول إشارات الجودة التي هي ضرورية لتقديم تجربة مستخدم رائعة على الإنترنت.

افتح قائمة الأوامر، وشغِّل الأمر Show Rendering (عرض العرض)، ثم فعِّل مربّع الاختيار Core Web Vitals.

يعرض التراكب حاليًا ما يلي:

عناصر "مؤشرات أداء الويب الأساسية" المركّبة

مشكلة Chromium: 1152089

تعديلات على علامة التبويب "المشاكل"

نقل عدد المشاكل إلى شريط حالة وحدة التحكّم

تمت إضافة زرّ جديد يعرض عدد المشاكل في شريط حالة وحدة التحكّم لتحسين مستوى ظهور تحذيرات المشاكل. سيحلّ هذا الإجراء محلّ رسالة المشكلة في Console.

عدد المشاكل في شريط حالة Console

مشكلة Chromium: 1140516

الإبلاغ عن مشاكل "النشاط الموثوق به على الويب"

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

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

مشاكل "النشاط الموثوق به على الويب" في علامة التبويب "المشاكل"

مشكلة Chromium: 1147479

تنسيق السلاسل كقيم ثابتة (صالحة) لسلاسل JavaScript في وحدة التحكّم

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

تنسيق السلاسل كقيم ثابتة (صالحة) لسلاسل JavaScript

مشكلة Chromium: 1178530

لوحة الرموز المميّزة Trust Token الجديدة في لوحة التطبيق

تعرض "أدوات المطوّر" الآن جميع الرموز المميّزة Trust Token المتاحة في سياق التصفّح الحالي في لوحة الرموز المميّزة Trust Token الجديدة، ضمن لوحة التطبيق.

‫Trust Token هي واجهة برمجة تطبيقات جديدة للمساعدة في مكافحة الاحتيال وتمييز برامج التتبُّع عن المستخدمين الفعليين، بدون التتبُّع الساكن. تعرَّف على كيفية بدء استخدام الرموز الموثوق بها.

لوحة "الرموز المميّزة الموثوق بها" الجديدة

مشكلة Chromium: 1126824

محاكاة ميزة الوسائط color-gamut في CSS

محاكاة ميزة الوسائط color-gamut في CSS

يتيح لك طلب البحث عن الوسائط color-gamut اختبار النطاق التقريبي للألوان المتوافقة مع المتصفّح وجهاز الإخراج. على سبيل المثال، إذا تطابق طلب الوسائط color-gamut: p3، يعني ذلك أنّ جهاز المستخدم متوافق مع مساحة الألوان Display-P3.

افتح قائمة الأوامر، وشغِّل الأمر عرض المعالجة، ثم اضبط القائمة المنسدلة محاكاة ميزة color-gamut لوسائط صفحات الأنماط المتتالية (CSS).

مشكلة Chromium: 1073887

أدوات محسّنة لتطبيقات الويب التقدّمية

تعرض "أدوات مطوّري البرامج في Chrome" الآن رسالة تحذير أكثر تفصيلاً بشأن إمكانية تثبيت تطبيقات الويب التقدّمية (PWA) في وحدة التحكّم، مع رابط يؤدي إلى المستندات.

تحذير بشأن قابلية تثبيت تطبيق الويب التقدّمي

تعرض الآن لوحة البيان رسالة تحذير إذا كان وصف البيان يتجاوز 324 حرفًا.

تحذير بشأن اقتطاع وصف تطبيق الويب التقدّمي

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

تحذير بشأن لقطات شاشة التطبيقات المتوافقة مع الأجهزة الجوّالة

مشكلة Chromium: 1146450 و1169689 و965802

عمود Remote Address Space جديد في لوحة "الشبكة"

استخدِم عمود Remote Address Space الجديد في لوحة "الشبكة" للاطّلاع على مساحة عناوين IP للشبكة لكلّ مورد شبكة.

عمود "مساحة العنوان عن بُعد" الجديد

مشكلة Chromium: 1128885

تحسينات الأداء

تم تحسين أداء تحميل الصفحة عندما تكون أدوات مطوّري البرامج مفتوحة. وفي بعض الحالات القصوى، شهدنا تحسينات في الأداء بمقدار 10 أضعاف.

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

يُرجى متابعتنا للحصول على المزيد من التفاصيل حول عملية التنفيذ في منشور مدوّنة هندسي.

مشاكل Chromium: 1069425 و1077657

عرض الميزات المسموح بها/غير المسموح بها في عرض "تفاصيل الإطار"

تعرض الآن طريقة عرض تفاصيل الإطارات قائمة بميزات المتصفّح المسموح بها وغير المسموح بها التي تتحكّم فيها سياسة الأذونات.

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

الميزات المسموح بها/غير المسموح بها استنادًا إلى سياسة الأذونات

مشكلة Chromium: 1158827

عمود SameParty جديد في لوحة "ملفات تعريف الارتباط"

تعرض الآن لوحة "ملفات تعريف الارتباط" في لوحة "التطبيق" سمة SameParty لملفات تعريف الارتباط. سمة SameParty هي سمة منطقية جديدة للإشارة إلى ما إذا كان يجب تضمين ملفّ تعريف ارتباط في الطلبات المرسَلة إلى مصادر مجموعات نطاقات الطرف الأول نفسها.

عمود SameParty

مشكلة Chromium: 1161427

إيقاف نهائي لميزة دعم fn.displayName غير العادي

تم إيقاف fn.displayName غير العادي نهائيًا. استخدِم fn.name بدلاً من ذلك.

مثال على استخدام displayName

كان Chrome يتيح دائمًا استخدام السمة غير العادية fn.displayName كطريقة للسماح للمطوّرين بالتحكم في أسماء تصحيح الأخطاء للدوالّ التي تظهر في error.stack وفي عمليات تتبُّع تسلسل الدوالّ في أدوات مطوري البرامج. في المثال أعلاه، كان تسلسل استدعاء الدوال البرمجية يعرض سابقًا noLongerSupport.

استبدِل fn.displayName بالرمز العادي fn.name الذي تمّت برمجته ليكون قابلاً للضبط (من خلال Object.defineProperty) في ECMAScript 2015 لاستبدال السمة غير العادية fn.displayName.

لم يكن استخدام fn.displayName موثوقًا به وغير متّسق في محرّكات المتصفّحات. ويؤدي ذلك إلى إبطاء جمع "تتبُّع تسلسل استدعاء الدوال البرمجية"، وهي تكلفة يدفعها المطوّرون دائمًا بغض النظر عمّا إذا كانوا يستخدمون fn.displayName أم لا.

مثال على استخدام الاسم

مشكلة Chromium: 1177685

إيقاف رمز Don't show Chrome Data Saver warning نهائيًا في قائمة "الإعدادات"

تمت إزالة الإعداد Don't show Chrome Data Saver warning لأنّه تم إيقاف ميزة "توفير البيانات" في Chrome نهائيًا.

إعدادات "عدم عرض تحذير "ميزة "توفير البيانات" في Chrome" المتوقّفة نهائيًا

مشكلة Chromium: 1056922

الميزات التجريبية

الإبلاغ التلقائي عن المشاكل المتعلّقة بانخفاض التباين في علامة التبويب "المشاكل"

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

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

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

الإبلاغ التلقائي عن المشاكل المتعلّقة بانخفاض التباين

مشكلة Chromium: 1155460

العرض الكامل لشجرة تسهيل الاستخدام في لوحة "العناصر"

يمكنك الآن التبديل لعرض العرض الجديد والمحسّن لشجرة تسهيل الاستخدام الكامل للصفحة.

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

بعد تفعيل التجربة، سيظهر زرّ جديد في لوحة العناصر، يمكنك النقر عليه للتبديل بين شجرة DOM الحالية وشجرة تسهيل الاستخدام الكاملة.

يُرجى العِلم أنّ هذه التجربة لا تزال في مرحلة مبكرة. ونخطّط لتحسين هذه الميزة وتوسيع نطاقها مع مرور الوقت.

العرض الكامل لشجرة تسهيل الاستخدام

مشكلة Chromium: 887173

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

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

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

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

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

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