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

Jecelyn Yeen

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

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

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

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

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

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

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

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

مشكلة Chromium: 887173

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

يتم تلقائيًا طباعة التغييرات في الرمز البرمجي في علامة التبويب التغييرات بشكل جميل.

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

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

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

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

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

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

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

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

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

مشكلة Chromium: 1257499

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

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

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

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

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

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

مشكلة في Chromium: 1110752

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

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

لا يتم تلقائيًا عرض المواقع التي تكون قيمتها null أو undefined. فعِّل مربّع الاختيار عرض الكل لعرض جميع المواقع.

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

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

مشكلة Chromium: 1269674

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

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

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

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

مشكلة Chromium: 1130859

عرض أدوات القياس عند التمرير

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

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

عرض أدوات القياس عند التمرير

مشكلة 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 الآن على إصدار Lighthouse 9. ستعرض أداة Lighthouse الآن جميع العناصر التي تتشارك المعرّف نفسه.

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

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

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

مشكلة 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

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

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

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

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

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

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