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

أدوات جديدة لتصحيح أخطاء شبكة CSS

تتوفّر الآن في أدوات المطوّرين ميزات أفضل لتصحيح أخطاء شبكة CSS.

تصحيح أخطاء شبكة CSS

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

تحتوي لوحة التخطيط الجديدة على قسم الشبكة الذي يوفّر لك عددًا من الخيارات لعرض الشبكات.

يمكنك الاطّلاع على المستندات لمعرفة المزيد من المعلومات.

مشكلة Chromium: 1047356

علامة تبويب WebAuthn جديدة

يمكنك الآن محاكاة مصادقة المستخدمين وتصحيح أخطاء Web Authentication API باستخدام WebAuthn علامة التبويب الجديدة.

انقر على خيارات إضافية > مزيد من الأدوات > WebAuthn لفتح علامة التبويب WebAuthn.

علامة التبويب WebAuthn

قبل علامة التبويب الجديدة WebAuthn، لم يكن هناك دعم أصلي لتصحيح أخطاء WebAuthn على Chrome. كان المطوّرون بحاجة إلى مصادقة الأجهزة لاختبار تطبيقاتهم على الويب باستخدام Web Authentication API.

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

يمكنك الاطّلاع على مستنداتنا لمعرفة مزيد من المعلومات عن ميزة WebAuthn.

مشكلة Chromium: 1034663

نقل الأدوات بين اللوحة العلوية والسفلية

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

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

نقل إلى أسفل

وبالمثل، يمكنك نقل أي علامة تبويب في أسفل الصفحة إلى أعلى الصفحة من خلال النقر بزر الماوس الأيمن على علامة التبويب واختيار نقل إلى أعلى.

نقل إلى أعلى الصفحة

مشكلة في Chromium: 1075732

تعديلات على لوحة "العناصر"

عرض لوحة الشريط الجانبي "المحتسَبة" في لوحة "الأنماط"

يمكنك الآن تبديل لوحة الشريحة الجانبية المحسوبة في لوحة "الأنماط".

يتم تصغير لوحة الشريحة الجانبية المحسوبة في لوحة الأنماط تلقائيًا. انقر على الزر لتفعيله أو إيقافه.

لوحة الشريط الجانبي المحسوب

مشكلة في Chromium: 1073899

تجميع سمات CSS في لوحة "الخصائص المحسوبة"

يمكنك الآن تجميع مواقع CSS حسب الفئات في لوحة المعلومات المحسوبة.

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

في لوحة العناصر، اختَر عنصرًا. فعِّل مربّع الاختيار المجموعة لتجميع/إلغاء تجميع خصائص CSS.

تجميع خصائص CSS

مشاكل Chromium: 1096230 و1084673 و1106251

الإصدار 6.4 من Lighthouse في لوحة Lighthouse

تعمل لوحة Lighthouse الآن بإصدار Lighthouse 6.4. يمكنك الاطّلاع على ملاحظات الإصدار للاطّلاع على قائمة كاملة بالتغييرات.

منارة

عمليات التدقيق الجديدة في Lighthouse 6.4:

  • التحميل المُسبَق للخطوط للتحقّق مما إذا تم تحميل جميع الخطوط التي تستخدمfont-display: optional مسبقًا
  • خرائط مصدر صالحة يتحقّق من ما إذا كانت الصفحة تحتوي على خرائط مصدر صالحة للغة JavaScript الكبيرة من الطرف الأول.
  • [ميزة تجريبية] مكتبة JavaScript كبيرة يمكن أن تؤدّي مكتبات JavaScript الكبيرة إلى ضعف الأداء. تقترح عملية التدقيق هذه بدائل أرخص لمكتبات JavaScript الكبيرة الشائعة، مثل moment.js.

مشكلة Chromium: 772558

performance.mark() أحداث في قسم "المواعيد"

يضع قسم "المواقيت" في تسجيل الأداء علامة الآن على performance.mark() حدثًا.

