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

Jecelyn Yeen

ميزة المعاينة: العرض الكامل لشجرة تسهيل الاستخدام

تسهّل عليك شجرة تسهيل الاستخدام للصفحة الكاملة الجديدة الحصول على نظرة عامة على شجرة تسهيل الاستخدام للصفحة الكاملة، وتساعدك في فهم كيفية عرض محتوى الويب الخاص بك على التكنولوجيات المساعدة بشكل أفضل.

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

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

اختَر عقدة ثمّ بدِّل إلى طريقة عرض شجرة نموذج العناصر في المستند. تم الآن اختيار عقدة DOM المطابقة. هذه طريقة رائعة لفهم عملية الربط بين عقدة DOM وعقدة شجرة تسهيل الاستخدام. يعمل هذا الإجراء أيضًا مع طريقة عرض شجرة نموذج العناصر في المستند ⬌ شجرة تسهيل الاستخدام.

في السابق، كانت شجرة تسهيل الاستخدام متاحة في لوحة تسهيل الاستخدام. العرض محدود، فهو يتيح لك استكشاف عقدة واحدة فقط والعُقد الرئيسية لها.

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

شجرة تسهيل الاستخدام للصفحة الكاملة

مشكلة في Chromium: 887173

تغييرات أكثر دقة في علامة التبويب "التغييرات"

يتم تنسيق التغييرات في الرمز البرمجي في علامة التبويب التغييرات تلقائيًا.

في السابق، كان من الصعب تتبُّع التغييرات الفعلية في رمز المصدر المصغَّر لأنّ جميع الرموز تظهر في سطر واحد.

علامة التبويب "التغييرات"

مشاكل Chromium: 1238818 و1268754 و1086491

ضبط مهلة أطول لتسجيل مسار المستخدم

يمكنك الآن تعديل إعدادات المهلة في المسجّل لجميع الخطوات أو خطوة محدّدة. ويكون ذلك مفيدًا بشكل خاص للصفحات التي تتضمّن طلبات شبكة بطيئة ورسومًا متحركة طويلة.

على سبيل المثال، سجّلتُ مسار مستخدم في صفحة العرض التوضيحي هذه لتحميل عنصر القائمة والنقر عليه. ومع ذلك، يتم تحميل عناصر القائمة ببطء (يستغرق ذلك 6 ثوانٍ). تعذّر إعادة تشغيل مسار المستخدم هذا لأنّه يتجاوز 5 ثوانٍ (المهلة التلقائية).

يمكننا استخدام إعدادات المهلة الجديدة لحلّ هذه المشكلة. وسِّع الخطوة التي ننقر فيها على عنصر القائمة. عدِّل الخطوة من خلال إضافة مهلة واضبطها على 6000 مللي ثانية (أي 6 ثوانٍ).

يمكنك اختياريًا تعديل المهلة في إعدادات إعادة التشغيل لجميع الخطوات. وسِّع إعدادات إعادة التشغيل وعدِّل قيمة المهلة.

إعدادات المهلة لتسجيل مسار المستخدم

مشكلة في Chromium: 1257499

التأكّد من إمكانية تخزين صفحاتك مؤقتًا باستخدام علامة التبويب "التخزين المؤقت للصفحات"

ذاكرة التخزين المؤقت للصفحات (bfcache) هي أداة تحسين للمتصفّح تتيح إمكانية الانتقال الفوري للأمام أو للخلف.

يمكن أن تساعدك علامة التبويب الجديدة ذاكرة التخزين المؤقت للصفحات السابقة/التالية في اختبار صفحاتك للتأكّد من أنّها محسّنة لاستخدام ذاكرة التخزين المؤقت للصفحات السابقة/التالية، وتحديد أي مشاكل قد تمنعها من أن تكون مؤهَّلة.

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

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

علامة التبويب "التخزين المؤقت للصفحات"

مشكلة في Chromium: 1110752

فلتر "لوحة الخصائص" الجديد

إذا كنت تريد التركيز على موقع معيّن في جزء المواقع، يمكنك الآن كتابة اسم الموقع أو قيمته في مربّع النص الجديد فلتر.

بشكلٍ تلقائي، لا يتم عرض الخصائص التي تكون قيمتها null أو undefined. ضَع علامة في مربّع الاختيار عرض الكل للاطّلاع على جميع الخصائص.

تتيح لك هذه التحسينات الوصول إلى الملفات التي تهتم بها بشكل أسرع، وبالتالي تحسين إنتاجيتك.

فلتر جزء الخصائص

مشكلة في Chromium: 1269674

محاكاة ميزة الوسائط "الألوان المفروضة" في CSS

يتم استخدام ميزة الوسائط forced-colors في CSS لرصد ما إذا كان وكيل المستخدم قد فعّل وضع الألوان المفروضة (مثل وضع التباين العالي في Windows) الذي يفرض لوحة ألوان محدودة يختارها المستخدم على الصفحة.

افتح قائمة الأوامر، وشغِّل الأمر عرض عملية العرض، ثم اضبط القائمة المنسدلة محاكاة ميزة الوسائط "الألوان المفروضة" في CSS.

ميزة الوسائط "الألوان المفروضة" في CSS

مشكلة في Chromium: 1130859

Show rulers on hover command

يمكنك الآن فتح قائمة الأوامر وتشغيل الأمر عرض المسطرة عند التمرير. تسهّل مساطر الصفحة قياس عرض العنصر وارتفاعه.

