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

Kayce Basques
Kayce Basques
X GitHub

حلّ المشاكل في الموقع الإلكتروني باستخدام علامة التبويب "المشاكل" الجديدة

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

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

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

خطأ في Chromium: #1068116

عرض معلومات تسهيل الاستخدام في تلميح "وضع الفحص"

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

تلميح "وضع الفحص" الذي يتضمّن معلومات تسهيل الاستخدام

خطأ في Chromium: #1040025

تعديلات على "لوحة الأداء"

عرض معلومات "وقت الحظر الكلي" (TBT) في التذييل

بعد تسجيل أداء التحميل، تعرض الآن "لوحة الأداء" معلومات إجمالي وقت الحظر (TBT) في التذييل. ‫TBT هو مقياس لأداء التحميل يساعد في تحديد المدة التي تستغرقها الصفحة لتصبح قابلة للاستخدام. يقيس هذا المقياس المدة التي تبدو فيها الصفحة قابلة للاستخدام (لأنّه تم عرض محتواها على الشاشة)، ولكنها ليست قابلة للاستخدام فعليًا لأنّ JavaScript يحظر سلسلة التعليمات الرئيسية، وبالتالي لا يمكن للصفحة الاستجابة لبيانات المستخدم. إنّ "إجمالي وقت الحظر" هو مقياس المختبر الرئيسي لتقدير "مهلة الاستجابة الأولى"، وهو أحد مؤشرات أداء الويب الأساسية الجديدة من Google.

للحصول على معلومات حول "إجمالي وقت الحظر"، لا تستخدِم سير عمل إعادة تحميل الصفحة إعادة تحميل الصفحة لتسجيل أداء تحميل الصفحة. بدلاً من ذلك، انقر على تسجيل تسجيل، أعِد تحميل الصفحة يدويًا، وانتظِر إلى أن يتم تحميلها، ثم أوقِف التسجيل. إذا ظهرت لك الرسالة Total Blocking Time: Unavailable، يعني ذلك أنّ "أدوات مطوّري البرامج" لم تحصل على المعلومات التي تحتاج إليها من بيانات تحديد الملفات الشخصية الداخلية في Chrome.

معلومات "إجمالي وقت الحظر" في تذييل تسجيل "لوحة الأداء"

خطأ في Chromium: #1054381

أحداث تغيير التنسيق في قسم "التجربة" الجديد

يمكن أن يساعدك قسم التجربة الجديد في لوحة "الأداء" في رصد عمليات تغيير التنسيق. متغيّرات التصميم التراكمية (CLS) هي مقياس يمكن أن يساعدك في تحديد مقدار عدم الثبات البصري غير المرغوب فيه، وهو أحد مؤشرات Core Web Vitals الجديدة من Google.

انقر على حدث تغيير في التنسيق للاطّلاع على تفاصيل تغيير التنسيق في علامة التبويب الملخّص. مرِّر مؤشر الماوس فوق الحقلَين تم النقل من وتم النقل إلى لتصوُّر موضع حدوث تغيير التنسيق.

تعرض هذه السمة تفاصيل حول تغيير التنسيق.

مصطلحات أكثر دقة بشأن الوعود في "وحدة التحكّم"

عند تسجيل Promise، كانت "وحدة التحكّم" تصف حالة Promise بشكل غير صحيح على النحو التالي: resolved:

مثال على استخدام Console لمصطلح "تم الحل" القديم

تستخدم "وحدة التحكّم" الآن المصطلح fulfilled، وهو يتوافق مع مواصفات Promise:

مثال على استخدام Console لمصطلح "تمت التسوية" الجديد

خطأ في الإصدار 8: ‎#6751

تعديلات على لوحة الأنماط

إتاحة الكلمة الرئيسية revert

ترصد واجهة المستخدم للإكمال التلقائي في لوحة "الأنماط" الآن الكلمة الرئيسية revert في CSS، ما يؤدي إلى إعادة القيمة المتتالية لإحدى الخصائص إلى ما كانت عليه قبل إجراء أي تغييرات على نمط العنصر.

ضبط قيمة السمة المطلوب إرجاعها

خطأ في Chromium: #1075437

معاينات الصور

مرِّر مؤشر الماوس فوق قيمة background-image في لوحة "الأنماط" للاطّلاع على معاينة للصورة في تلميح أداة.

تظهر عند تمرير مؤشر الماوس فوق قيمة background-image.

خطأ في Chromium: #1040019

تستخدم "أداة اختيار الألوان" الآن ترميزًا وظيفيًا للألوان مفصولاً بمسافات

تحدّد وحدة ألوان CSS المستوى 4 أنّ دوال الألوان، مثل rgb()، يجب أن تتوافق مع الوسيطات المفصولة بمسافات. على سبيل المثال، rgb(0, 0, 0) تعادل rgb(0 0 0).

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

استخدام وسيطات مفصولة بمسافات في جزء "الأنماط"

ستظهر لك أيضًا الصيغة في اللوحة "محسوبة" وفي تلميح الأداة "وضع الفحص".

تستخدم "أدوات مطوّري البرامج" البنية الجديدة لأنّ ميزات CSS القادمة، مثل color()، لا تتوافق مع بنية الوسيطات المفصولة بفواصل القديمة.

تتوفّر بنية الوسيط المفصول بمسافة في معظم المتصفّحات منذ فترة. اطّلِع على هل يمكنني استخدام رموز الألوان الوظيفية المفصولة بمسافات؟

خطأ في Chromium: #1072952

إيقاف جزء الخصائص نهائيًا في لوحة "العناصر"

تم إيقاف جزء السمات في لوحة العناصر نهائيًا. نفِّذ console.dir($0) في وحدة التحكّم بدلاً من ذلك.

لوحة "السمات" المتوقّفة نهائيًا

المراجع:

إتاحة اختصارات التطبيقات في لوحة "ملف البيان"

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

اطّلِع على مقالة إنجاز المهام بسرعة باستخدام اختصارات التطبيقات لمعرفة المزيد.

اختصارات التطبيقات في لوحة "ملف البيان"

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

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

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

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

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

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