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

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

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

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

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

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

مشاكل Chromium: 1166710 و1175699

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

يمكنك الآن عرض أداء صفحتك وقياسه بشكل أفضل باستخدام العنصر المركّب الجديد الخاص بمؤشرات Core Web Vitals.

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

افتح قائمة الأوامر، وشغِّل الأمر عرض عملية العرض، ثم ضَع علامة في مربّع الاختيار مؤشرات أداء الويب الأساسية.

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

• سرعة عرض أكبر جزء من المحتوى على الصفحة (LCP): يقيس هذا المقياس أداء التحميل. لتقديم تجربة جيدة للمستخدم، يجب أن تحدث سرعة عرض أكبر محتوى مرئي (LCP) خلال 2.5 ثانية من بدء تحميل الصفحة للمرة الأولى.
• مهلة الاستجابة لأوّل إدخال (FID): يقيس هذا المقياس التفاعل. لتقديم تجربة جيدة للمستخدم، يجب أن تكون قيمة FID في الصفحات أقل من 100 ملّي ثانية.
• متغيّرات التصميم التراكمية (CLS): يقيس هذا المقياس الثبات البصري. لتقديم تجربة جيدة للمستخدم، يجب أن تحافظ الصفحات على نتيجة CLS أقل من 0.1.

مشكلة في Chromium: 1152089

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

نقل عدد المشاكل إلى شريط الحالة في Console

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

مشكلة في Chromium: 1140516

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

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

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

مشكلة في Chromium: 1147479

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

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

مشكلة في Chromium: 1178530

لوحة Trust Tokens جديدة في "لوحة التطبيق"

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

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

مشكلة في Chromium: 1126824

محاكاة ميزة color-gamut لوسائط صفحات الأنماط المتتالية (CSS)

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

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

مشكلة Chromium: 1073887

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

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

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

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

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

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

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

مشكلة في Chromium: 1128885

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

تم الآن تحسين أداء تحميل الصفحات عند فتح "أدوات مطوّري البرامج". في بعض الحالات القصوى، لاحظنا تحسّنًا في الأداء بمقدار 10 أضعاف.

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

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

مشاكل Chromium: 1069425 و1077657

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

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

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

مشكلة في Chromium: 1158827

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

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

مشكلة في Chromium: 1161427

إيقاف دعم fn.displayName غير العادي

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

كان Chrome يتيح استخدام السمة غير المتوافقة مع المعايير fn.displayName كطريقة تتيح للمطوّرين التحكّم في أسماء تصحيح الأخطاء للدوال التي تظهر في error.stack وفي عمليات تتبُّع تسلسل استدعاء الدوال في "أدوات مطوّري البرامج". في المثال أعلاه، كان Call 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" نهائيًا.

مشكلة في Chromium: 1056922

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

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

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

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

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

مشكلة في Chromium: 1155460

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

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

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

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

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

مشكلة في Chromium: 887173

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

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

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

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

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

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

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