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

Jecelyn Yeen

ظهور معلومات "مؤشرات أداء الويب" في لوحة "الأداء"

مرِّر مؤشر الماوس فوق علامة مؤشرات أداء الويب في لوحة الأداء لمعرفة ما يشير إليه المؤشر، سواء كان الأداء جيدًا أو بحاجة إلى تحسين أو ضعيفًا.

نافذة معلومات "مؤشرات أداء الويب" المنبثقة

مشكلة Chromium: 1147872

عرض ميزة "الانتقال السريع" في CSS

يمكنك الآن تفعيل شارة scroll-snap في لوحة العناصر للتحقّق من محاذاة ميزة "التمرير السريع" في CSS.

ميزة "الانتقال السريع" في CSS

عندما يتم تطبيق scroll-snap-type على عنصر HTML في صفحتك (مثل صفحة العرض هذه)، يمكنك رؤية شارة scroll-snap بجانبه في لوحة العناصر. انقر على الشارة لتفعيل أو إيقاف عرض تراكب "التمرير السريع" على الصفحة.

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

مشكلة Chromium: 862450

أداة فحص الذاكرة الجديدة

استخدِم أداة فحص الذاكرة الجديدة لفحص ArrayBuffer في JavaScript، بالإضافة إلى ذاكرة Wasm.

افتح هذه الصفحة التجريبية. في لوحة المصادر، افتح الملف demo-js.js، وحدِّد نقطة توقُّف في السطر 18.

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

اطّلِع على المستندات لمعرفة المزيد من المعلومات عن فحص JavaScript ArrayBuffer وWebAssembly.Memory باستخدام "أداة فحص الذاكرة" الجديدة هذه.

أداة فحص الذاكرة

مشكلة Chromium: 1166577

لوحة إعدادات الشارة الجديدة في لوحة "العناصر"

يمكنك الآن تفعيل الشارات أو إيقافها بشكل انتقائي من خلال إعدادات الشارات في لوحة العناصر. استخدِم هذه الميزة لتخصيص الشارات المهمة والتركيز عليها أثناء فحص صفحات الويب.

لوحة إعدادات الشارة في لوحة "العناصر"

في لوحة العناصر، انقر بزر الماوس الأيمن على أي عناصر. اختَر إعدادات الشارة من قائمة السياقات، وستظهر لوحة إعدادات الشارة في أعلى الصفحة. فعِّل أي مربّع اختيار لإظهار الشارات أو إخفائها.

مشكلة Chromium: 1066772

معاينة محسّنة للصور تتضمّن معلومات عن نسبة العرض إلى الارتفاع

تعرض الآن معاينات الصور في لوحة العناصر مزيدًا من المعلومات عن الصورة، مثل الحجم المعروض ونسبة العرض إلى الارتفاع المعروضة والحجم الأساسي ونسبة العرض إلى الارتفاع الأساسية وحجم الملف.

تساعدك هذه المعلومات في فهم صورك بشكل أفضل وتطبيق التحسين إذا لزم الأمر.

معاينة الصورة مع معلومات نسبة العرض إلى الارتفاع

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

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

مشاكل Chromium: 1149832 و1170656

زر جديد لشروط الشبكة يتضمّن خيارات لضبط Content-Encoding

تمت إضافة زرّ جديد لحالات الشبكة في لوحة الشبكة. انقر عليه لفتح علامة التبويب حالات الشبكة.

تتم إضافة خيار جديد ترميزات المحتوى المقبولة إلى علامة التبويب شروط الشبكة. يمكنك ضبطه لاختبار ما إذا كانت استجابات الخادم مُشفَّرة بشكل صحيح في المتصفّحات التي لا تتوافق مع gzip أو brotli أو Content-Encoding أخرى مستقبلية.

زرّ جديد لحالات الشبكة مع خيارات لضبط Content-Encoding

مشكلة Chromium: 1162042

تحسينات على لوحة الأنماط

اختصار جديد لعرض القيمة المحسوبة في لوحة "الأنماط"

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

اختصار جديد لعرض القيمة المحسوبة

مشكلة Chromium: 1076198

إتاحة الكلمة الرئيسية accent-color

ترصد واجهة المستخدم لإكمال النص في لوحة "الأنماط" الآن الكلمة الرئيسية accent-color في CSS، ما يسمح لمطوّري الويب بتحديد اللون المميّز لعناصر التحكّم في واجهة المستخدم (مثل مربّع الاختيار أو الزرّ المتعدّد الخيارات) التي ينشئها العنصر.

خاصية accent-color في CSS تجريبية حاليًا. يُرجى تفعيل chrome://flags/#enable-experimental-web-platform-features لاختباره.

accent-color

مشكلة Chromium: 1092093

تصنيف أنواع المشاكل باستخدام الألوان والرموز

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

  • أخطاء الصفحة (باللون الأحمر) المشاكل التي لها تأثير فوري في وظيفة الصفحة، مثل عدم ضبط عناوين CORS الصحيحة وما إلى ذلك
  • التغييرات القادمة التي قد تؤدي إلى حدوث عطل (باللون الأصفر) المشاكل التي تُعلِم بتغيير غير متوافق وشيك على منصة الويب قد يؤدي إلى فقدان وظيفة الصفحة (مثل التحذير من التغييرات القادمة في CORS RFC 1918)
  • التحسينات المحتملة (باللون الأزرق) تحسينات محتملة على الصفحة، ولكنّها لا تؤثّر حاليًا في الوظائف الأساسية للصفحة (مثل مشاكل تسهيل الاستخدام)

