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

Jecelyn Yeen

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

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

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

مشكلة في Chromium: 1147872

تصوُّر ميزة CSS scroll-snap

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

CSS scroll-snap

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

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

مشكلة في Chromium: 862450

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

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

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

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

يمكنك الاطّلاع على المستندات لمعرفة المزيد حول فحص 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

حذف رموز 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

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

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

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

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

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

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