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

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

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

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

مشكلة Chromium: 1147872

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

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

محاذاة التمرير لصفحات الأنماط المتتالية (CSS)

عند تطبيق scroll-snap-type على عنصر HTML في صفحتك (مثل صفحة العرض التوضيحي) عليه، يمكنك رؤية شارة 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

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

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

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

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

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

مشكلة Chromium: 1158827

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

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

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

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

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

تنويع عمود العنوان

مشكلة Chromium: 1186049

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

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

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

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

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

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

مشكلة Chromium: 11374

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

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

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

مشاكل 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 كناري أو إصدار مطوّري البرامج أو الإصدار التجريبي من المتصفِّح التلقائي للتطوير. وتتيح لك قنوات المعاينة هذه الوصول إلى أحدث ميزات "أدوات مطوري البرامج" واختبار أحدث واجهات برمجة التطبيقات للأنظمة الأساسية للويب والعثور على المشاكل على موقعك الإلكتروني قبل أن يفعلها المستخدمون.

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

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

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

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

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

الإصدار 127 من Chrome

الإصدار 126 من Chrome

الإصدار 125 من Chrome

الإصدار 124 من Chrome

الإصدار 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

الإصدار 100 من Chrome

الإصدار 99 من Chrome

الإصدار 98 من Chrome

الإصدار 97 من Chrome

الإصدار 96 من Chrome

الإصدار 95 من Chrome

الإصدار 94 من Chrome

الإصدار 93 من Chrome

الإصدار 92 من Chrome

الإصدار 91 من Chrome

الإصدار 90 من Chrome

الإصدار 89 من Chrome

الإصدار 88 من Chrome

الإصدار 87 من Chrome

الإصدار 86 من Chrome

الإصدار 85 من Chrome

الإصدار 84 من Chrome

الإصدار 83 من Chrome

الإصدار 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

الإصدار 68 من Chrome

الإصدار 67 من Chrome

Chrome 66

الإصدار 65 من Chrome

الإصدار 64 من Chrome

الإصدار 63 من Chrome

الإصدار 62 من Chrome

الإصدار 61 من Chrome

الإصدار 60 من Chrome

الإصدار 59 من Chrome