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

Kayce Basques

تشمل الميزات الجديدة والتغييرات الرئيسية التي ستطرأ على "أدوات مطوّري البرامج" في الإصدار 67 من Chrome ما يلي:

• البحث في جميع عناوين الشبكة
• معاينات قيم متغيّرات CSS في لوحة الأنماط
• النسخ بتنسيق fetch
• عمليات تدقيق جديدة وخيارات ضبط لأجهزة الكمبيوتر المكتبي وعرض عمليات التتبُّع
• إيقاف الحلقات اللانهائية
• "أوقات المستخدم" في علامات التبويب الأداء
• إدراج مثيلات أجهزة JavaScript الافتراضية بوضوح في لوحة الذاكرة
• تمت إعادة تسمية علامة التبويب الشبكة في لوحة المصادر إلى علامة التبويب الصفحة
• تعديلات على المظهر الداكن
• معلومات شفافية الشهادات في لوحة الأمان
• ميزات عزل المواقع الإلكترونية في لوحة الأداء

نسخة الفيديو من ملاحظات الإصدار:

البحث في جميع عناوين الشبكة والردود

افتح لوحة الشبكة ثم اضغط على Command+F (نظام التشغيل Mac) أو Control+F (أنظمة التشغيل Windows وLinux وChromeOS) لفتح لوحة البحث في الشبكة الجديدة. تبحث "أدوات مطوّري البرامج" في العناوين والنصوص الأساسية لجميع طلبات الشبكة عن طلب البحث الذي تقدّمه.

الشكل 1: البحث عن النص cache-control باستخدام لوحة "البحث في الشبكة" الجديدة

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

الشكل 2: طلب بحث باستخدام تعبير عادي في لوحة "البحث في الشبكة"

تعديلات على واجهة مستخدم لوحة البحث

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

الشكل 3: واجهة المستخدم القديمة على اليمين، وواجهة المستخدم الجديدة على اليسار

اضغط على Command+Option+F (على أجهزة Mac) أو Control+Shift+F (على أجهزة Windows وLinux وChromeOS) لفتح البحث العام. يمكنك أيضًا فتحها من خلال قائمة الأوامر.

معاينات قيم متغيّرات CSS في لوحة الأنماط

عند ضبط قيمة سمة لون CSS، مثل background-color أو color، على متغيّر CSS، تعرض "أدوات مطوّري البرامج" الآن معاينة لهذا اللون.

الشكل 4: في واجهة المستخدم القديمة على اليمين، لا تظهر معاينة للألوان بجانب color: var(--main-color)، بينما تظهر في واجهة المستخدم الجديدة على اليسار

نسخ كطلب جلب

انقر بزر الماوس الأيمن على طلب شبكة، ثم اختَر نسخ > نسخ كجلب لنسخ الرمز المكافئ لـ fetch() لهذا الطلب إلى الحافظة.

الشكل 5. نسخ الرمز المكافئ لـ fetch() لطلب معيّن

تُنشئ "أدوات مطوّري البرامج" رمزًا برمجيًا مثل ما يلي:

fetch("https://preload.glitch.me/styles.css", {
  "credentials": "omit",
  "headers": {},
  "referrer": "https://preload.glitch.me/after/",
  "referrerPolicy": "no-referrer-when-downgrade",
  "body": null,
  "method": "GET",
  "mode": "cors"
});

تعديلات على لوحة "عمليات التدقيق"

عمليات تدقيق جديدة

تحتوي لوحة عمليات التدقيق على عمليتَي تدقيق جديدتَين، بما في ذلك:

• التحميل المسبَق للطلبات الرئيسية يمكن أن يؤدي التحميل المُسبق للطلبات إلى تسريع وقت تحميل الصفحة من خلال إعطاء تلميحات إلى المتصفّح لتنزيل الموارد المهمة لمسار العرض الحرج في أقرب وقت ممكن.
• تجنَّب النص غير المرئي أثناء تحميل خطوط الويب. إنّ ضمان ظهور النص أثناء تحميل خطوط الويب يجعل الصفحة أكثر فائدة للمستخدمين بشكل أسرع.

خيارات الإعدادات الجديدة

يمكنك الآن ضبط لوحة عمليات التدقيق لإجراء ما يلي:

