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

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

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

مشكلة Chromium: 1147872

إنشاء تمثيل مرئي لعناصر الانتقال لصفحات الأنماط المتتالية (CSS)

يمكنك الآن تبديل شارة scroll-snap في لوحة العناصر لفحص محاذاة محاذاة محاذاة الانتقال للأعلى أو للأسفل في CSS.

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

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

مشكلة Chromium: 862450

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

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

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

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

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

مشكلة Chromium: 1166577

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

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

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

مشكلة Chromium: 1066772

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

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

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

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

مشاكل Chromium: 1149832 و1170656

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

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

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

مشكلة Chromium: 1162042

تحسينات جزء الأنماط

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

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

مشكلة Chromium: 1076198

دعم الكلمة الرئيسية accent-color

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

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

مشكلة Chromium: 1092093

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

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

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

مشكلة Chromium: 1183241

حذف الرموز المميّزة للثقة

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

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

مشكلة Chromium: 1126824

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

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

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

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

مشكلة Chromium: 1158827

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

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

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

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

مشكلة Chromium: 1186049

تحسينات في لوحة المصادر

دعم ميزات JavaScript الجديدة

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

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

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

مشكلة Chromium: 11374

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

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

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

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

دعم المعاينة عند التمرير باستخدام تدوين []

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

مشكلة Chromium: 1178305

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

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

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

مشكلة Chromium: 761019 و1191465

عمليات تتبُّع تسلسل استدعاء الدوال البرمجية الصحيحة لتصحيح أخطاء Wasm

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

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

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

مشكلة Chromium: 1189161

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

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

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

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

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

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

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