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

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

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

نسخ الأنماط

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

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

إنشاء عرض مرئي لمتغيّرات التصميم

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

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

  1. افتح قائمة الطلبات.
  2. ابدأ الكتابة باللغة Rendering.
  3. شغِّل الأمر Show Rendering (إظهار العرض).
  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 Stacks قيد التطوير.

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

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

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

اضغط على 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. الأجزاء الجديدة لـ "الرسائل الفورية" و"الإشعارات" في لوحة "التطبيقات" (Applications).

مشكلة Chromium رقم 927726

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

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

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

يُرجى استخدام الخيارات التالية لمناقشة الميزات والتغييرات الجديدة في المشاركة أو أي موضوع آخر ذي صلة بـ "أدوات مطوري البرامج".

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

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

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

الإصدار 123 من Chrome

الإصدار 122 من Chrome

الإصدار 121 من Chrome

الإصدار 120 من Chrome

الإصدار 119 من متصفِّح Chrome

الإصدار 118 من متصفّح Chrome

الإصدار 117 من Chrome

الإصدار 116 من متصفّح Chrome

الإصدار 115 من متصفّح Chrome

الإصدار 114 من متصفّح Chrome

الإصدار 113 من متصفّح Chrome

الإصدار 112 من Chrome

الإصدار 111 من متصفّح Chrome

الإصدار 110 من متصفّح Chrome

الإصدار 109 من متصفِّح Chrome

الإصدار 108 من متصفِّح Chrome

107 Chrome

الإصدار 106 من متصفّح Chrome

105 Chrome

الإصدار 104 من متصفِّح Chrome

الإصدار 103 من متصفّح Chrome

الإصدار 102 من متصفّح Chrome

الإصدار 101 من متصفّح Chrome

Chrome 100

إصدار Chrome 99

Chrome 98

97 من Chrome

الإصدار 96 من Chrome

Chrome 95

Chrome 94

Chrome 93

الإصدار 92 من Chrome

الإصدار 91 من Chrome

90 Chrome

إصدار Chrome 89

إصدار Chrome 88

الإصدار 87 من Chrome

إصدار 86 من Chrome

الإصدار 85 من Chrome

إصدار 84 من Chrome

إصدار Chrome 83

إصدار 82 من Chrome

تم إلغاء إصدار 82 من Chrome.

إصدار 81 من Chrome

80 Chrome

الإصدار 79 من Chrome

الإصدار 78 من Chrome

الإصدار 77 من Chrome

الإصدار 76 من Chrome

الإصدار 75 من Chrome

الإصدار 74 من Chrome

الإصدار 73 من Chrome

الإصدار 72 من Chrome

الإصدار 71 من Chrome

Chrome 70

إصدار Chrome 68

الإصدار 67 من Chrome

Chrome 66

الإصدار 65 من Chrome

إصدار 64 من Chrome

إصدار 63 من Chrome

إصدار 62 من Chrome

إصدار 61 من Chrome

إصدار 60 من Chrome

الإصدار 59 من Chrome