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

Kayce Basques

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

نسخ النص كإجراء استرجاع

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

نسخ الرمز المكافئ لـ 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"
});

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

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

تتضمّن لوحة عمليات التدقيق عمليتَي تدقيق جديدتَين، وهما:

خيارات الضبط الجديدة

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

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

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

الشكل 6 خيارات جديدة لإعداد عمليات التدقيق

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

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

زر "عرض سجلّ التتبّع"

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

إيقاف التكرارات اللانهائية

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

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

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

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

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

عرض مقاييس وقت المستخدم في علامة التبويب من أسفل إلى أعلى

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

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

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

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

لقطات شاشة قبل وبعد التغيير في لوحة "الذاكرة"

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

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

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

في لوحة المصادر، تم تغيير اسم علامة التبويب الشبكة إلى علامة التبويب الصفحة.

نافذتا أدوات مطوري البرامج جنبًا إلى جنب تعرضان التغيير في الاسم.

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

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

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

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

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

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

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

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

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

ميزة "عزل الموقع" في لوحة "الأداء"

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

يشير إلى رسومات بيانية للرسومات البيانية لكل عملية في تسجيل الأداء.

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

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

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

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

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

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

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