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

Kayce Basques

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

• البحث في جميع عناوين الشبكة
• معاينات لقيم متغيّرات CSS في اللوحة الأنماط
• النسخ كإجراء استرجاع
• عمليات تدقيق جديدة وخيارات إعداد على الكمبيوتر وعرض عمليات التتبُّع
• إيقاف التكرار اللانهائي
• وقت المستخدم في علامات التبويب الأداء
• إدراج مثيلات الأجهزة الافتراضية للغة 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، تعرض "أدوات مطوّري Chrome" الآن معاينة لهذا اللون.

الشكل 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"
});

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

الشكل 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 كمتصفّح تطوير تلقائي. تتيح لك قنوات المعاينة هذه الوصول إلى أحدث ميزات DevTools، وتتيح لك اختبار أحدث واجهات برمجة التطبيقات لمنصة الويب، وتساعدك في العثور على المشاكل في موقعك الإلكتروني قبل أن يواجهها المستخدمون.

التواصل مع فريق Chrome DevTools

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

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

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

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