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

Kayce Basques

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

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

نسخ الأنماط

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

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

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

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

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

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

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

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

مشكلة Chromium رقم 961846

Lighthouse 5.1 في لوحة "عمليات التدقيق"

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

مشكلة Chromium رقم 935267

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

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

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

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

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

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

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

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

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

مشكلة Chromium رقم 927726

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

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

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

يمكنك استخدام الخيارات التالية لمناقشة الميزات والتغييرات الجديدة في المشاركة أو مناقشة أي معلومات أخرى متعلّقة بأدوات مطوري البرامج.

  • يمكنك إرسال اقتراح أو ملاحظات إلينا عبر crbug.com.
  • الإبلاغ عن مشكلة في "أدوات مطوري البرامج" باستخدام خيارات إضافية   المزيد > مساعدة > الإبلاغ عن مشاكل في "أدوات مطوري البرامج" في "أدوات مطوري البرامج"
  • يمكنك نشر تغريدة على @ChromeDevTools.
  • شارِك في التعليقات على الميزات الجديدة في فيديوهات YouTube أو نصائح حول أدوات مطوّري البرامج فيديوهات على YouTube.

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

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