تصنيف أنواع المشاكل باستخدام الألوان والرموز

مشكلة Chromium: 1183241

حذف رموز Trust Tokens

يمكنك الآن حذف الرموز المميّزة Trust Token باستخدام زر الحذف الجديد في لوحة الرموز المميّزة Trust Token ضمن لوحة التطبيق.

Trust Token هي واجهة برمجة تطبيقات جديدة للمساعدة في مكافحة الاحتيال وتمييز برامج التتبُّع عن المستخدمين الفعليين، بدون التتبُّع السلبي. تعرَّف على كيفية بدء استخدام الرموز الموثوق بها.

حذف رموز Trust tokens

مشكلة Chromium: 1126824

عرض تفاصيل حول الميزات المحظورة في عرض "تفاصيل الإطار"

يمكنك الآن الاطّلاع على تفاصيل حول الميزات المحظورة ضمن قسم سياسة الأذونات في عرض "تفاصيل الإطار".

افتح صفحة العرض التجريبي هذه. انتقِل إلى لوحة التطبيق واختَر إطارًا. في قسم سياسة الأذونات، انتقِل إلى السمة الميزات المتوقفة. انقر على إظهار التفاصيل للاطّلاع على تفاصيل سبب حظر الميزة. انقر على الرمز بجانب كل سياسة للانتقال إلى إطار iframe أو طلب الشبكة الذي حظر الميزة.

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

الميزات المحظورة في طريقة عرض "تفاصيل الإطار"

مشكلة Chromium: 1158827

فلترة التجارب في إعدادات "التجارب"

العثور على التجارب بشكل أسرع باستخدام فلتر التجارب الجديد على سبيل المثال، انتقِل إلى الإعدادات > التجارب، وفي مربّع نص الفلترة، اكتب "التباين" لفلترة جميع التجارب التي تحتوي على الكلمة "التباين".

فلترة التجارب في إعدادات "التجارب"

عمود Vary Header جديد في لوحة "مساحة تخزين ذاكرة التخزين المؤقت"

استخدِم عمود Vary Header الجديد في لوحة مساحة تخزين ذاكرة التخزين المؤقت لعرض رأس استجابة HTTP Vary.

عمود Vary Header

مشكلة في Chromium: 1186049

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

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

تتيح "أدوات مطوّري البرامج" الآن ميزة التحقّق من العلامة التجارية الخاصة الجديدة بلغة JavaScript، والتي تُعرف أيضًا باسم #foo in obj.

تعمل ميزة عمليات التحقّق من العلامات التجارية الخاصة هذه على توسيع نطاق عامل التشغيل in لتضمين اختبار حقول الفئات الخاصة على أيّ عنصر معيّن.

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

عمليات التحقّق من العلامات التجارية الخاصة باستخدام JavaScript

مشكلة Chromium: 11374

دعم محسّن لتصحيح أخطاء نقاط التوقف

تضبط أدوات المطوّرين الآن نقاط التوقف بشكل صحيح في نصوص برمجية متعددة. توفّر حِزم JavaScript الحديثة (مثل Webpack وRollup) ميزة تقسيم الرموز البرمجية، وهناك سيناريوهات يمكن فيها تضمين مكوّن مشترَك واحد في مسارات متعددة (عمليات تقسيم الرموز البرمجية).

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

مشاكل Chromium: 1142705 و979000 و1180794

إتاحة معاينة عند التمرير فوق المحتوى باستخدام رمز []

تتيح الآن أدوات المطوّرين معاينة التمرير فوق تعبيرات عناصر JavaScript التي تستخدم رمز [] في لوحة المصادر.

إتاحة معاينة عند التمرير فوق الرابط باستخدام علامة "[]"

مشكلة Chromium: 1178305

مخطّط مُحسَّن لملفات HTML

تتوفّر الآن في "أدوات المطوّرين" ميزة أفضل لعرض المخططات في ملفات HTML. في لوحة المصادر، افتح ملف HTML. يمكنك تبديل مخطّط التعليمات البرمجية باستخدام اختصار لوحة المفاتيح Cmd + Shift + O في نظام التشغيل Mac أو Ctrl + Shift + O في نظام التشغيل Windows.

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

مخطّط مُحسَّن لملفات HTML

مشكلة Chromium: 761019، 1191465

تتبُّعات بنية تخزين العناصر المناسبة للأخطاء لتصحيح أخطاء Wasm

تعمل "أدوات مطوّري البرامج" الآن على حلّ عمليات استدعاء الدوالّ المضمّنة وعرض عمليات تتبُّع تسلسل استدعاء الدوالّ المناسبة لتصحيح أخطاء Wasm.

في السابق، كانت "أدوات مطوّري البرامج" تعرض فقط إشارات Wasm العامة في تتبعات تسلسل استدعاء الدوال البرمجية للأخطاء.

تتبُّعات بنية تخزين العناصر المناسبة للأخطاء لتصحيح أخطاء Wasm

لا يعرض الإصدار القديم من Chrome على يمين الصفحة الموقع الجغرافي للمصدر (مثل dsquare) في عمليات تتبُّع تسلسل استدعاء الدوال البرمجية للخطأ، في حين يعرض الإصدار الجديد على يمين الصفحة هذا الموقع الجغرافي.

مشكلة Chromium: 1189161

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

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

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

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

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

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