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

Kayce Basques
Kayce Basques
X GitHub

نسخ أنماط العنصر

انقر بزر الماوس الأيمن على عقدة في شجرة DOM لنسخ CSS الخاص بعقدة DOM هذه إلى الحافظة.

نسخ الأنماط

الشكل 1. نسخ أنماط العناصر

نشكر آدم آرغايل وVisBug على الإلهام.

تصوُّر تغييرات التصميم

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

يمكن أن تساعدك "أدوات مطوّري البرامج" الآن في رصد تغييرات التصميم:

  1. افتح قائمة الأوامر.
  2. ابدأ الكتابة Rendering.
  3. نفِّذ الأمر إظهار أداة العرض.
  4. ضَع علامة في مربّع الاختيار مناطق التغيّر في التصميم. أثناء تفاعلك مع صفحة، يتم تمييز تغييرات التصميم باللون الأزرق.

تغيير في التصميم

الشكل 2. تغيير في التصميم

المشكلة رقم 961846 في Chromium

الإصدار 5.1 من Lighthouse في لوحة "عمليات التدقيق"

تعمل لوحة "عمليات التدقيق" الآن بالإصدار 5.1 من Lighthouse. تشمل عمليات التدقيق الجديدة ما يلي:

  • يجب تقديم apple-touch-icon صالح. يتحقّق من إمكانية إضافة تطبيق ويب تقدّمي (PWA) إلى الشاشة الرئيسية على أجهزة iOS.
  • الحفاظ على انخفاض عدد الطلبات وأحجام الملفات: تعرض هذه اللوحة العدد الإجمالي لطلبات الشبكة وأحجام الملفات لمختلف الفئات، مثل المستندات والنصوص البرمجية وأوراق الأنماط والصور وما إلى ذلك.
  • الحد الأقصى المحتمَل لمهلة الاستجابة لأوّل إدخال: يقيس هذا المقياس الحد الأقصى المحتمل للوقت بين تفاعل المستخدم الأول مع الصفحة واستجابة المتصفّح لهذا التفاعل. يُرجى العِلم أنّ هذا المقياس يحلّ محلّ مقياس "وقت الاستجابة المقدَّر للإدخال". لا يتم احتساب مقياس "الحد الأقصى المحتمَل لمهلة الاستجابة لأوّل إدخال" ضمن نتيجة فئة "الأداء".

واجهة المستخدم الجديدة للوحة "عمليات التدقيق"

الشكل 3. واجهة المستخدم الجديدة للوحة "عمليات التدقيق"

يتضمّن الإصدار 5.1 من Lighthouse، سواء كان Node أو CLI، 3 ميزات رئيسية جديدة تستحق الاطّلاع عليها:

  • ميزانيات الأداء يمكنك منع تراجع أداء موقعك الإلكتروني بمرور الوقت من خلال تحديد عدد الطلبات وأحجام الملفات التي يجب ألا تتجاوزها الصفحات.
  • المكوّنات الإضافية يمكنك توسيع نطاق Lighthouse باستخدام عمليات التدقيق المخصّصة.
  • حِزم التكديس إضافة عمليات تدقيق مخصّصة لحِزم تكنولوجية معيّنة تم طرح حزمة WordPress Stack Pack أولاً. نعمل حاليًا على تطوير حِزم React وAMP.

مزامنة مظهر نظام التشغيل

إذا كنت تستخدم المظهر الداكن لنظام التشغيل، سيتم الآن تبديل أدوات مطوّلي البرامج إلى المظهر الداكن الخاص بها تلقائيًا.

اختصار لوحة المفاتيح لفتح "محرّر نقاط التوقّف"

اضغط على Control+Alt+B أو Command+Option+B (في نظام التشغيل Mac) عندما يكون التركيز في "المحرّر" ضمن لوحة "المصادر" لفتح محرّر نقاط الإيقاف. استخدِم "محرّر نقاط الإيقاف" لإنشاء نقاط تسجيل ونقاط إيقاف مشروطة.

محرِّر نقاط الإيقاف

الشكل 4. محرّر نقاط الإيقاف

ذاكرة التخزين المؤقت للجلب المسبق في "لوحة الشبكة"

يعرض عمود الحجم في "لوحة الشبكة" الآن القيمة (prefetch cache) عندما يتم تحميل مورد من ذاكرة التخزين المؤقت التي تم جلبها مسبقًا. الجلب المسبق هو ميزة جديدة نسبيًا في منصة الويب تهدف إلى تسريع عمليات تحميل الصفحات اللاحقة. تشير تقارير Can I use...‎ إلى أنّها متوافقة مع% 83.33 من المتصفّحات العالمية اعتبارًا من يوليو 2019.

عمود "الحجم" الذي يوضّح أنّ الموارد أتت من ذاكرة التخزين المؤقت التي تم جلبها مسبقًا

الشكل 5. يوضّح عمود الحجم أنّ prefetch2.html وprefetch2.css مصدرهما (prefetch cache).

يمكنك الاطّلاع على العرض التوضيحي لميزة "الجلب المسبق" لتجربتها.

المشكلة رقم ‎935267 في Chromium

الخصائص الخاصة عند عرض الكائنات

تعرض "وحدة التحكّم" الآن حقول الفئات الخاصة في معاينات العناصر.

عند فحص أحد العناصر، تعرض "وحدة التحكّم" الآن الحقول الخاصة، مثل ‎#color.

الشكل 6. لا يعرض الإصدار القديم من Chrome على اليمين الحقل #color عند فحص العنصر، بينما يعرضه الإصدار الجديد على اليسار.

الإشعارات والرسائل الفورية في لوحة "التطبيق"

يتيح قسم "الخدمات التي تعمل في الخلفية" في لوحة "التطبيق" الآن استخدام "الرسائل الفورية" و"الإشعارات". تحدث الرسائل الفورية عندما يرسل خادم معلومات إلى عامل خدمة. تحدث الإشعارات عندما يعرض عامل الخدمة أو نص برمجي للصفحة معلومات للمستخدم.

كما هو الحال مع ميزتَي "استرجاع البيانات في الخلفية" و"المزامنة في الخلفية" من الإصدار 76 من Chrome، بعد بدء التسجيل، يتم تسجيل الرسائل والإشعارات الواردة إلى هذه الصفحة لمدة 3 أيام، حتى عند إغلاق الصفحة أو Chrome.

لوحتا "الإشعارات" و"الرسائل الفورية" الجديدتان

الشكل 7. لوحتا "الرسائل والإشعارات الفورية" الجديدتان في لوحة "التطبيق"

المشكلة رقم ‎927726 في Chromium

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

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

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

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

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

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