ميزة معاينة: شجرة تسهيل الاستخدام للصفحة الكاملة
تسهّل عليك ميزة شجرة تسهيل الاستخدام للصفحة الكاملة الجديدة الحصول على نظرة عامة على شجرة تسهيل الاستخدام للصفحة الكاملة، وتساعدك في فهم كيفية عرض محتوى الويب الخاص بك على التكنولوجيات المساعدة بشكل أفضل.
في لوحة العناصر، افتح لوحة تسهيل الاستخدام وضَع علامة في مربّع الاختيار تفعيل ميزة العرض الكامل لشجرة تسهيل الاستخدام. بعد ذلك، أعِد تحميل 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.
مشكلة في Chromium: 1130859
Show rulers on hover command
يمكنك الآن فتح قائمة الأوامر وتشغيل الأمر عرض المسطرة عند التمرير. تسهّل مساطر الصفحة قياس عرض العنصر وارتفاعه.
في السابق، كان بإمكانك تفعيل مساطر الصفحة فقط من خلال مربّع الاختيار الإعدادات > عرض المساطر.
مشكلة في Chromium: 1270562
دعم row-reverse وcolumn-reverse في محرّر Flexbox
أضاف محرّر Flexbox زرّين جديدَين لتوفير الدعم row-reverse وcolumn-reverse في flex-direction.
مشكلة في Chromium: 1263866
اختصارات لوحة مفاتيح جديدة لإعادة تشغيل XHR وتوسيع جميع نتائج البحث
اختصارات لوحة المفاتيح لإعادة تشغيل طلبات XHR في لوحة "الشبكة"
اختَر طلب XHR في لوحة الشبكة واضغط على R على لوحة المفاتيح لإعادة تشغيل 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.
مشكلة في Chromium: 772558
لوحة "المصادر" المحسَّنة
أجرينا العديد من التحسينات على الثبات في لوحة المصادر أثناء ترقيتها لاستخدام CodeMirror 6. في ما يلي بعض التحسينات البارزة:
- أسرع بكثير عند فتح الملفات الكبيرة (مثل WASM وJavaScript)
- لا مزيد من التمرير العشوائي عند التنقّل بين أسطر الرمز البرمجي
- تحسين اقتراحات الإكمال التلقائي للمصادر القابلة للتعديل (مثل المقتطفات والتجاوز المحلي)
مشكلة في Chromium: 1241848
لمحات متنوّعة
في ما يلي بعض الإصلاحات الجديرة بالذكر في هذا الإصدار:
- عرض مخطط العرض الإعلاني بدون انقطاع لطلبات الشبكة بشكلٍ صحيح في السابق، كان النمط غير صالح. (1275501)
- كانت ميزة تمييز الرموز البرمجية لا تعمل عند البحث في المستندات التي تتضمّن أسطرًا طويلة جدًا في لوحة المصادر. تم حلّ هذه المشكلة الآن. (1275496)
- لن تتوفّر علامة التبويب المكرّرة الحمولة في طلبات الشبكة. (1273972)
- تم إصلاح مشكلة عدم توفّر تفاصيل حول تغييرات التنسيق في قسم الملخّص ضمن لوحة الأداء. (1259606)
- إتاحة استخدام أحرف عشوائية (مثل
,و.) في طلبات البحث ضمن بحث الشبكة (1267196)
[تجريبية] نقاط النهاية في لوحة Reporting API
تمت إضافة لوحة Reporting API التجريبية في Chrome 96 لمساعدتك في تتبُّع التقارير التي يتم إنشاؤها على صفحتك وحالتها.
يتوفّر الآن قسم نقاط النهاية. يقدّم هذا القسم نظرة عامة على جميع نقاط النهاية التي تم ضبطها في العنوان Reporting-Endpoints.
تعرَّف على كيفية استخدام Reporting API لمراقبة انتهاكات الأمان وطلبات البيانات من واجهة برمجة التطبيقات المتوقّفة وغير ذلك.
مشكلة في Chromium: 1200732
تنزيل قنوات المعاينة
ننصحك باستخدام Chrome Canary أو Dev أو Beta كمتصفّح تطوير تلقائي. تتيح لك قنوات المعاينة هذه الوصول إلى أحدث ميزات DevTools، وتتيح لك اختبار أحدث واجهات برمجة التطبيقات لمنصة الويب، وتساعدك في العثور على المشاكل في موقعك الإلكتروني قبل أن يواجهها المستخدمون.
التواصل مع فريق Chrome DevTools
استخدِم الخيارات التالية لمناقشة الميزات الجديدة أو التحديثات أو أي شيء آخر متعلّق بـ "أدوات مطوّري البرامج".
- يمكنك إرسال الملاحظات وطلبات الميزات إلينا على crbug.com.
- يمكنك الإبلاغ عن مشكلة في "أدوات مطوّري البرامج" باستخدام المزيد من الخيارات > مساعدة > الإبلاغ عن مشكلة في "أدوات مطوّري البرامج" في "أدوات مطوّري البرامج".
- يمكنك نشر تغريدة على @ChromeDevTools.
- يمكنك إضافة تعليقات على فيديوهات "الميزات الجديدة في أدوات مطوّري البرامج" على YouTube أو فيديوهات "نصائح حول أدوات مطوّري البرامج" على YouTube.
الميزات الجديدة في "أدوات مطوّري البرامج"
قائمة بكل ما تم تناوله في سلسلة الميزات الجديدة في "أدوات مطوّري البرامج"