في السابق، كان بإمكانك تفعيل مساطر الصفحة فقط من خلال مربّع الاختيار الإعدادات > عرض المساطر.

Show rulers on hover command

مشكلة في Chromium: 1270562

إضافة دعم row-reverse وcolumn-reverse في محرِّر Flexbox

أضاف محرِّر Flexbox زرَّين جديدَين لتوفير row-reverse وcolumn-reverse في flex-direction.

محرِّر Flexbox

مشكلة في Chromium: 1263866

اختصارات لوحة مفاتيح جديدة لإعادة تشغيل XHR وتوسيع جميع نتائج البحث

اختصارات لوحة المفاتيح لإعادة تشغيل طلبات XHR في لوحة "الشبكة"

اختَر طلب XHR في لوحة الشبكة واضغط على R على لوحة المفاتيح لإعادة تشغيل XHR. في السابق، كان بإمكانك إعادة تشغيل XHR فقط من خلال قائمة السياق (النقر بزر الماوس الأيمن > إعادة تشغيل XHR).

إعادة تشغيل XHR

مشكلة في Chromium: 1050021

اختصار لوحة المفاتيح لتوسيع جميع نتائج البحث

تمت إضافة اختصار جديد في علامة التبويب بحث يتيح لك توسيع جميع نتائج البحث وتصغيرها. في السابق، كان بإمكانك توسيع نتائج البحث وتصغيرها من خلال النقر على ملف واحد في كل مرة.

افتح علامة التبويب "بحث" من خلال الضغط على Esc > قائمة النقاط الثلاث > بحث. أدخِل سلسلة بحث (مثل دالة) واضغط على Enter للاطّلاع على قائمة بنتائج البحث. ركِّز على نتائج البحث واستخدِم الاختصار التالي لتوسيع ملفات البحث أو تصغيرها:

  • Windows / Linux - Ctrl + Shift + { أو }
  • MacOS: Cmd + Options + { أو }

انتقِل إلى اختصارات لوحة المفاتيح للاطّلاع على مرجع لاختصارات لوحة المفاتيح في "أدوات مطوّري البرامج في Chrome".

مشكلة في Chromium: 1255073

الإصدار 9 من Lighthouse في لوحة Lighthouse

تعمل لوحة Lighthouse الآن بالإصدار 9 من Lighthouse. ستدرج أداة Lighthouse الآن جميع العناصر التي تتشارك المعرّف نفسه.

يُعدّ المعرّف غير الفريد للعنصر مشكلة شائعة في ما يتعلّق بسهولة الاستخدام. على سبيل المثال، يتم استخدام المعرّف المُشار إليه في سمة aria-labelledby على عناصر متعددة.

لمزيد من التفاصيل حول التحديثات، يمكنك الاطّلاع على الميزات الجديدة في الإصدار 9.0 من Lighthouse.

​تدقيق Lighthouse بعنوان "يجب أن يتوفر لكل العناصر التي يمكن التركيز عليها `id` فريد"، يعرض عنصرَين، وكلاهما يتضمّن `id` نفسه

مشكلة في Chromium: 772558

لوحة "المصادر" المحسَّنة

أجرينا العديد من التحسينات على الثبات في لوحة المصادر أثناء ترقيتها لاستخدام CodeMirror 6. في ما يلي بعض التحسينات البارزة:

  • أسرع بكثير عند فتح الملفات الكبيرة (مثل WASM وJavaScript)
  • لن يتم بعد الآن التمرير عشوائيًا عند التنقّل بين أسطر الرمز البرمجي
  • تحسين اقتراحات الإكمال التلقائي للمصادر القابلة للتعديل (مثل المقتطفات والتجاوز المحلي)

مشكلة في Chromium: 1241848

لمحات متنوّعة

في ما يلي بعض الإصلاحات الجديرة بالذكر في هذا الإصدار:

  • عرض مخطط العرض الإعلاني بدون انقطاع لطلبات الشبكة بشكلٍ صحيح في السابق، كان النمط غير صالح. (1275501)
  • كانت ميزة تمييز الرموز البرمجية لا تعمل عند البحث في المستندات التي تتضمّن أسطرًا طويلة جدًا في لوحة المصادر. تم حلّ هذه المشكلة الآن. (1275496)
  • لن تظهر علامة التبويب المكرّرة الحمولة في طلبات الشبكة. (1273972)
  • تم إصلاح مشكلة عدم توفّر تفاصيل حول تغييرات التنسيق في قسم الملخّص ضمن لوحة الأداء. (1259606)
  • إتاحة استخدام أحرف عشوائية (مثل , و.) في طلبات البحث ضمن بحث الشبكة (1267196)

[تجريبية] نقاط النهاية في لوحة Reporting API

تمت إضافة لوحة Reporting API التجريبية في Chrome 96 لمساعدتك في تتبُّع التقارير التي يتم إنشاؤها على صفحتك وحالتها.

يتوفّر الآن قسم نقاط النهاية. تقدّم هذه السمة نظرة عامة على جميع نقاط النهاية التي تم ضبطها في العنوان Reporting-Endpoints.

تعرَّف على كيفية استخدام Reporting API لمراقبة انتهاكات الأمان وطلبات البيانات من واجهة برمجة التطبيقات المتوقفة وغير ذلك.

لوحة Reporting API

مشكلة في Chromium: 1200732

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

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

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

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

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

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