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

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

• إتاحة عوامل التشغيل await في المستوى الأعلى ضمن وحدة التحكّم
• لقطات شاشة لجزء من إطار العرض ولقطات شاشة لعُقد HTML معيّنة
• تمييز شبكة CSS
• واجهة برمجة تطبيقات Console جديدة للاستعلام عن العناصر:
• الفلاتر السلبية وفلاتر عناوين URL في وحدة التحكّم
• عمليات استيراد ملفات HAR في لوحة الشبكة
• موارد التخزين المؤقت التي يمكن معاينتها
• تصحيح أخطاء ذاكرة التخزين المؤقت بشكل أكثر قابلية للتوقّع:
• تغطية الرموز البرمجية على مستوى الكتلة:

عوامل التشغيل top-level await في "وحدة التحكّم"

تتيح وحدة التحكّم الآن عوامل تشغيل await على أعلى مستوى.

الشكل 1 استخدام عوامل التشغيل await في المستوى الأعلى في وحدة التحكّم

مهام سير عمل جديدة لالتقاط لقطات الشاشة

يمكنك الآن أخذ لقطة شاشة لجزء من إطار العرض أو لعقدة HTML معيّنة.

لقطات شاشة لجزء من إطار العرض

لأخذ لقطة شاشة لجزء من نافذة العرض، اتّبِع الخطوات التالية:

1. انقر على فحص أو اضغط على Command+Shift+C (في نظام التشغيل Mac) أو Control+Shift+C (في نظام التشغيل Windows أو Linux) للدخول إلى وضع "فحص العنصر".
2. اضغط مع الاستمرار على Command (نظام التشغيل Mac) أو Control (نظام التشغيل Windows أو Linux) واختَر جزء نافذة العرض الذي تريد أخذ لقطة شاشة له.
3. ارفع إصبعك عن الماوس. تنزّل "أدوات مطوّلي البرامج" لقطة شاشة للجزء الذي اخترته.

الشكل 2 أخذ لقطة شاشة لجزء من نافذة العرض

لقطات شاشة لعُقد HTML معيّنة

لالتقاط لقطة شاشة لعنصر HTML معيّن، اتّبِع الخطوات التالية:

1. اختَر عنصرًا في لوحة العناصر.

   

   الشكل 3 في هذا المثال، الهدف هو أخذ لقطة شاشة للعنوان الأزرق الذي يتضمّن النص Tools. يُرجى العِلم أنّه تم اختيار هذه العقدة مسبقًا في شجرة DOM ضمن لوحة العناصر.

2. افتح قائمة الأوامر.

3. ابدأ الكتابة node واختَر Capture node screenshot. تنزّل DevTools لقطة شاشة للعقدة المحدّدة.

   

   الشكل 4 نتيجة الأمر Capture node screenshot

تمييز شبكة CSS

لعرض شبكة CSS التي تؤثر في أحد العناصر، مرِّر مؤشر الماوس فوق أحد العناصر في شجرة DOM ضمن لوحة العناصر. يظهر حدّ متقطّع حول كل عنصر من عناصر الشبكة. لا يعمل هذا الخيار إلا عندما يتم تطبيق display:grid على العنصر المحدّد أو العنصر الرئيسي للعنصر المحدّد.

الشكل 5 تمييز شبكة CSS

يمكنك مشاهدة الفيديو أدناه للتعرّف على أساسيات CSS Grid في أقل من دقيقتَين.

واجهة برمجة تطبيقات جديدة للاستعلام عن عناصر الذاكرة المؤقتة

استدعِ queryObjects(Constructor) من وحدة التحكّم لعرض مصفوفة من العناصر التي تم إنشاؤها باستخدام الدالة الإنشائية المحدّدة. على سبيل المثال:

• ‫queryObjects(Promise): تعرض جميع الوعود.
• queryObjects(HTMLElement): تعرض جميع عناصر HTML.
• queryObjects(foo)، حيث foo هو اسم دالة. تعرِض هذه الطريقة جميع العناصر التي تم إنشاؤها باستخدام new foo().

نطاق queryObjects() هو سياق التنفيذ المحدّد حاليًا في وحدة التحكّم. اطّلِع على مقالة اختيار سياق التنفيذ.

فلاتر جديدة في Console

تتيح وحدة التحكّم الآن استخدام الفلاتر السلبية وفلاتر عناوين URL.

الفلاتر ذات التأثير السلبي

اكتب -<text> في مربّع الفلتر لفلترة أي رسالة وحدة تحكّم تتضمّن <text>.

الشكل 6 تسجّل الجملة الأولى القيم one وtwo وthree وfour في وحدة التحكّم. تم إخفاء two لأنّه تم إدخال -two في مربّع الفلتر

تستبعد "أدوات مطوّري البرامج" الرسالة إذا تم العثور على <text>:

• في نص الرسالة
• في اسم الملف الذي نشأت منه الرسالة
• في نص تتبُّع تسلسل استدعاء الدوال البرمجية

يعمل الفلتر السلبي أيضًا مع التعبيرات العادية، مثل -/[4-5]*ms/.

فلاتر عناوين URL

اكتب url:<text> في مربّع الفلتر لعرض الرسائل التي مصدرها نص برمجي يتضمّن عنوان URL الخاص به <text> فقط.

يستخدم الفلتر المطابقة التقريبية. إذا ظهرت <text> في أي مكان في عنوان URL، ستعرض "أدوات مطوّري البرامج" الرسالة.

الشكل 7 استخدام فلترة عناوين URL لعرض الرسائل التي مصدرها نصوص برمجية يتضمّن عنوان URL الخاص بها hymn فقط من خلال تمرير مؤشر الماوس فوق اسم البرنامج النصي، يمكنك ملاحظة أنّ اسم المضيف يتضمّن هذا النص

عمليات استيراد HAR في "لوحة الشبكة"

اسحب ملف HAR وأفلِته في لوحة الشبكة لاستيراده.

الشكل 8 استيراد ملف HAR

موارد ذاكرة التخزين المؤقت القابلة للمعاينة في "لوحة التطبيق"

انقر على صف في جدول مساحة تخزين مؤقت لعرض معاينة لهذا المورد أسفل الجدول.

الشكل 9 معاينة مورد من ذاكرة التخزين المؤقت

تصحيح أخطاء النسخ المخزّنة بشكل أسرع

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

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

يمكنك الاطّلاع على العرض التوضيحي لسعة ذاكرة التخزين المؤقت لتجربته بنفسك.

نسبة استخدام الرموز على مستوى مجموعة الرموز

في الإصدار 61 من Chrome والإصدارات الأقدم، تضع علامة التغطية على كل الرمز البرمجي ضِمن دالة على أنّه مستخدَم، وذلك طالما تم استدعاء الدالة.

الشكل 10 مثال على علامة التبويب التغطية في Chrome 61 تم وضع علامة "مستخدَم" على السطر 4، مع أنّه لا يتم تنفيذه أبدًا

بدءًا من الإصدار 62 من Chrome، تخبرك علامة التبويب التغطية الآن بالرمز الذي يتم استدعاؤه ضمن إحدى الدوال.

الشكل 11 مثال على علامة التبويب التغطية في الإصدار 62 من Chrome تم وضع علامة "غير مستخدَم" على السطر 4

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

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

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

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

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

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

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