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

Kayce Basques

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

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

نسخ الأنماط

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

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

عرض متغيّرات التصميم

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

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

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

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

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

المشكلة 961846 في Chromium

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

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

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

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

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

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

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

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

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

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

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

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

الشكل 4. أداة تعديل نقاط الإيقاف

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

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

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

الشكل 5. يُظهر عمود الحجم أنّ prefetch2.html وprefetch2.css قد تمّت إحالة كلاهما إلى (prefetch cache).

اطّلِع على الإصدار التجريبي من ميزة "التحميل المُسبَق" لتجربتها.

المشكلة 935267 في Chromium

المواقع الخاصة عند عرض العناصر

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

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

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

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

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

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

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

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

المشكلة 927726 في Chromium

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

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

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

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

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

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