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

Kayce Basques

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

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

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

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

خطأ في Chromium: ‎#1068116

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

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

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

خطأ في Chromium: ‎#1040025

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

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

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

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

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

خطأ Chromium: ‎#1054381

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

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

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

تفاصيل تغيير التنسيق

مصطلحات أكثر دقة للوعود في Console

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

مثال على استخدام وحدة التحكّم في المصطلحات القديمة "تمّ حلّها"

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

مثال على استخدام Console للمصطلح الجديد "تم إكمالها"

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

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

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

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

ضبط قيمة خاصية على التراجع

خطأ Chromium: ‎#1075437

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

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

تمرير مؤشر الماوس فوق قيمة background-image

خطأ Chromium: ‎#1040019

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

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

عند اختيار ألوان باستخدام أداة اختيار الألوان أو التبديل بين تمثيلات الألوان في pane (لوحة) Styles (الأنماط) عن طريق الضغط مع الاستمرار على Shift ثم النقر على قيمة اللون، ستظهر لك الآن بنية العبارة المفصَّلة بالفواصل.

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

ستظهر لك أيضًا بنية الجملة في اللوحة "المُحسَّنة" ونصائح المساعدة في "وضع الفحص".

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

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

خطأ Chromium: ‎#1072952

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

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

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

المراجع:

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

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

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

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

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

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

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

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

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

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