أحداث Performance.mark

فلاتر resource-type وurl الجديدة في لوحة "الشبكة"

استخدِم الكلمات الرئيسية الجديدة resource-type وurl في لوحة الشبكة لفلترة طلبات الشبكة.

على سبيل المثال، استخدِم resource-type:image للتركيز على طلبات الشبكة التي تتضمّن صورًا.

فلتر نوع المورد

يمكنك الاطّلاع على فلترة الطلبات حسب المواقع لاكتشاف المزيد من الكلمات الرئيسية الخاصة، مثل resource-type وurl.

مشاكل Chromium: 1121141 و1104188

تعديلات على عرض تفاصيل الإطار

عرض نقطة نهاية reporting to لسياسة أداة تضمين المحتوى من مصادر خارجية (COEP) والسياسة المحدّدة لفتح المستندات المشتركة المصدر (COOP)

يمكنك الآن الاطّلاع على نقطة نهاية سياسة "مُضمِّن المحتوى من مصادر متعددة" (COEP) وسياسة "المُنشئ لفتح المستندات المشتركة المصدر" (COOP)reporting to ضمن قسم الأمان والعزل.

تحدّد Reporting API عنوان HTTP جديدًا، وهو Report-To، يقدّم لمطوّري الويب طريقة لتحديد نقاط نهاية الخادم التي يرسل إليها المتصفّح التحذيرات والأخطاء.

الإبلاغ إلى نقطة النهاية

اطّلِع على هذه المقالة لمعرفة المزيد من المعلومات عن كيفية تفعيل COEP وCOOP وجعل موقعك الإلكتروني "معزولًا عن مصادر متعددة".

مشكلة Chromium: 1051466

عرض وضع report-only سياسة أداة تضمين المحتوى من مصادر خارجية (COEP) والسياسة المحدّدة لفتح المستندات المشتركة المصدر (COOP)

تعرض "أدوات مطوّري البرامج" الآن تصنيف report-only لسياسة أداة تضمين المحتوى من مصادر خارجية (COEP) والسياسة المحدّدة لفتح المستندات المشتركة المصدر (COOP) اللتين تم ضبطهما على وضع report-only.

تصنيف التقارير فقط

شاهِد هذا الفيديو للتعرّف على كيفية منع تسرُّب المعلومات وتفعيل السياستَين COOP وCOEP في موقعك الإلكتروني.

مشكلة Chromium: 1051466

إيقاف رمز Settings نهائيًا في قائمة "مزيد من الأدوات"

تم إيقاف رمز Settings في قائمة "المزيد من الأدوات" نهائيًا. افتح الإعدادات من اللوحة الرئيسية بدلاً من ذلك.

الإعدادات في اللوحة الرئيسية

مشكلة Chromium: 1121312

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

الاطّلاع على مشاكل تباين الألوان وحلّها في لوحة "نظرة عامة على صفحات الأنماط المتتالية"

تعرض لوحة نظرة عامة على صفحات الأنماط المتتالية (CSS) الآن قائمة بالنصوص ذات التباين المنخفض في الألوان في صفحتك.

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

مشاكل الألوان المنخفضة التباين

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

مشكلة Chromium: 1120316

تخصيص اختصارات لوحة المفاتيح في أدوات المطوّرين

يمكنك الآن تخصيص اختصارات لوحة المفاتيح للأوامر المفضّلة لديك في "أدوات المطوّرين".

انتقِل إلى الإعدادات > الاختصارات، ومرِّر مؤشر الماوس فوق أحد الأوامر وانقر على الزر تعديل (رمز القلم) لتخصيص اختصار لوحة المفاتيح.

تخصيص اختصارات لوحة المفاتيح

لإعادة ضبط جميع الاختصارات، انقر على استعادة الاختصارات التلقائية.

مشكلة Chromium: 174309

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

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

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

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

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

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