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

Jecelyn Yeen

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

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

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

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

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

مشكلة Chromium: 1018414

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

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

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

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

مشكلة Chromium: 1100253

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

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

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

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

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

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

محاكاة الخطوط المحلية غير المتوفّرة

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

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

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

محاكاة الخطوط المحلية غير المتوفّرة

غالبًا ما يستخدم المطوّرون والمصمّمون نسختَين مختلفتَين من الخط نفسه أثناء التطوير:

  • خطّ محلي لأدوات التصميم
  • خط ويب لرمزك

يؤدي إيقاف الخطوط المحلية إلى تسهيل تنفيذ ما يلي:

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

مشكلة Chromium: 384968

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

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

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

مشكلة Chromium: 1090802

محاكاة prefers-reduced-data

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

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

محاكاة prefers-reduced-data

مشكلة Chromium: 1096068

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

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

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

مشاكل Chromium: 1086817 و1080569

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

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

إزالة حجم الصورة

عمليات التدقيق الجديدة في 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)

تعرض "أدوات مطوّري البرامج في Chrome" الآن السياق الآمن وCross-Origin-Embedder-Policy (COEP) و Cross-Origin-Opener-Policy (COOP) في تفاصيل الإطار.

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

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

مشكلة Chromium: 1051466

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

اقتراح لون يسهل الوصول إليه في لوحة "الأنماط"

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

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

مشكلة Chromium: 1093227

إعادة عرض لوحة الخصائص في لوحة "العناصر"

عادت لوحة "الخصائص" التي تم إيقافها نهائيًا في الإصدار 84 من Chrome. في إصدار مستقبلي من DevTools، سنعمل على تحسين سير العمل لفحص خصائص العناصر.

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

مشكلة Chromium: 1105205 و1116085

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

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

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

قيم رأس X-Client-Data القابلة للقراءة

مشكلة Chromium: 1103854

الإكمال التلقائي للخطوط المخصّصة في لوحة "الأنماط"

تتم الآن إضافة خطوط الكتابة المستورَدة إلى قائمة الإكمال التلقائي لخدمة CSS عند تعديل font-family السمة في لوحة الأنماط.

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

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

مشكلة Chromium: 1106221

عرض نوع المرجع بشكلٍ متّسق في لوحة "الشبكة"

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

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

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

مشكلة Chromium: 997694

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

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

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

مشكلة Chromium: 1067184

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

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

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

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

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

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