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

Jecelyn Yeen

أدوات جديدة لتصحيح أخطاء CSS Grid

توفّر "أدوات مطوّري البرامج" الآن إمكانية أفضل لتصحيح أخطاء شبكة 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 الآن بالإصدار 6.4 من Lighthouse. يمكنك الاطّلاع على ملاحظات الإصدار للحصول على قائمة كاملة بالتغييرات.

منارة

عمليات التدقيق الجديدة في الإصدار 6.4 من Lighthouse:

  • التحميل المُسبَق للخطوط تتحقّق هذه السمة ممّا إذا كانت جميع الخطوط التي تستخدم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

يمكنك الآن الاطّلاع على نقطة نهاية Cross-Origin Embedder Policy (COEP) وسياسة Cross-Origin Opener Policy (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"

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

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

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

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

مشكلة في Chromium: 1120316

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

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

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

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

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

مشكلة في Chromium: 174309

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

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

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

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

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

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