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

لوحة الوسائط الجديدة

تعرض "أدوات مطوري البرامج" الآن معلومات عن مشغّلات الوسائط في لوحة الوسائط.

لوحة الوسائط الجديدة

قبل ظهور لوحة الوسائط الجديدة في "أدوات مطوري البرامج"، كان من الممكن العثور على معلومات التسجيل وتصحيح الأخطاء المتعلقة بمشغِّلات الفيديو في chrome://media-internals.

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

مشكلة Chromium: 1018414

التقاط لقطات شاشة للعُقد من خلال قائمة سياق لوحة "العناصر"

يمكنك الآن التقاط لقطات شاشة للعُقد من خلال قائمة السياق في لوحة "العناصر".

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

التقاط لقطات شاشة للعقدة

مشكلة Chromium: 1100253

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

تم استبدال شريط تحذير "المشاكل" في لوحة وحدة التحكّم برسالة عادية.

مشاكل في رسالة وحدة التحكّم

أصبحت الآن المشاكل المتعلقة بملفات تعريف الارتباط التابعة لجهات خارجية مخفية تلقائيًا في علامة التبويب "المشاكل". فعِّل مربّع الاختيار الجديد تضمين مشاكل ملفات تعريف الارتباط التابعة لجهات خارجية لعرضها.

مربّع اختيار مشاكل ملفات تعريف الارتباط التابعة لجهات خارجية

مشاكل Chromium: 1096481 و1068116 و1080589

محاكاة الخطوط المحلية المفقودة

افتح علامة التبويب "العرض" واستخدِم ميزة إيقاف الخطوط المحلية الجديدة لمحاكاة مصادر local() المفقودة في قواعد @font-face.

على سبيل المثال، عندما يتم تثبيت الخط "Rubik" على جهازك وتستخدمه قاعدة @font-face src كخط local()، يستخدم Chrome ملف الخط المحلي من جهازك.

عند تفعيل إيقاف الخطوط المحلية، تتجاهل "أدوات مطوّري البرامج" خطوط local() وتجلبها من الشبكة.

محاكاة الخطوط المحلية المفقودة

في كثير من الأحيان، يستخدم المطورون والمصممون نسختين مختلفتين من نفس الخط أثناء التطوير:

  • خط محلي لأدوات التصميم الخاصة بك،
  • خط ويب للتعليمة البرمجية

يُسهّل إيقاف الخطوط المحلية عليك:

  • تصحيح الأخطاء وقياس أداء خطوط الويب التي يتم تحميلها والتحسين
  • التحقّق من صحة قواعد @font-face في خدمة مقارنة الأسعار (CSS)
  • اكتشاف أي اختلافات بين خطوط الويب وإصداراتها المحلية

مشكلة Chromium: 384968

محاكاة المستخدمين غير النشطين

تسمح Idle Detection API للمطوّرين برصد المستخدمين غير النشطين والتفاعل مع تغييرات حالة عدم النشاط. يمكنك الآن استخدام "أدوات مطوري البرامج" لمحاكاة تغييرات حالة عدم النشاط ضمن علامة التبويب أجهزة الاستشعار لكل من حالة المستخدم وحالة الشاشة بدلاً من انتظار تغيُّر حالة عدم النشاط الفعلي. يمكنك فتح علامة التبويب أجهزة الاستشعار من الدرج.

محاكاة المستخدمين غير النشطين

مشكلة Chromium: 1090802

محاكاة "prefers-reduced-data"

يرصد طلب البحث عن الوسائط prefers-reduced-data ما إذا كان المستخدم يفضل عرض محتوى بديل يستخدم بيانات أقل لعرض الصفحة.

يمكنك الآن استخدام "أدوات مطوري البرامج" لمحاكاة الاستعلام عن الوسائط باللغة prefers-reduced-data.

محاكاة البيانات المفضَّلة التي يتم خفضها

مشكلة Chromium: 1096068

إتاحة ميزات JavaScript الجديدة

وتوفّر أدوات مطوّري البرامج الآن دعمًا أفضل لبعض أحدث ميزات لغة JavaScript:

  • عوامل تشغيل المهام المنطقية: تتيح أدوات مطوّري البرامج الآن تخصيص الإعدادات المنطقية مع عوامل التشغيل الجديدة &&= و||= و??= في لوحتَي "وحدة التحكّم" و"المصادر".
  • فواصل رقمية بتنسيق جيد: أصبحت أدوات مطوّري البرامج تطبع الآن بشكل صحيح الفواصل الرقمية في لوحة "المصادر".

مشاكل Chromium: 1086817 و1080569

Lighthouse 6.2 في لوحة Lighthouse

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

