الميزات الجديدة في أدوات مطوّري البرامج (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 أو botli أو غيرها من Content-Encoding في المستقبل.

زر حالات الشبكة الجديدة مع خيارات لإعداد ترميز المحتوى

مشكلة Chromium: 1162042

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

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

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

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

مشكلة Chromium: 1076198

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

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

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

لون التمييز

مشكلة Chromium: 1092093

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

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

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

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

مشكلة Chromium: 1183241

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

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

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

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

مشكلة Chromium: 1126824

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

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

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

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

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

مشكلة Chromium: 1158827

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

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

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

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

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

تنويع العمود

مشكلة Chromium: 1186049

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

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

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

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

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

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

مشكلة Chromium: 11374

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

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

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

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

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

يُرجى استخدام الخيارات التالية لمناقشة الميزات والتغييرات الجديدة في المشاركة أو أي موضوع آخر ذي صلة بـ "أدوات مطوري البرامج".

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

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

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

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

Chrome 100

إصدار Chrome 99

Chrome 98

97 من Chrome

الإصدار 96 من Chrome

Chrome 95

Chrome 94

Chrome 93

الإصدار 92 من Chrome

الإصدار 91 من Chrome

90 Chrome

إصدار Chrome 89

إصدار Chrome 88

الإصدار 87 من Chrome

إصدار 86 من Chrome

الإصدار 85 من Chrome

إصدار 84 من Chrome

إصدار Chrome 83

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

إصدار Chrome 68

الإصدار 67 من Chrome

Chrome 66

الإصدار 65 من Chrome

إصدار 64 من Chrome

إصدار 63 من Chrome

إصدار 62 من Chrome

إصدار 61 من Chrome

إصدار 60 من Chrome

الإصدار 59 من Chrome