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

Kayce Basques

الميزات والتغييرات الجديدة التي ستتوفّر في DevTools في الإصدار 62 من Chrome:

عوامل تشغيل الانتظار من المستوى الأعلى في وحدة التحكّم

تتيح وحدة التحكّم الآن استخدام عوامل تشغيل 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 لقطة شاشة للnode التي تم اختيارها.

    نتيجة الأمر "التقاط لقطة شاشة للعقدة"

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

تمييز شبكة CSS

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

تمييز شبكة CSS

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

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

واجهة برمجة تطبيقات جديدة لطلبات البحث عن عناصر الحِزم

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

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

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

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

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

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

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

مثال على 3 رسائل ستتم فلترتها

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

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

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

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

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

اكتب url:<text> في مربّع الفلترة لعرض الرسائل التي نشأت من نص برمجي يحتوي <text> على عنوان URL.

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

مثال على فلترة عناوين URL

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

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

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

استيراد ملف HAR

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

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

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

معاينة مرجع ذاكرة التخزين المؤقت

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

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

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

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

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

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

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

مثال على علامة التبويب &quot;التغطية&quot; في Chrome 61

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

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

مثال على علامة التبويب &quot;التغطية&quot; في الإصدار 62 من Chrome

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

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

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

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

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

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

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