إلغاء حجم الصورة

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

  • تجنُّب مهام سلاسل المحادثات الرئيسية الطويلة: يعمل على الإبلاغ عن المهام الأطول في سلسلة التعليمات الرئيسية، وهو مفيد لتحديد أسوأ المساهمين في تأخير الإدخال.
  • الروابط قابلة للزحف: تأكّد ممّا إذا كانت السمة href لعناصر الارتساء ترتبط بوجهة مناسبة، لكي يمكن اكتشاف الروابط.
  • عناصر الصور بلا حجم - تحقق مما إذا تم ضبط width وheight صريحة على عناصر الصورة. يمكن أن يؤدي حجم الصور الفاضحة إلى تقليل متغيّرات التصميم وتحسين متغيّرات التصميم التراكمية (CLS).
  • تجنُّب الصور المتحركة غير المركّبة تعمل هذه السياسة على الإبلاغ عن الصور المتحركة غير المركّبة التي تبدو رديئة وتقلل من متغيّرات التصميم التراكمية (CLS).
  • يستمع إلى أحداث unload. تُستخدَم للإبلاغ عن حدث "unload". يمكنك استخدام حدثَي pagehide أو visibilitychange بدلاً من ذلك لأنّ حدث unload لا يتم تنشيطه بشكل موثوق.

عمليات التدقيق المعدّلة في Lighthouse 6.2:

  • إزالة محتوى JavaScript غير المستخدَم ستعمل أداة Lighthouse الآن على تحسين عملية التدقيق إذا كانت الصفحة تحتوي على خرائط مصدر JavaScript متاحة للجميع.

مشكلة Chromium: 772558

إيقاف قائمة "المصادر الأخرى" نهائيًا في جزء "مشغّلو الخدمات"

توفّر "أدوات مطوري البرامج" الآن رابطًا لعرض القائمة الكاملة للعاملين في الخدمات من مصادر أخرى في علامة تبويب جديدة في المتصفّح: chrome://serviceworker-internals/?devtools.

كانت "أدوات مطوري البرامج" سابقًا تعرض قائمة متداخلة ضمن لوحة التطبيق > جزء عاملو الخدمة.

الربط بمصادر أخرى

مشكلة Chromium: 807440

عرض ملخّص التغطية للعناصر التي تمت فلترتها

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

في المثال أدناه، لاحظ كيف يظهر الملخّص في البداية بالقيمة 446 kB of 2.0 MB (22%) used so far. 1.5 MB unused. ثم يعرض القيمة 57 kB of 604 kB (10%) used so far. 546 kB unused. بعد تطبيق فلترة CSS.

ملخّص التغطية للعناصر التي تمت فلترتها

مشكلة Chromium: 1061385

عرض تفاصيل الإطار الجديد في لوحة التطبيق

تُظهر "أدوات مطوري البرامج" الآن عرضًا تفصيليًا لكل إطار. يمكنك الوصول إليه بالنقر على إطار ضمن قائمة الإطارات في لوحة التطبيق.

عرض تفاصيل الإطار الجديد في لوحة التطبيق

مشكلة Chromium: 1093247

تفاصيل الإطار للنوافذ المفتوحة

تعرض أدوات مطوّري البرامج الآن أيضًا النوافذ / النوافذ المنبثقة المفتوحة ضمن شجرة الإطار. يتضمن عرض تفاصيل الإطار للنوافذ المفتوحة معلومات أمان إضافية.

تفاصيل إطار النافذة التي تم فتحها

مشكلة Chromium: 1107766

معلومات الأمان والعزل (COEP / COOP)

تعرض "أدوات مطوري البرامج" الآن السياق الآمن وسياسة تضمين جميع المصادر (COEP) وسياسة جميع المصادر (COOP) في تفاصيل الإطار.

معلومات الأمان والعزل

ستتم إضافة المزيد من معلومات الأمان إلى عرض تفاصيل الإطار قريبًا.

مشكلة Chromium: 1051466

تعديلات لوحة الشبكة والعناصر

اقتراح ألوان يمكن الوصول إليه في جزء الأنماط

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

في المثال أدناه، يحتوي h1 على نص منخفض التباين. لإصلاح هذه المشكلة، افتح منتقي الألوان في السمة color في جزء الأنماط. بعد توسيع قسم نسبة التباين، تقدّم أدوات مطوّري البرامج اقتراحات ألوان AA وAAA. انقر على اللون المقترح لتطبيق اللون.

مشكلة Chromium: 1093227

استعادة لوحة الخصائص في لوحة "العناصر"

عاد جزء "الخصائص" إلى الإصدار السابق، وكان متوقّفًا نهائيًا في الإصدار 84 من Chrome. في إصدار مستقبلي من أدوات مطوري البرامج، سنعمل على تحسين سير العمل لفحص خصائص العناصر.

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

مشكلة Chromium: 1105205، 1116085

قيم عنوان X-Client-Data يمكن للمستخدمين قراءتها في لوحة "الشبكة"