• الحفاظ على إعدادات إطار العرض ووكيل المستخدم على أجهزة الكمبيوتر المكتبي بعبارة أخرى، يمكنك منع لوحة عمليات التدقيق من محاكاة جهاز جوّال.
• أوقِف التحكُّم في الشبكة ووحدة المعالجة المركزية.
• الاحتفاظ بمساحة التخزين، مثل LocalStorage وIndexedDB، في جميع عمليات التدقيق

الشكل 6. خيارات جديدة لضبط التدقيق

عرض عمليات التتبُّع

بعد تدقيق صفحة، انقر على عرض التتبُّع للاطّلاع على بيانات أداء التحميل التي يستند إليها التدقيق في لوحة الأداء.

الشكل 7: زر عرض سجلّ التتبُّع

إيقاف الحلقات اللانهائية

إذا كنت تعمل كثيرًا مع حلقات for أو حلقات do...while أو التكرار، من المحتمل أنّك نفّذت حلقة لا نهائية عن طريق الخطأ أثناء تطوير موقعك الإلكتروني. لإيقاف التكرار اللانهائي، يمكنك الآن:

1. افتح لوحة المصادر.
2. انقر على إيقاف مؤقت . يتغيّر الزر إلى استئناف تنفيذ النص البرمجي .
3. اضغط مع الاستمرار على استئناف تنفيذ النص البرمجي ثم اختَر إيقاف استدعاء JavaScript الحالي .

في الفيديو أعلاه، يتم تعديل الساعة من خلال موقّت setInterval(). يؤدي النقر على بدء التكرار اللانهائي إلى تشغيل تكرار do...while لا يتوقف أبدًا. يتم استئناف الفاصل الزمني لأنّه لم يكن قيد التشغيل عند اختيار إيقاف استدعاء JavaScript الحالي .

أوقات المستخدم في علامات التبويب "الأداء"

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

الشكل 8 عرض مقاييس "أوقات المستخدم" في علامة التبويب من الأسفل إلى الأعلى يشير الشريط الأزرق على يمين قسم أوقات المستخدم إلى أنّه تم اختياره.

بشكل عام، يمكنك الآن اختيار أي من الأقسام (المؤشر الرئيسي وأوقات المستخدم ووحدة معالجة الرسومات وScriptStreamer وما إلى ذلك) وعرض نشاط هذا القسم في علامات التبويب.

اختيار مثيلات أجهزة JavaScript الافتراضية في لوحة "الذاكرة"

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

الشكل 9 في واجهة المستخدم القديمة على اليمين، تكون مثيلات الأجهزة الافتراضية للغة JavaScript مخفية خلف القائمة المنسدلة الهدف، بينما تظهر في واجهة المستخدم الجديدة على اليسار في جدول اختيار مثيل جهاز افتراضي للغة JavaScript

بجانب مثيل developers.google.com، هناك قيمتان: 8.7 MB و13.3 MB. وتمثّل القيمة على اليمين الذاكرة المخصّصة بسبب JavaScript. وتمثّل القيمة على اليمين كل ذاكرة نظام التشغيل التي يتم تخصيصها بسبب مثيل الجهاز الافتراضي هذا. وتتضمن القيمة اليمنى القيمة اليسرى. في "مدير المهام" في Chrome، تتوافق القيمة على اليمين مع JavaScript Memory وتتوافق القيمة على اليسار مع Memory Footprint.

تمت إعادة تسمية علامة التبويب "الشبكة" إلى علامة التبويب "الصفحة"

في لوحة المصادر، أصبحت علامة التبويب الشبكة تُعرف الآن باسم علامة التبويب الصفحة.

الشكل 10 في واجهة المستخدم القديمة على اليمين، تسمى علامة التبويب التي تعرض موارد الصفحة الشبكة، بينما تسمى في واجهة المستخدم الجديدة على اليسار الصفحة

تعديلات على المظهر الداكن

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

الشكل 11 لقطة شاشة لرمز نقطة الإيقاف الجديد ومخطط ألوان سطر التنفيذ الحالي

شهادة الشفافية في لوحة "الأمان"

تعرض لوحة الأمان الآن معلومات شفافية الشهادات.

الشكل 12 معلومات شفافية الشهادات في لوحة "الأمان"

"عزل المواقع الإلكترونية" في لوحة "الأداء"

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

الشكل 13 الرسوم البيانية المفصّلة لأداء الرموز لكل عملية في تسجيل "الأداء"

تنزيل قنوات النسخة الحصرية

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

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

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

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

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

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