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

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

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

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

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

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

راجِع المستندات لمزيد من المعلومات.

مشكلة Chromium: 1047356

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

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

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

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

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

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

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

مشكلة Chromium: 1034663

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

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

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

نقل إلى أسفل

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

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

مشكلة Chromium: 1075732

تم تعديل لوحة العناصر.

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

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

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

جزء الشريط الجانبي الذي تم احتسابه

مشكلة Chromium: 1073899

تجميع خصائص CSS في لوحة Computed

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

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

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

تجميع خصائص CSS

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

Lighthouse 6.4 في لوحة 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

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

عرض نقطة نهاية COEP وCOOP reporting to

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

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

يتم إرسال التقارير إلى نقطة النهاية

اقرأ هذه المقالة لمعرفة المزيد من المعلومات حول كيفية تفعيل بروتوكول COEP وCOOP وإنشاء موقعك الإلكتروني. "حظر الوصول من نطاقات أخرى".

مشكلة Chromium: 1051466

عرض وضع COEP وCOOP report-only

تعرض "أدوات مطوري البرامج" الآن التصنيف report-only لـ COEP وCOOP اللذين تم ضبطهما على وضع report-only.

تصنيف "إعداد التقارير فقط"

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

مشكلة Chromium: 1051466

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

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

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

مشكلة Chromium: 1121312

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

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

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

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

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

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

مشكلة Chromium: 1120316

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

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

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

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

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

مشكلة Chromium: 174309

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

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

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

يمكنك استخدام الخيارات التالية لمناقشة الميزات والتغييرات الجديدة في المشاركة أو مناقشة أي معلومات أخرى متعلّقة بأدوات مطوري البرامج.

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

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

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