عند فحص مورد شبكة في لوحة "الشبكة"، أصبح بإمكان "أدوات مطوري البرامج" الآن تنسيق أي قيم لرؤوس X-Client-Data في جزء العناوين كرمز.

يحتوي عنوان HTTP يتضمّن العنصر X-Client-Data على قائمة بأرقام تعريف التجارب وعلامات Chrome المفعَّلة في متصفّحك. وتبدو قيم العناوين الأولية كسلاسل غير شفافة، لأنّها تكون مخازن بروتوكولات مؤقتة بترميز أساسي 64. لزيادة شفافية المحتوى للمطوّرين، تعرض "أدوات مطوري البرامج" الآن القيم التي تم فك ترميزها.

قيم عنوان "X-Client-Data" التي يمكن للإنسان قراءتها

مشكلة Chromium: 1103854

الإكمال التلقائي للخطوط المخصصة في جزء "الأنماط"

تتم الآن إضافة الخطوط التي تم استيرادها إلى قائمة الإكمال التلقائي في CSS عند تعديل خاصية font-family في جزء الأنماط.

في هذا المثال، 'Noto Sans' هو خط مخصّص مثبَّت في الجهاز المحلي. ويتم عرضه في قائمة إنجازات CSS. في السابق، لم يكن الأمر كذلك.

الإكمال التلقائي للخطوط المخصّصة

مشكلة Chromium: 1106221

عرض نوع المورد باستمرار في لوحة "الشبكة"

تعرض "أدوات مطوري البرامج" الآن باستمرار نوع المورد نفسه المستخدَم في طلب الشبكة الأصلي، وتضيف / Redirect إلى قيمة العمود النوع عند حدوث عملية إعادة التوجيه (الحالة 302).

في السابق، كانت "أدوات مطوري البرامج" تغيّر أحيانًا النوع إلى Other.

عرض نوع المرجع لإعادة التوجيه

مشكلة Chromium: 997694

محو الأزرار في لوحتَي "العناصر" و"الشبكة"

أصبحت الآن مربعات نص الفلتر في جزء الأنماط ولوحة الشبكة، بالإضافة إلى مربع نص بحث DOM في لوحة العناصر، أزرار محو. يؤدي النقر على محو إلى إزالة أي نص تم إدخاله.

محو الأزرار في لوحتَي "العناصر" و"الشبكة"

مشكلة Chromium: 1067184

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

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

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

يُرجى استخدام الخيارات التالية لمناقشة الميزات والتغييرات الجديدة في المشاركة أو أي موضوع آخر ذي صلة بـ "أدوات مطوري البرامج".

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

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

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

الإصدار 123 من Chrome

الإصدار 122 من Chrome

الإصدار 121 من Chrome

الإصدار 120 من Chrome

الإصدار 119 من متصفِّح Chrome

الإصدار 118 من متصفّح Chrome

الإصدار 117 من Chrome

الإصدار 116 من متصفّح Chrome

الإصدار 115 من متصفّح Chrome

الإصدار 114 من متصفّح Chrome

الإصدار 113 من متصفّح Chrome

الإصدار 112 من Chrome

الإصدار 111 من متصفّح Chrome

الإصدار 110 من متصفّح Chrome

الإصدار 109 من متصفِّح Chrome

الإصدار 108 من متصفِّح Chrome

107 Chrome

الإصدار 106 من متصفّح Chrome

105 Chrome

الإصدار 104 من متصفِّح Chrome

الإصدار 103 من متصفّح Chrome

الإصدار 102 من متصفّح Chrome

الإصدار 101 من متصفّح Chrome

Chrome 100

إصدار Chrome 99

Chrome 98

97 من Chrome

الإصدار 96 من Chrome

Chrome 95

Chrome 94

Chrome 93

الإصدار 92 من Chrome

الإصدار 91 من Chrome

90 Chrome

إصدار Chrome 89

إصدار Chrome 88

الإصدار 87 من Chrome

إصدار 86 من Chrome

الإصدار 85 من Chrome

إصدار 84 من Chrome

إصدار Chrome 83

إصدار 82 من Chrome

تم إلغاء إصدار 82 من Chrome.

إصدار 81 من Chrome

80 Chrome

الإصدار 79 من Chrome

الإصدار 78 من Chrome

الإصدار 77 من Chrome

الإصدار 76 من Chrome

الإصدار 75 من Chrome

الإصدار 74 من Chrome

الإصدار 73 من Chrome

الإصدار 72 من Chrome

الإصدار 71 من Chrome

Chrome 70

إصدار Chrome 68

الإصدار 67 من Chrome

Chrome 66

الإصدار 65 من Chrome

إصدار 64 من Chrome

إصدار 63 من Chrome

إصدار 62 من Chrome

إصدار 61 من Chrome

إصدار 60 من Chrome

الإصدار 59 من Chrome